Tutorial | Creating Your Own Layout.xml!, 240*320 phones Options

[photographer]

Creating your own layout.xml

This tutorial recuires some insight in geometerics

We're going to create our own layout.xml!

Note: Snowiffic has released an awesome and easy to use layout editor called SELE (Sony Ericsson Layouts Editor) take a look in THIS topic

Example:


Requires:
1. Original layout.xml for your phone
2. xml editor (notepad or wordpad will do the job!)
3. Creativity!

Tutorial:
1. Open your layout.xml in notepad.
2. Search for "StatusIndication" (without quotes)
3. Scroll down a little and you will see a table like this:

CODE

<object name="StatusIndication">
<settings>
<sett name="RowHeight" value="0"/>
<sett name="TopOffset" value="0"/>
<sett name="TitleHeight" value="0"/>
<sett name="TitleTopOffset" value="0"/>
<sett name="TitleMode" value="1"/>
<sett name="OverlayStyle" value="0"/>
<sett name="YPos" value="24"/>
<sett name="Height" value="266"/>
</settings>
<attributes count="91">

<attr value="FontE_24R"/>
<attr value="FontE_20R"/>
<attr value="FontE_100R"/>
<attr value="FontE_75R"/>
<attr value="FontE_40R"/>
<attr value="FontE_20R"/>

<attr value="6"/>
<attr value="4"/>
<attr value="4"/>
<attr value="4"/>

<attr value="16"/>
<attr value="1"/> <attr value="239"/> <attr value="5"/> <attr value="32"/> <attr value="10"/>
<attr value="1"/> <attr value="239"/> <attr value="34"/> <attr value="56"/> <attr value="10"/>
<attr value="1"/> <attr value="239"/> <attr value="34"/> <attr value="80"/> <attr value="10"/>
<attr value="1"/> <attr value="239"/> <attr value="55"/> <attr value="80"/> <attr value="10"/>
<attr value="1"/> <attr value="239"/> <attr value="82"/> <attr value="104"/> <attr value="10"/>
<attr value="4"/> <attr value="236"/> <attr value="34"/> <attr value="184"/> <attr value="4"/>
<attr value="4"/> <attr value="236"/> <attr value="58"/> <attr value="184"/> <attr value="4"/>
<attr value="4"/> <attr value="236"/> <attr value="82"/> <attr value="184"/> <attr value="4"/>
<attr value="4"/> <attr value="236"/> <attr value="106"/> <attr value="184"/> <attr value="4"/>
<attr value="0"/> <attr value="173"/> <attr value="205"/> <attr value="281"/> <attr value="0"/>
<attr value="0"/> <attr value="240"/> <attr value="181"/> <attr value="281"/> <attr value="0"/>
<attr value="121"/> <attr value="236"/> <attr value="210"/> <attr value="234"/> <attr value="5"/>
<attr value="116"/> <attr value="236"/> <attr value="238"/> <attr value="262"/> <attr value="5"/>
<attr value="4"/> <attr value="116"/> <attr value="210"/> <attr value="234"/> <attr value="5"/>
<attr value="4"/> <attr value="116"/> <attr value="238"/> <attr value="262"/> <attr value="5"/>
<attr value="174"/> <attr value="240"/> <attr value="211"/> <attr value="251"/> <attr value="0"/>
</attributes>
</object>

We're only going to need the values starting at

CODE

<attr value="1"/>   <attr value="239"/> <attr value="5"/>   <attr value="32"/>  <attr value="10"/> <!-- 0 -->

and down.
At the end of each line you see this indicates the object the values are for.
The first attr value is called X1, the second one X2, the third one Y1 and the last one Y2. I'm not sure about the 5th value, so don't change it.
All attr values stand for coordinates for the start of the box the onject is placed in. In this example I'm going to move the time object!
The string for time says:

CODE

<attr value="121"/> <attr value="236"/> <attr value="210"/> <attr value="234"/> <attr value="5"/> <!-- Time -->

X1 is the coordinate for the most left pixel of the box, starting counting from the right bound of the screen.
X2 is the coordinate for the most right pixel of the box, starting counting from the left bound of the screen.
Y1 is the coordinate for the most upper pixel of the box, starting counting from under the statusbar (!!).
Y2 is the coordinate for the most low pixel of the box, starting counting from under the statusbar (!!).

The statusbar is sized 240x24 pixels, like this:


So, when we want to track down "Time" we do this:


The white box is now the box where the object "time" can appear.
A little calculation will show us that the box measures are:
240-236=4
X2-4 => 121-4=117
Y2-Y1 => 234-210=24

Measure => 117x24

Move the box
If we want to move this box, we will have to change the values!
For example, I want the time to be at the total right top!
AH! That will mean that x2 can stay the same, x1 aswell! Y2 and Y1 will have to be changed.

In the total top => Y1=1 and Y2 will be 24 pixels more than Y1 means Y2=1+24=25
Wohoo! Let's change the values! Change the values and upload it to your phone in tps/system/layout
USE SEARCH FOR A TUTORIAL FOR UPLOADING (XS++ and JDFlasher can do that job)

Some more examples:




Removing the operator logo
One of the most annoying objects on the standby screen will probably be the operator logo. Don't worry! We can remove it . Its very easy.

Find this line in your layout.xml:

CODE

<attr value="1"/>   <attr value="239"/> <attr value="5"/>   <attr value="[b]32[/b]"/>  <attr value="10"/> <!-- 0 -->

It's in the same region, under " <object name="StatusIndication"> "
Now change the value 32 to -10 .
There you go! No more operator logo!
You can test your new layout here:
http://mike.thedt.net/temp/layout.php


Removing the scrollbars
(Attention! Removes every scrollbar in your phone.)
This one can be very usefull aswell After doing this every scrollbar in the whole phone will be gone (so in fullscreen menus aswell)

Search for this line:

CODE

<attr value="1"/>   <attr value="239"/> <attr value="34"/>  <attr value="56"/>  <attr value="10"/> <!-- 1 -->

(right under the line we just edited to remove the operator logo )
Change the value 56 to -10 and say bye bye to the scrollbars


Changing fontsizes
Another funky thing we can change are the fontsizes! The in the example used font for the big clock is FontE_40R.
The fonts for the clock, alarm, date and so on are set in the first part of the section we just edited (under "SatusIndication") and it looks like this:

CODE

    <!-- Main display text attr -->
    <attr value="FontE_24R"/>  <!-- Large font -->
    <attr value="FontE_20R"/>  <!-- Small font -->
    <attr value="FontE_100R"/> <!-- Large 24h font -->
    <attr value="FontE_75R"/>  <!-- Large 12h font -->
    <attr value="FontE_40R"/>  <!-- Large 12h AM/PM font -->
    <attr value="FontE_20R"/>  <!-- Time/Date font -->

As you might have figured FontE_100R is the biggest font, bigger does not fit on the screen
Basically FontE_1R should be the smalles font, but FontE_8R is about the smallest fontsize that is still readable.
In my example above I used the font size FontE_40R for the big clock in the upper right corner of my display.
You can set any value for the fontsize you want

Extra:
Fontsize for the softkeys.

The fontsize for the softkeys is set in the object "Softkeys" in layout.xml and it looks like this in default mode:

CODE

<object name="SoftKeys">
  <settings>
    <sett name="FontType" value="FontE_24R"/>
    <sett name="RowHeight" value="30"/>
    <sett name="TopOffset" value="2"/>
    <sett name="TitleHeight" value="0"/>
    <sett name="TitleTopOffset" value="0"/>
    <sett name="TitleMode" value="1"/>
    <sett name="OverlayStyle" value="0"/>
    <sett name="YPos" value="290"/>
    <sett name="Height" value="30"/>
    <sett name="YRelatively" value="0"/>
  </settings>
  <settings orientation="1">
    <sett name="FontType" value="FontE_24R"/>
    <sett name="XPos" value="205"/>
    <sett name="YPos" value="0"/>
    <sett name="Width" value="115"/>
    <sett name="Height" value="240"/>
  </settings>
  <settings orientation="1" layout="1">
    <sett name="FontType" value="FontE_24R"/>
    <sett name="XPos" value="205"/>
    <sett name="YPos" value="0"/>
    <sett name="Width" value="115"/>
    <sett name="Height" value="240"/>
  </settings>
</object>

As you can see size 24 is default. I use size 15 in my own phone.
The first line sets the font size for softkeys when using your phone is portraid mode.
The second part of the object sets the size for the softkey text when viewing stuff (like pictures) in landscape mode.
Just as with the other fontsizes you can change these values. (i would recommend not smaller than 8 and not bigger than 25)

Moving the status indication icons!
(battery, signal, silent mode, 3G icon, bluetooth icon, etc.)

Moving the status indication icons works the same way as moving the time, date, and so on. Check above for how to edit the values!

CODE

<object name="StatusRow">
  <settings>
    <sett name="FontType" value="FontE_14B"/>
    <sett name="RowHeight" value="14"/>
    <sett name="TopOffset" value="0"/>
    <sett name="OverlayStyle" value="0"/>
    <sett name="YPos" value="0"/>
    <sett name="Height" value="24"/>
  </settings>
  <settings orientation="1">
    <sett name="Height" value="0"/>
  </settings>
  <attributes count="71">
    <attr value="96"/>  <!-- Time x1 -->
    <attr value="136"/> <!-- Time x2 -->
    <attr value="7"/>   <!-- Time y1 -->
    <attr value="23"/>  <!-- Time y2 -->
    <!-- Status icon (x1, x2, y1, y2, align, field) -->
    <attr value="11"/> <!-- Nbr icons -->
    <attr value="0"/>   <attr value="240"/> <attr value="0"/>   <attr value="320"/> <attr value="1"/>  <attr value="0"/>
    <attr value="71"/>  <attr value="96"/>  <attr value="1"/>   <attr value="23"/>  <attr value="1"/>  <attr value="1"/>  <!-- 3G -->
    <attr value="214"/>  <attr value="239"/>  <attr value="1"/>   <attr value="23"/>  <attr value="1"/>  <attr value="1"/>  <!-- NoSound -->
    <attr value="188"/>  <attr value="214"/> <attr value="1"/>   <attr value="23"/>  <attr value="1"/>  <attr value="1"/>  <!-- BT -->
    <attr value="162"/> <attr value="188"/> <attr value="1"/>   <attr value="23"/>  <attr value="1"/>  <attr value="1"/>  <!-- Java -->
    <attr value="136"/> <attr value="162"/> <attr value="1"/>   <attr value="23"/>  <attr value="1"/>  <attr value="1"/>  <!-- MP/Radio -->
    <attr value="110"/> <attr value="136"/> <attr value="1"/>   <attr value="23"/>  <attr value="1"/>  <attr value="1"/>  <!-- Msg -->
    <attr value="1"/>   <attr value="31"/>  <attr value="1"/>   <attr value="23"/>  <attr value="18"/> <attr value="2"/>  <!-- Signal -->
    <attr value="32"/> <attr value="70"/> <attr value="1"/>   <attr value="23"/>  <attr value="5"/>  <attr value="3"/>  <!-- Batt icon -->
    <attr value="32"/> <attr value="70"/> <attr value="1"/>   <attr value="23"/>  <attr value="1"/>  <attr value="4"/>  <!-- Charge -->
    <attr value="0"/>   <attr value="240"/> <attr value="0"/>   <attr value="25"/>  <attr value="1"/>  <attr value="5"/>  <!--  -->
  </attributes>
</object>

Changelog:
28-05-2008: Initial release
31-05-2008: Added original layout.xml for w580i, s500i, w850i, K790, K800, K810.
01-06-2008: Added fonts description
31-08-2008: Added status bar icons tutorial
02-12-2008: Added Mr. T's layout tool v0.4
07-12-2008: Updated SELG to G3_v0.5 - MrT
18-01-2009: Removed SELG link, added SELE link at the header - MrT
01-08-2009 : Renamed MrThunderbird to Snowiffic - SWi
That's it for now!

This post has been edited by Snowiffic: 2009-08-01 17:21

Attached File(s)

 LAYOUT_w850i.rar ( 4.15K ) Number of downloads: 223
 LAYOUT_K790_K800_K810.rar ( 4.15K ) Number of downloads: 421
 LAYOUT_W580i_S500i.rar ( 4.15K ) Number of downloads: 194
 Layout_W880i.rar ( 4.31K ) Number of downloads: 192

 

[amrinal]

useful tutorial, dude....
thx... wanna try my own layout

This post has been edited by Mr. Thunderbird: 2008-08-26 18:41

Reason for edit: Removed Quote

[amrinal]

CODE

    <attr value="121"/> <attr value="236"/> <attr value="5"/>   <attr value="32"/> <attr value="5"/> <!-- Time -->  
    <attr value="116"/> <attr value="236"/> <attr value="10"/>   <attr value="72"/> <attr value="5"/> <!-- Date -->
    <attr value="4"/>   <attr value="116"/> <attr value="210"/> <attr value="234"/> <attr value="5"/> <!-- Timer -->
    <attr value="4"/>   <attr value="116"/> <attr value="238"/> <attr value="262"/> <attr value="5"/> <!-- Alarm -->

could u fix it.. and i want operator logo appear and change location
bigger date,
alarm move to right,
time same to date row


This post has been edited by amrinal: 2008-05-28 16:34

[photographer]

The date fonts can be set elsewhere in the layout.xml

[steadyontherem8]

Yay, now I can edit my layout.xml without screwing it up

[blunden]

Could you please tell me what lines are responsible for the scrollbar in the menu (on the k810)?

I've seen multiple people change it but they also include a bunch of stuff I don't want making a comparison harder. Also, since I don't know technique to remove it (do you just move it off the screen or do you remove it fully etc.) that makes it even harder. Great tutorial btw.

[Snowiffic]

I think you would like to have this one moved.

So I'll have the honor doing it..

Moved

[photographer]

Wohoo thx. Im still improving it, more images and examples coming after lunch

[Snowiffic]

Great!

You will have your "Tutorials Submitted" soon, when Scots comes online.

[photographer]

*Added guide to remove operator logo's and scrollbars*

oooh that would be sweet!

I have an other tutorial here on the forum, it's called "How to create a flashh lite clock" can it be moved too?

This is the url : http://forums.se-nse.net/index.php?showtopic=14056

Photographer

This post has been edited by Photographer: 2008-05-30 12:32

[Snowiffic]

Your other guide has been moved.

[photographer]

Thanks

*I'll attach all layouts of 240*320 phones in the first post soon.*

[Kolle]

hey, is it possible to make the small clock disappear? so that i only have a clock when i select the big clock in my phone settings...

can i do it the same way like making the operator logo disappear? but wich line is it

[photographer]

Yes you can, make the 4th value -10 at the line saying time.

(doh ^^ so easy. se even said wich line indicates wich object)

[henz]

@ photographer,

i just want to put the "large time" in the middle, in which line in layout i will modify?

OT:

can you upload that smilies pictures please.. (or theme)

[Tasiek24]

How to increase the letter of clock ??

[RobvB]

Just wondering, is there any way you are allowed to have a large clock and a small clock? I'd love that so much.

[photographer]

@ Tasiek24: yes it's possible! I'm working on the fonts part, there are about 5 diffrent fonts you can choose. I'll add a guide on that tomorrow.

@ RobvB: I'm not sure about that...

[dutch]Heej heej, welkom op se-nse [/dutch]

here is the background:
 smiley.jpg ( 78.73K ) Number of downloads: 215


This post has been edited by Photographer: 2008-05-30 15:32

[RobvB]

Hmm I might mess around with the code by myself to try if it's possible. Thanks for the great tutorial!
[dutch]Dankje Weet je toevallig waar ik ergens in Nederland een black/orange housing kan krijgen?[/dutch]

[photographer]

[dutch]
Ik heb geen idee... op marktplaats vind je alleen maar goedkope replica's... van die glimmende. op ebay zijn ze wel goed te vinden, deze bijvoorbeeld: http://cgi.ebay.com/Housing-Faceplate-Cove...1QQcmdZViewItem
[/dutch]

Told him where to get the housing ^^