Please Log In or Register - it's FREE!

23 Pages V  « < 21 22 23  
Reply to this topicStart new topic
 Tutorial: Creating XML homescreens
Rating 5 V
Jayden0606
post Jan 2 2008, 10:46
Post #441


Newbie
Group Icon

Group: Posters
Posts: 14
Joined: 30th December 2007
Member No.: 338,911

Device(s): iPhone & BJ II



P.S. I like it the way Windows Basic is, without the lines going across.

I would like the Date to be on the left side and time on the right, in smaller font.

The AT&T, if possible to say: Jayden 6.20.6




Thanks again.


This post has been edited by Jayden0606: Jan 2 2008, 10:52
Go to the top of the page
 
+Quote Post
Mikew07
post Jan 2 2008, 14:23
Post #442


Newbie
Group Icon

Group: Posters
Posts: 15
Joined: 9th November 2006
Member No.: 213,571

Device(s): Motorola Mpx220



QUOTE(Jayden0606 @ Jan 2 2008, 05:46) *
P.S. I like it the way Windows Basic is, without the lines going across.

I would like the Date to be on the left side and time on the right, in smaller font.

The AT&T, if possible to say: Jayden 6.20.6
Thanks again.


This might be very stupid, however; the first time I tried to make one I forgot to save it as whatever.xml.
Go to the top of the page
 
+Quote Post
Jayden0606
post Jan 2 2008, 21:16
Post #443


Newbie
Group Icon

Group: Posters
Posts: 14
Joined: 30th December 2007
Member No.: 338,911

Device(s): iPhone & BJ II



QUOTE(Mikew07 @ Jan 2 2008, 09:23) *
This might be very stupid, however; the first time I tried to make one I forgot to save it as whatever.xml.



Trust me, it's not stupid, I work for AT&T and see stupid things all the time... "Maam is the phone on?" and she replies, "Oh you're right, that was the problem."


Yeah, I save it with the same extension and that's the main reason I also copied the one that was in my BJ, to ensure it wasn't just me. The Windows simple that I copied, doesn't show up either.


Help!
Go to the top of the page
 
+Quote Post
Buttered Toast
post Jan 8 2008, 02:43
Post #444


Newbie
Group Icon

Group: Posters
Posts: 39
Joined: 5th January 2008
From: New Jersey, United States
Member No.: 341,147

Device(s): BlackJack



Hi Everyone!

My first attempt at a basic design; is attached below;the photoshop design portion.

Comments or concerns would be wonderful! biggrin.gif

-Colin.


This post has been edited by colin d: Jan 8 2008, 02:48
Attached File(s)
Attached File  CJDhome1.jpg ( 7.45K ) Number of downloads: 5
 


--------------------

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

:: Colin's Graphic Database ::
Avatars | Templates | (2008) (2007) (2006) Signatures | Logos | Skins | Other |

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Colin | Buttered Toast
Buttered_Toast313@Hotmail.com | AIM :: The Reel Colin
West Windsor - Plainsboro, New Jersey 08550, USA

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Phone :: Samsung BlackJack I

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Get paid real money for traveling with NAVIZON ... Click HERE !
Go to the top of the page
 
+Quote Post
TallLefty24
post Jan 20 2008, 03:16
Post #445


Newbie
Group Icon

Group: Posters
Posts: 2
Joined: 19th January 2008
Member No.: 346,545

Device(s): Blackjack II



Ok, so I've tried this XML coding thing, and no dice for me wink.gif I know exactly what I want, but I can't seem to get it to do it! lol. Here is what I want my home screen to look like:



Whenever selected, I would like the text's background to turn white and the text to turn red. Also, I would like the voicemail to only appear when I have voicemail. Finally, if missed calls could pop up underneath the messages plugin whenever I have one.

I'll attach the background image if it will help. Any help would be GREAT!


This post has been edited by TallLefty24: Jan 20 2008, 03:19
Attached File(s)
Attached File  Cardinals.jpg ( 56.81K ) Number of downloads: 1
 
Go to the top of the page
 
+Quote Post
Indu
post Mar 5 2008, 08:07
Post #446


Newbie
Group Icon

Group: Posters
Posts: 1
Joined: 5th March 2008
Member No.: 363,977



QUOTE(w411y @ Dec 17 2005, 13:15) *
Final of X factor is on tonight so though I'd do something constructive. This is basically what goes through my head when making an xml and I hope it encourages other people to produce and share their homescreens with us. So here goes...

Example of Homescreen making
Firstly Ill show you how to make this homescreen....


Its a simple little homescreen but I just want to show the just of compiling an xml file.
>>Beginning
Firstly, you must have an idea of what the outcome is going to look like and what plugins your going to include. So I sat there and thought to myself "I'm going to create a homescreen with a nice cartoony Santa at the bottom surrounded by snow and maybe implement a tree and presents. Ill keep this homescreen neat n simple so Ill only use the Messaging plugin, Profile plugin and Date/Time/Carrier plugin."

>>Plugins
Before I continue Ill briefly explain what a plugin is. To me, a plugin is basically a layer in the screen that when scrolled down/up onto the layer using the joystick, you can click and open it up(scrolling onto the Messaging plugin and clicking it will open up Messaging).

Some layers (eg// Date/Time/Carier plugin) cannot be selected and when scrolling through the plugins using the joystick you will skip this layer(ie... if from top to bottom you have the Message plugin, the Date/Time/Carrier plugin and then at the bottom the Profile plugin and you press down on your joystick when on the Message plugin, it will not go down and select the Date/Time/carrier plugin but skip it and select the profile plugin.)

Heres an image to understand the plugin layers in the skin were going to create...

Each plugin is specific to what it can display (eg// the Profile plugin will display what profile you are currently using. The Date/Time/Carrier plugin can display the current date and time and the network you are on.)

>>Creating Background
I tend to create the image (using photoshop) before the xml so I can fit the words onto the background image but others may create the xml and then create an image that fits around the words. Anyway heres the background image I created for this homescreen....

Oh by the way, the background image will be 240x295pixels (as 25 pixels get taken up by the soft keys)

>>Starting the XML

Every XML begins with...
CODE
<?xml version="1.0"?>
<home>

The version if its firstly created will be 1.0 .. if you update the homescreen then you can change it to 1.1 or whatever.
Once we have added all the colour scheme and xml codes we will close the xml with

Next we add the Author, Contact, Title and Version...
CODE
<author>w411y</author>
    <contacturl>w411y@hotmail.com</contacturl>
    <title>w411y-X-mas</title>
    <version>1.0</version>


Inside the author tag will be your name(obviously)
The contact URL can be a site or email address so that people can get hold of you with any feedback etc
The title is what wil be displayed when you selecting the homescreen on your phone in Start-> Settings-> Homescreen
Why is the version there again? Well I couldn't tell you is my simple answer!

Anywho we then add the default settings...
CODE
<default target-width="240" target-height="320" font-face="nina" font-size="19" font-weight="bold" padding-left="5" padding-right="5" bgcolor="transparent" fgcolor="COLOR_HOMETEXT" padding-top="3" b-border-color="COLOR_HOMERULE" b-border-width="1">
    <format state="selected" fgcolor="FFFFFF"/>
    </default>


These are the default settings for evything in your homescreen. So for example, in the Messaging Plugin, if you do not say what size font to use it will be 19.

Then we say what background image to use...
CODE
<background bgimage="Xmas.jpg" valign="top"/>


If the background image is in the same folder as the XML then theres no need to specify its pathfile. But if for example the XML is in storage/application data/home and the background image is in a folder called xmas in the home folder then your code becomes...
CODE
<background bgimage="Storage\Apllication Data\Home\xmas\Xmas.jpg" valign="top"/>


valign stands for vertical alignment. So the image is pushed to the top of the screen and as our background image is 240x295pixels it will fill the screen.

>>Colour Scheme

We then introduce a colour scheme. Well I'm simply going to show you an example of a colour scheme and show you what each stands for.

CODE
        <scheme>
<color name="COLOR_WINDOW" value="#FFFFFF" />
<color name="COLOR_WINDOWTEXT" value="#000000" />
<color name="COLOR_STATIC" value="#FFFFFF" />
<color name="COLOR_STATICTEXT" value="#000000" />
<color name="COLOR_HIGHLIGHT" value="#e80000" />
<color name="COLOR_HIGHLIGHTTEXT" value="#FFFFFF" />
<color name="COLOR_TEXTSELECT" value="#FFFFFF" />
<color name="COLOR_MENU" value="#FFFFFF" />
<color name="COLOR_MENUTEXT" value="#000000" />
<color name="COLOR_GRAYTEXT" value="#CCCCCC" />
<color name="COLOR_GRADLEFT" value="#FFFFFF" />
<color name="COLOR_GRADRIGHT" value="#FFFFFF" />
<color name="COLOR_INTGRADLEFT" value="#FFFFFF" />
<color name="COLOR_INTGRADRIGHT" value="#FFFFFF" />
<color name="COLOR_TRAYGRADLEFT" value="#e80000" />
<color name="COLOR_TRAYGRADRIGHT" value="#e80000" />
<color name="COLOR_HIGHGRADLEFT" value="#e80000" />
<color name="COLOR_HIGHGRADRIGHT" value="#e80000" />
<color name="COLOR_TRAYTEXT" value="#000000" />
<color name="COLOR_WINDOWFRAME" value="#000000" />
<color name="COLOR_BTNFACE" value="#e80000" />
<color name="COLOR_BTNTEXT" value="#000000" />
<color name="COLOR_SCROLLBAR" value="#e80000" />
<color name="COLOR_HOMETEXT" value="#000000" />
<color name="COLOR_HOMEHIGHLIGHT" value="#e80000" />
<color name="COLOR_HOMEHIGHLIGHTTEXT" value="#000000" />
<color name="COLOR_HOMERULE" value="#C54E0C" />
<color name="COLOR_alertWINDOW" value="#FFFFFF" />
<color name="COLOR_alertTITLE" value="#444444" />
<color name="COLOR_alertRULE" value="#000000" />
</scheme>


The colours are Hex colours. If you have Adobe Photoshop then the code for any colour can easily be found out. If not then there are plenty of sites that can help you. Just make a Google for Hex colour codes.
Anywho, heres what each stands for...

COLOR_WINDOW
Background color for all application windows and controls, including the transparent portions of the scroll bar stripes.
COLOR_WINDOWTEXT
Text color for list views, controls, and labels. Does not set menu text color, soft key text color, or button text color.
COLOR_STATIC
Background color for static controls, such as labels. Also sets the background color for message boxes.
COLOR_STATICTEXT
Text color for static controls such as labels.
COLOR_HIGHLIGHT
Color of selection for list views, controls, menus, and soft key buttons.
COLOR_HIGHLIGHTTEXT
Color of text when an item has selection, such as a list view element or a control, and highlighted soft keys.
COLOR_MENU
Background color for menus.
COLOR_MENUTEXT
Text color for menu items.
COLOR_GRAYTEXT
Color for disabled text, such as disabled menu items and soft key buttons.
COLOR_GRADLEFT
Starting color value for the background gradient.
COLOR_GRADRIGHT
Ending color value for the background gradient.
COLOR_INTGRADLEFT
Starting color value for the secondary background gradient.
COLOR_INTGRADRIGHT
Ending color value for the secondary background gradient.
COLOR_HIGHGRADLEFT
Gradient highlights are not supported. COLOR_HIGHGRADLEFT and COLOR_HIGHGRADRIGHT must be set to the same value.
COLOR_HIGHGRADRIGHT
Gradient highlights are not supported. COLOR_HIGHGRADLEFT and COLOR_HIGHGRADRIGHT must be set to the same value.
COLOR_TRAYGRADLEFT
Starting color value for the title bar gradient.
COLOR_TRAYGRADRIGHT
Ending color value for the title bar gradient.
COLOR_TRAYTEXT
Color for the title bar text.
COLOR_WINDOWFRAME
Color of the dividing line between the main window and the soft key region, and the bounding rectangle around the scroll bar thumb.
COLOR_BTNFACE
Unselected background color for the soft key region.
COLOR_BTNTEXT
Unselected text color for the soft key region, navigation glyph and scroll bar thumb.
COLOR_SCROLLBAR
Color of the stripes on the scroll bar.
COLOR_alertTITLE
Color of the title text in an alert.
COLOR_alertWINDOW
Background color for alerts.
COLOR_alertRULE
Color of the dividing lines on the Home screen.
COLOR_HOMERULE
Color of unselected text on the Home screen.
COLOR_HOMEHIGHLIGHTTEXT
Color of selected text on the Home screen.
COLOR_HOMEHIGHLIGHT
Background color of a selected plug-in on the Home screen.

I do not like creating a new scheme for each of my screens so I use the one shown above and just change the red #e80000 to the colour of my new homescreen.

>>Adding whats displayed

Now we begin adding whats going to be displayed.
I start my homescreens with the Iconbar. Why? Because Im used to seeings it there and it displays the essentials like battery, signal strength, bluetooth, gprs etc etc...
So heres the code ...
CODE
        
<!-- Iconbar -->

<plugin clsid="{837FC251-FE69-43ad-84E0-EBCEDEBA0884}" name="Iconbar" height="0">
        <background b-border-width="0">
        </background>
    <iconbar bgcolor="transparent" fgcolor="#ffffff" y="0" x="0"/>
    </plugin>



Every plugin has its own clsid. I cant really explain what this is because I basically dont know !! But I think its just a way the phone identifies the plugin.
The height is usually how much pixels in height the plugin/layer is but in the iconbars case it takes up 25 by default so setting it to 0 basically means 25.
The bgcolor is transparent so we can see the image behind the plugin. If for example it was #000000 then the background of that plugin would be black
fgcolor being #ffffff means that the things displayed (signal meter, battery meter etc) will be white.
Plugins use x and y co-ordinates to place labels but this plugin is a pants one to explain how they work.


Onto the Message Plug-in....
CODE
        <!-- SMS/MMS/Email Plugin -->

    <plugin clsid="{2F930BF0-6FE9-4a53-9E17-88E9247BAB48}" name="SMScount" height="65">
    <background b-border-width="0">
    </background>
    <label y="20" x="50" halign="left" bgcolor="transparent" fgcolor="#ffffff" font-size="18">
    <format state="unselected" font-weight="normal" />
    <format state="selected" font-weight="bold" />
    <text>SMS: <unreadSMS />  MMS: <unreadMMS /></text>
    </label>
        </plugin>


Before I continue, anything between does not get read and is used to help keep the xml tidy so you can see where everything is.
Again you can see the plugin clsid and its name. You also see the height as 65. This is how tall the layer is in pixels (remembering the QVGA is 320pixels in height) Anything to do with this plugin (ie SMS count MMS count etc) can only be dislayed within these 65 pixels.
the y co-ordinate (20) is how many pixels down from the top of the plugin that the text is displayed. If for example the y co-ord was 70 (which is bigger than the plugin height of 65) then the text would not be seen.
The x co-ord is how many pixels from the left side of the screen the text is displayed.
halign stands for horizontal alignment. fgcolor is the colour that the text is and font size is pretty obvious. If you do not put in the font size, then it will be the size of the default font size you put in the default settings at the start of the xml.
The formatstate tags basically make the text bold when you scroll onto the layer so you know what your clicking on. You could also try changing the font colour when you scroll onto it or even the font size. Possibly a different background.
You can then add your own prefix (I chose SMS: and MMS:) and then the and will display any new messages you have.

Now the profile plugin ...
CODE
        <!-- Profile Plugin -->

    <plugin clsid="{95976968-45D5-40c9-9779-2B859B1C2FEC}" name="Profile" height="70" >
        <background b-border-width="0">
    </background>
    <label x="50" y="5" halign="left" bgcolor="transparent" fgcolor="#ffffff" font-size="18">
    <format state="unselected"  font-weight="normal" />
    <format state="selected" font-weight="bold"/>
    <text>Profile: <profile/></text>
    </label>
    </plugin>

Same principles apply to this as the Messaging plugin

Now the date, time and the carrier....
CODE
        <!-- Date/Time/Carrier Plugin -->

        <plugin file="sysplug.dll" clsid="{E09043DF-510E-4841-B652-388316977A7A}" height="90">
        <background b-border-width="0">
    </background>
    <clock>
        <time font-weight="bold" font-size="30" bgtext="transparent" halign="left" fgcolor="#e80000" mode="24" y="35" x="135" />
<date font-weight="normal" fgcolor="#e80000" font-size="17" valign="top" halign="left" mode="long" y="70" x="135" />
    </clock>
    </plugin>


Nothing much new here except the mode on the date and time
For the time you can choose 12 and 24 for 12 hour and 24 hour obviously.
For the date you can select short or long which will be dd/mm/yyyy or 17th June 2004.

And we end the xml with... dum dum dum...
CODE
</home>

And thats it! Now when your saving make sure your not saving it as a text file. So change text document(*.txt) to All Files in the dropdown and name your homescreen *.home.xml . In this example it is w411y - Xmas.home.xml .

Then copy the xml and the background image into the following folder on your phone ...
Storage\Application Data\Home
Press Start -> Settings -> Homescreen and chose your screen (ensurign the colour scheme and background image is set to default)


And thats it !! Please correct any stupid comments I've made and feel free to add any tips tricks and info. I was hoping to start a thread where people can ask and find the answers to problems theyre having in making their own homescreens or editing homescreens.

Well good luck, hope I helped a lil


Hi,

Can you please explain me how to modify a homescreen plug-in?Say, I want to add new topics to the Getting Started Plugin.Can you tell me how to do that?

Thanks in advance,
Regards,
Indu.M
Go to the top of the page
 
+Quote Post
trissphone
post May 9 2008, 21:04
Post #447


Newbie
Group Icon

Group: Posters
Posts: 1
Joined: 9th May 2008
Member No.: 386,790



ok this may have been covered but i did not see it
i want to know if anyone knows how to make a home screen picture fit like the default on the moto q
all other pictures leave a white (or colored ) space at the top. i was playing with leaving off the
bar with power and such. the default covers the whole screen whereas the rest leave this line
anyone know how to fix this?
Go to the top of the page
 
+Quote Post

23 Pages V  « < 21 22 23
Reply to this topicStart new topic

Collapse

Similar Topics

  Topic Replies Topic Starter Views Last Action
No new QVGA "PAH Vista" Portrait/Landscape Multi-Homescreens (TWO versions)
16 paholman 8,456 8th June 2008 - 22:25
Last post by: fido92
No new Opera Mini 4.1: FULL multiplatform tutorial & review
14 Menneisyys 6,630 26th May 2008 - 07:22
Last post by: JZ SmartMort
No New Posts Homescreens / profile switching
5 Aero 458 4th June 2008 - 17:44
Last post by: shootydogthing
No New Posts mobile application tutorial
6 bontalai 1,061 19th June 2008 - 09:04
Last post by: Paul (MVP)
No New Posts TUTORIAL & REVIEW: free, EXCELLENT theme editor tool, ThemeGenCE
0 Menneisyys 375 18th June 2008 - 12:27
Last post by: Menneisyys
No New Posts Topic has attachmentsHelp me with my XML plz! (Screen shots & XML included)
trying to be as detailed as possible
4 T1tan 475 3rd July 2008 - 03:19
Last post by: Smokey J Bluntz

2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 


RSS hit counter Lo-Fi Version Time is now: 6th July 2008 - 23:10


Please visit our 'Plus Partners' - these companies support MoDaCo through 'MoDaCo Plus' - Click Here for more details!

VITO Technology | Slipstream Solutions | Aiko Solutions | PDAMill | Inesoft | SBSH | LingvoSoft | Ruttensoft | Astraware | MadBeetle | Sprite Software

Opera | Westtek | TetraEdge | Z4Soft | KBM Systems | Conduits | Mini Lyrics Magic | Proporta | Semsons | SyncData | Active Kitten | Binaryfish | Textr

SPB Software House | Omega One | OmniSoft | Resco | eSoft Interactive | TenGo | ATEKsoft | imei-check | GpsGate | SplashData | DeveloperOne | monocube

WebIS, home of Pocket Informant, FlexMail and Note2Self

Would your company like to become a 'Plus Partner'? Click Here to contact us!