Help - Search - Members - Calendar
Full Version: Tutorial | Creating Your Own Layout.xml!
SE-NSE Forums > SE Firmware > Firmware Tutorials & Guides
Pages: 1, 2, 3, 4, 5, 6, 7
photographer
Creating your own layout.xml


This tutorial recuires some insight in geometerics wink.gif

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 laugh.gif . 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 smile.gif 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 smile.gif )
Change the value 56 to -10 and say bye bye to the scrollbars wink.gif


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 wink.gif
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 smile.gif

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 tongue.gif - SWi
That's it for now!
amrinal


useful tutorial, dude....
thx... wanna try my own layout cool.gif thumbsup.gif
amrinal
tongue.gif lol.gif

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
confused.gif
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 laugh.gif
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 laugh.gif thx. Im still improving it, more images and examples coming after lunch smile.gif
Snowiffic
Great! thumbsup.gif

You will have your "Tutorials Submitted" soon, when Scots comes online. smile.gif
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 smile.gif : http://forums.se-nse.net/index.php?showtopic=14056

Photographer
Snowiffic
Your other guide has been moved.
photographer
Thanks smile.gif

*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 confused.gif
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 smile.gif [/dutch]

here is the background:
Click to view attachment
RobvB
Hmm I might mess around with the code by myself to try if it's possible. Thanks for the great tutorial!
[dutch]Dankje wink.gif 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 ^^
kreutzfeldt
hiya ^^ great tutorial! smile.gif

one question though: can i move the clock inside the menu?

greetings smile.gif
photographer
Nope you can't... I already tried to move the clock into the statusbar (would be soo cool) but it didn't work sad.gif It just disappeared under the statusbar.
edeboi
@ Photographer

Can you pls attach the layout.xml of these screenshot?



Or can you say, which values we have to change, so that we can have this small clock in big clock style above the date?
photographer
Ofcource smile.gif

I'm not sure about the w880i layout, w880i is kind of diffrent from other 240*320, so here are the values:

CODE
<attr value="70"/>   <attr value="310"/> <attr value="-41"/> <attr value="59"/> <attr value="0"/> <!-- L 24h time -->
<attr value="118"/> <attr value="234"/> <attr value="15"/> <attr value="39"/> <attr value="5"/> <!-- Date -->
edeboi
Ok, L 24h -> 40R

Workin dude, thx Photographer!
photographer
And I think you need to use the same font as me aswell! Not sure about that one.
edeboi
Already done !
I'm using the same font as you, Sony Sketch from diezil...

Heres the final Result :



Great Thanks to you !
photographer
Nice one smile.gif I'm busy with the fonts ^^ I'm trying to remove the "Menu" and "Gesprekken" (calls) but I'm not having success tongue.gif removing the whole entry also removes them from the filemanager... There are patches floating around for every phone except W580i! When I try to convert it always says that the offsets are not there ...
RobvB
Hmm I can't get the clock like that sad.gif
edeboi
did you activate the mode 'big clock' ?

If yes, then pls replace/add these lines

CODE
    <attr value="70"/>   <attr value="310"/> <attr value="179"/> <attr value="279"/> <attr value="0"/> <!-- L 24h time -->
    <attr value="121"/> <attr value="236"/> <attr value="210"/> <attr value="234"/> <attr value="5"/> <!-- Time -->
    <attr value="118"/> <attr value="234"/> <attr value="238"/> <attr value="262"/> <attr value="5"/> <!-- Date -->


RobvB
Thanks for helping, I've got Sony Sketch font now and
CODE
    <attr value="70"/>   <attr value="310"/> <attr value="-41"/> <attr value="59"/> <attr value="0"/> <!-- L 24h time -->
    <attr value="121"/> <attr value="236"/> <attr value="210"/> <attr value="234"/> <attr value="5"/> <!-- Time -->  
    <attr value="118"/> <attr value="234"/> <attr value="15"/> <attr value="39"/> <attr value="5"/> <!-- Date -->

like Photographer, because I prefer having the clock in the upper right corner.
Yet, it still doesn't work. I can't get ScreenShooter to work so I can't make a screenshot.
rayt-
Thanks for the tutorial, it was very easy to understand and follow. I was playing around with the values and came up with this. The clock is smaller and looks better in my opinion. I took a picture of it because I don't know how to take a screenshot of the desktop. :X



By the way which one is for the step count? I don't have a W580 so I can't try it, but I want to help my friend do his.
RobvB
QUOTE (rayt- @ 2008-06-01 16:41) *
By the way which one is for the step count? I don't have a W580 so I can't try it, but I want to help my friend do his.


On my w580i, it looks like alarm is the step counter and timer is the alarm or something..
rayt-
QUOTE (RobvB @ 2008-06-01 12:15) *
On my w580i, it looks like alarm is the step counter and timer is the alarm or something..


Okay thanks, got it now!
photographer
OOOH that time one is nice! You can take screenshots with the screenshooter elf, you have to crossflash to w580i, then install elfs, then start screenshooter and take screenshots laugh.gif I'll post something about font sizes tonight!
RobvB
Photo, how did you get your time font that small?
edeboi
@ RobvB

You have to add/change this Value :

CODE
    <attr value="FontE_40R"/> <!-- Large 24h font -->
RobvB
Thank you so much! It worked!
photographer
laugh.gif I'm glad you like my work, Rob smile.gif

I'm gonna do a full reflash cuz my phone is kind of messed up, fon't don't work, some patches down't work anymore (I've been trying some things ^^ )
ukrides
is this possible with a z530i and how do i get the layout.xml from my phone
w. junior
Great tutorial.

I'm having a problem with a layout for w610. A friend got a layout in another forum, with the clock on the left. The problem is that, independent of the values that use the font is always small or the clock disappears from the screen.

I tried to do the same thing with the layout of my k810 and the same thing happened.

Can you help me?

Click to view attachment

Thanks in advance
Tasiek24
What is in the scrollbars ?? And what do remove him ??
amrinal
smile.gif Finally, i can make my own layout....


THX A LOT Photographer
thumbsup.gif
photographer
My pleasure smile.gif
gani
How can I change the Time and Date on a W800i Layout.xml?
I want to remove both or change the position!
I know I can change this under StatusIndication,but which lines?
But W800 layout.xml looks like other then K810i
What should I change there or how?

Original Layout W800:

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="18"/>
    <sett name="Height" value="176"/>
  </settings>
  <attributes count="29">
    <attr index="0" value="1"/>
    <attr index="1" value="0"/>
    <attr index="2" value="1"/>
    <attr index="3" value="0"/>
    <attr index="4" value="0"/>
    <attr index="5" value="1"/>
    <!-- Main display text attr -->
    <attr index="6" value="FontE_20B"/> <!-- Large font in stby -->
    <attr index="7" value="FontE_16B"/> <!-- Small font in stby -->
    <attr index="8" value="FontE_16B"/> <!-- Notes font -->
    <attr index="9" value="FontE_16B"/> <!-- Time/date font -->
    <attr index="10" value="22"/>  <!-- Opr y1 -->
    <attr index="11" value="44"/>  <!-- Opr y2 -->
    <attr index="12" value="47"/>  <!-- BSID y1 -->
    <attr index="13" value="65"/>  <!-- BSID y2 -->
    <attr index="14" value="47"/>  <!-- BSID2 y1 -->
    <attr index="15" value="83"/>  <!-- BSID2 y2 -->
    <attr index="16" value="65"/>  <!-- Zone y1 -->
    <attr index="17" value="83"/>  <!-- Zone y2 -->
    <attr index="18" value="83"/>  <!-- Zone2 y1 -->
    <attr index="19" value="101"/> <!-- Zone2 y2 -->
    <attr index="20" value="47"/>  <!-- Notes1 y1 -->
    <attr index="21" value="65"/>  <!-- Notes2 y1 -->
    <attr index="22" value="83"/>  <!-- Notes3 y1 -->
    <attr index="23" value="101"/> <!-- Notes4 y1 -->
    <attr index="24" value="4"/>   <!-- Notes x1 -->
    <attr index="25" value="173"/> <!-- Notes x2 -->
    <attr index="26" value="27"/>  <!-- Notes bttm-offs -->
    <attr index="27" value="25"/>  <!-- Time/date bttm-offs  -->
    <attr index="28" value="11"/>  <!-- Nbr texts in stby  -->
  </attributes>
  <attributes count="16">
    <attr index="0" value="1"/>
    <attr index="1" value="0"/>
    <attr index="2" value="1"/>
    <attr index="3" value="0"/>
    <attr index="4" value="0"/>
    <attr index="5" value="1"/>
    <!-- 2nd display text attr -->
    <attr index="6" value="FontE_20B"/> <!-- Time font 2nd -->
    <attr index="7" value="FontE_16B"/> <!-- Operator font 2nd -->
    <attr index="8" value="FontE_16B"/> <!-- Date font 2nd -->
    <attr index="9" value="6"/> <!-- Nbr texts 2nd -->
    <attr index="10" value="24"/> <!-- Text 1: y1 2nd -->
    <attr index="11" value="40"/> <!-- Text 1: y2 2nd -->
    <attr index="12" value="42"/> <!-- Text 2: y1 2nd -->
    <attr index="13" value="56"/> <!-- Text 2: y2 2nd -->
    <attr index="14" value="64"/> <!-- Text 3: y1 2nd -->
    <attr index="15" value="78"/> <!-- Text 3: y2 2nd -->
  </attributes>
</object>
photographer
That's why the tutorial says 240*320. I dunno what to modify on really old phones (like W800i) or on medium resolution screens.
gani
Do you know a tutorial?
On K810i can I move time and date to the top on the
left side?I don`t understand with which numbers I should replace the originals,
where do you get them,because the time do not moved to the left corner.
Norby
Can you give me the layout of this screen:



Thanks!
edeboi
Norby

Look at Page 1!
There its uploaded !
Norby
No, there are the ORIGINAL layout's.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.