Qtopia Home - Classes - Hierachy - Annotated - Functions - Licenses - Reference

Qtopia Theming

Theming the Phone Edition

The Qtopia Phone Edition has a powerful theming engine, allowing much of the user-interface to be customized and personalized.

In the Qtopia Phone Edition the following may be themed:

The Appearance Settings allows the following to be selected:

The themes presented in the Appearance settings modify one or more of:

The Media player theme is selected independently via the media player settings.

Creating a Theme

To create a well integrated theme it is necessary to implement:

Widget style and icons can help to complete the effect, however since these are far more time consuming to produce it is common to use those provided by an existing theme.

Theme Configuration File

A configuration file in $QPEDIR/etc/themes/ is required to define a theme as follows:

[Theme]
Name = <name of theme (translatable)>
Style = <name of the Style plug-in that handles widget drawing>
WidgetsConfig = <path for the configuration file (for the themed widget style)>
TitleConfig = <path to the title configuration file>
HomeConfig = <path to the home screen configuration file>
ContextConfig = <path to the context bar configuration file>
DialerConfig = <path to the touchscreen dialer configuration file>
CallScreenConfig = <path to the call screen configuration file>
DecorationConfig = <path to the window decoration configuration file>
IconPath = <list of semi-colon separated paths to substitute icons>
WidgetConfig = <base name for widget pixmaps for the default widget style>

For example, the Portal theme is defined by: $QPEDIR/etc/themes/portal.conf:

[Theme]
Name[] = Portal
Style = Qtopia
TitleConfig = portal/title.xml
HomeConfig = portal/home.xml
ContextConfig = portal/context.xml
DialerConfig = portal/dialer.xml
CallScreenConfig = portal/callscreen.xml
DecorationConfig = portal/decorationrc
WidgetConfig = portal/widget

The title, home screen, call screen, dialer and context bar share the same theming format. The window decoration and widget themes have their own formats.

Themed Views

Themed views are defined by XML files which describe a hierachical group of visual and formatting elements. Qtopia interacts with the themed views to display items such as: status information,text and animations. Themed views are used by:

Common Attributes

There are a number of attributes common to many of the elements which affect the placement of elements and their visual appearance. These include:

Naming Elements

The name attribute is available for all elements, however, each element within a type must have a unique name as Qtopia Phone interacts with elements using their name. For a list of Qtopia elements see Known Elements.

Positioning Elements

The rect attribute is available for all elements and positions an element relative to the parent element geometry. It has one of two forms:

  1. x,y,wxh - specifies the top, left corner and the width and height.
  2. x1,y1,x2,y2 - specifies the top, left and bottom, right corners.

If any of the top or left coordinates are negative, they are relative to the right/bottom of the parent element. If bottom or right coordinates are less than or equal to zero, they are relative to the right/bottom of the parent element. This allows a theme to scale.

For example, to place a rect element that scales as the view gets wider:

<rect rect="20,10,-20,50" color="Highlight" brush="Highlight"/>

This places a rectangle, using the Highlight color, at 20,10 with height of 40 pixels and the y2 coordinate 20 pixels from the parent element's right side.

Showing/Hiding Elements

Attributes to show or hide and elements are available to all elements and Qtopia may show or hide elements as appropriate depending upon system state. The elements can be specified by setting the

The active attribute determines if the element will be visible initially and elements which can be transient are listed in the Known Elements section.

Specifying Colors

Colors can be specifed by either their hex color code of the form #RRGGBB, by their Qt QColorGroup color roles:

There are some color roles used mostly for 3D bevel and shadow effects: All of these are normally derived from Background, and used in ways that depend on that relationship. For example, buttons depend on it to make the bevels look good.

Selected (marked) items have two roles:

Finally, there is a special role for text that needs to be drawn where Text or Foreground would provide bad contrast, such as on pressed push buttons:

Alignment

Some elements can be aligned by specifying:

To specify both horizontal and vertical alignment separate the alignment flags by a comma.

Stretching Images

Images and masks can be stretched to support themes that scale to different screen sizes. Stretching specifies a portion of the image that can be duplicated to fill the area between the start and end of the stretched image. The stretching can only be performed in one direction.

This illustration shows that the area bewteen point S1 and S2 is duplicated as necessary when the image is drawn. The stretch points are separated by a comma, e.g. stretch="16,48".

Interactive Elements

In order to allow feedback when elements are pressed on touch screen phones the interactive attribute can be set to "yes". This allows alternative attribute values to be defined when the element (and it's children) is clicked.

For example, the following code changes the graphic and text color when any element in the group is clicked (the group element ensures that clicking on any child affects all children).

<group name="profile" rect="0,0,98x14" interactive="yes" transient="yes" active="no">
    <image name="profile" rect="0,0,98x14" src="profile" onclick="src=profile-pressed;color=Highlight"/>
    <text name="profile" size="10" rect="4,0,90x12" align="hcenter" onclick="color=HighlightedText"/>
</group>

Themed View Elements

page

The top-level element. Specifies the size and shape of the view.

Attribute Description
name The name of the view. Qtopia expects one of title, home or contextbar
base The base directory where the image data can be found relative to $QPEDIR/pics
rect The size of the view. The x and y coordinates are ignored.
mask The mask used to set the widget shape. This is useful for the title and context bar.
stretch The stretch points for the mask.

rect

Draws a rectangle which may be filled.

Attribute Description
active "yes" if this is a transient element.
color The color of the line.
brush The color to fill the interior with.
alpha Add an alpha channel with value in the range 0-255

line

Attribute Description
color The color of the line.

text

Attribute Description
size The font size in points.
color The color of the text.
shadow Paints a shadow under the text to make it more visible when the background is textured. The value is a number in the range 0 - 255.
align The text alignment.
short When set to "yes" Qtopia will supply a short version of the text, for example instead of "3 new messages", only "3" will be set.
outline The color to draw the outline around the text.
format When set to "RichText" the text will be rendered as richtext (Qt HTML subset). When set to "PlainText" the text will be rendered as plain text. If unspecified, the format will be detected automatically based on the presence of html tags.

image

Attribute Description
src The image to be drawn.
color A color to blend with the image. This allows images to be colored to match the selected color scheme.
alpha Add an alpha channel with value in the range 0-255
stretch The stretch points for the image.
orientation The direction to stretch the image.
scale If set to "yes", scale the image to fit the rect. This is an expensive operation and should be used sparingly.

anim

Shows an animation. Animations are costly in CPU and therefore power, so they must be used sparingly and only for transient elements with short active periods. The animation is defined by an image with frames layed out horizontally next to each other.

Attribute Description
src The image containing the frames.
count The number of frame in the image.
width The width of the frames.
loop The frame to loop back to when the last frame is reached.
revloop The frame to loop back to, in reverse order, when the last frame is reached.
delay The delay between frames.

status

Displays an on/off status icon.

Attribute Description
imageon The filename of the image representing the on state.
imageoff The filename of the image representing the off state.
coloron A color to blend with the image in the on state.
coloroff A color to blend with the image in the off state.
alphaon The alpha level of the image in the on state (0-255).
alphaoff The alpha level of the image in the off state (0-255).

level

Displays a level such as battery charge. The different levels are represented by an image with frames layed out horizontally next to each other.

Attribute Description
src The filename of the image containing the frames for the levels.
count The number of levels.
width The width of the frames.

plugin

This is a special element which loads a plug-in to do the drawing. This is currently only used to display custom backgrounds in the home screen.

layout

This element does not do any drawing itself. Its role is to layout its child elements in a horizontal or vertical orientation. The default orientation is vertical. If any of the child elements are shown/hidden then the remaining children will be layed out again.

Attribute Description
orientation The direction to layout the elements ("vertical" or "horizontal").
align Set the alignment of the elements.
spacing The space left between elements.

exclusive

This element will display only one of its children. The children must be transient. The last child that is active will be displayed. All other children will be hidden. This is useful for sharing an area in different states.

group

This element groups it's children into a logical group. It primary role is to propagate mouse button (or stylus) clicks to all children.

input

This is a special purpose element. It is a placeholder for a custom widget in the user interface, such as a text input field, or a list.

listitem

This element is used as a child of the input element to define the appearance of different type of list items.

Known Elements

Qtopia interacts with the view using the element name and type. The names Qtopia supports in the title bar, home screen, and context bar are:

Name Types Description
time text The current time.
date text The current date.
location text The cell location.
caption text The caption set by application, e.g. the application name.
roaming status Set to on when roaming.
messages text, status New unread messages.
call_active status Call(s) are active.
signal level Signal strength.
battery level Battery charge.
inputmethod rect Placeholder for input method indicator.
calls text, status Missed calls.
alarm status An alarm has been set.
lock status Key lock is active.
calldivert status A call diversion is active.
profile text The current ring profile.
infobox text, image Displays various information to the user, e.g. "Searching for Network" Home screen only.
button0 text, image Context button 0
button1 text, image Context button 1
button2 text, image Context button 2
pinbox any type Contains a PIN entry keypad. The children of this element are expected to be interactive buttons similar to the dialer, i.e. one, two ... hash. Home screen on touchscreen phone only.

The Dialer supports the following element names:

Name Types Description
dialernumber input The number input field.
zero Any type - interactive The digit 0.
one Any type - interactive The digit 1.
two Any type - interactive The digit 2.
three Any type - interactive The digit 3.
four Any type - interactive The digit 4.
five Any type - interactive The digit 5.
six Any type - interactive The digit 6.
seven Any type - interactive The digit 7.
eight Any type - interactive The digit 8.
nine Any type - interactive The digit 9.
callhistory Any type - interactive Displays the call history
messages Any type - interactive Creates a new message
selectcontact Any type - interactive Selects a contact
star Any type - interactive The digit *.
hash Any type - interactive The digit #.
hangup Any type - interactive .

The Call Screen supports the following element names:

Name Types Description
callscreen input The list of current calls.
callscreennumber input The number field (for tones).
active listitem The item to use for active calls.
incoming listitem The item to use for incoming calls.
outgoing listitem The item to use for outgoing calls.
onhold listitem The item to use for calls on hold.
dropped listitem The item to use for dropped/ended calls.
selected listitem The item to use for selected calls.
conference status Whether this call is part of a multiparty call,
identifier text Contact name.
status text Call status, e.g. on hold, call duration.
contact image Contact photo.

Theme Cache

To decrease significant loading time of ThemedViews during startup, Qtopia writes out a binary cache file representing each loaded ThemedView the first time a theme is loaded. By default Qtopia will write these cache files into the directory specified by the $HOME environment variable, but you can manually specify the location by adding the following to the qpe.conf configuration file.

[Appearance]
ThemeCacheDir = /your/cache/dir

Window Decorations

A title theme is positioned over the window title of maximised windows. If the window title size and the system title size do not match, some of the applciation window will be obscured, or there will be an empty area at the top of the application. Therefore it is essential that the window decoration metrics match the title theme.

The two window states available are:

In each state the following metrics are supported:

Metric Description
TitleHeight The hight of the title
LeftBorder The width of the left border
RightBorder The width of the right border
TopBorder The height of the top border (above the title)
BottomBorder The height of the bottom border
CornerGrabSize The length of the region in each corner that can be used to resize the window

The following pixmaps may be supplied:

Pixmap Description
TitlePixmap The pixmap to be drawn at the top of the window
OverlayPixmap Drawn over the top of the TitlePixmap. This allows an area of the title to be tinted a different color. An example of this is the highlight colored area in the portal theme.
LeftPixmap The pixmap to be drawn to the left of the window
RightPixmap The pixmap to be drawn to the right of the window
BottomPixmap The pixmap to be drawn at the bottom of the window

For each pixmap the following properties may be set:

Property Description
<Title|Overlay|Left|Right|Bottom>Offsets Specifies the position of the tileable area of the image. For example, "TitleOffsets=16,48" says that the image to be used for the title should place the first 16 pixels at the left, the pixels from 48 on the right, and tile the pixels in between.
<Title|Overlay|Left|Right|Bottom>Color Specifies the color to tint the image. May be a rgb color spec (#FFFFFF) or a Qt palette color name.

The following example illustrates the format of the decoration configuration file:

[Decoration]
Name = Portal
Base = themes/portal

[Maximized]
TitleHeight = 34
TitlePixmap = titlebg_0
TitleOffsets = 87,88

[Normal]
TitleHeight = 19
TitlePixmap = titlebox
TitleOffsets = 8,56
OverlayPixmap = titlebox_overlay
OverlayOffsets = 16,48

Constructing a Theme

This section describes the steps taken to build the Qtopia theme:

The design above contains a title bar,context bar and the home screen. Each of these areas will be considered in the following sections.

System Title Bar

The Qtopia theme is unique in that it has a different mode of display in the home screen versus application screens. The application style screen first followed by the home screen style in the next section.

It is important to note that there is a distinct rectangular area used by the system title bar. This area is not available to applications. It corresponds to the area set aside for the window decoration title of maximized windows. A minimal title bar theme and window decoration configuration may look like:

<page name="title" base="themes/qtopia" rect="0,0,0x21">
    <image rect="0,0,0x21" src="titlebar-gradient" tile="yes" color="Highlight">
    </image>
</page>

This describes a title bar, with no content, using the image "titlebar-gradient" to tile across the screen, tinting it the Highlight color.

[Decoration]
Name = Qtopia
Base = themes/qtopia

[Maximized]
TitleHeight = 21

[Normal]
TitleHeight = 19

This describes the window decoration to use with this theme. The only information required is the height of the window decoration title such that the maximized title height is the same height as the system title.

Basic Title Bar Development

The title bar has a number of elements that require defined positions including:

Other items that can be displayed in the title bar are discussed later in this section. The following example title bar is designed with the above elements only:

<page name="title" base="themes/qtopia" rect="0,0,0x21">
    <image rect="0,0,0x21" src="titlebar-gradient" tile="yes" color="Highlight">
        <text rect="4,0,-50,20" name="caption" size="10" bold="yes" shadow="200" color="HighlightedText" align="left,vcenter" transient="yes"/>
        <rect name="inputmethod" rect="-22,1,22x19" brush="Highlight" color="None" transient="yes" active="no"/>
        <image rect="-100,3,-26,17" src="statusbar" stretch="7,8">
            <status name="roaming" rect="4,3,9x9" imageon="roaming"/>
            <status name="messages" rect="16,3,9x9" imageon="mailalert"/>
            <status name="call_active" rect="28,1,5x12" imageon="incall"/>
            <text name="time" rect="-30,0,-4,12" size="10" align="right,vcenter" color="#000000"/>
        </image>
        <level name="battery" rect="-20,2,6x16" src="battery-small" count="6"/>
        <image rect="-12,2,3x16" src="plusminus"/>
        <level name="signal" rect="-7,2,6x16" src="signal-small" count="6"/>
    </image>
</page>

This places the window caption to the left, then the white status area is created and populated with the status icons, and time field. Finally, the battery and signal level indicators are placed to the right of the screen. The level indicators are described by an image containing a number of frames, given by the count attribute, for example, the battery indicator image is show below:

The inputmethod element is not mentioned above. This element is a placeholder for the input method status icon and is replaced by the IM status icon when the cursor is placed in a text input field. It is common in Qtopia themes to place this element over the area used by the battery and/or signal level indicators to save space.

Extending the Title Bar

The Qtopia theme provides two different modes for the title bar. The mode described above is used in most screens with the home screen however, the following design is used:

This version displays the following elements:

This can be realized using the following:

<page name="title" base="themes/qtopia" rect="0,0,0x21">
    <image rect="0,0,0x21" src="titlebar-gradient" tile="yes" color="Highlight">
        <level name="battery" rect="4,4,44x11" src="battery-big" count="6"/>
        <level name="signal" rect="-48,4,44x11" src="signal-big" count="6"/>
        <rect name="inputmethod" rect="-48,0,44x0" brush="Highlight" color="None" transient="yes" active="no"/>
        <image rect="50,3,-51,17" src="statusbar" stretch="7,8">
            <status name="alarm" rect="3,3,9x9" imageon="bell_on"/>
            <status name="lock" rect="14,3,9x9" imageon="lock_on"/>
            <status name="calldivert" rect="25,3,9x9" imageon="calldivert"/>
            <status name="roaming" rect="-36,3,9x9" imageon="roaming"/>
            <status name="messages" rect="-25,3,9x9" imageon="mailalert"/>
            <status name="call_active" rect="-14,1,5x12" imageon="incall"/>
        </image>
    </image>
</page>

The final task is to enable switching between the two modes. This is achieved using the exclusive element. The exclusive element will display only one of its children at a time. The caption is used to decide which state is shown since there is no caption in the home screen.

<page name="title" base="themes/qtopia" rect="0,0,0x21">
    <image rect="0,0,0x21" src="titlebar-gradient" tile="yes" color="Highlight">
        <image rect="0,0,1x21" src="titlebar-endcap" color="Highlight"/>
        <image rect="-1,0,1x21" src="titlebar-endcap" color="Highlight"/>
        <exclusive>
            <group>
                <level name="battery" rect="4,4,44x11" src="battery-big" count="6"/>
                <level name="signal" rect="-48,4,44x11" src="signal-big" count="6"/>
                <rect name="inputmethod" rect="-48,0,44x0" brush="Highlight" color="None" transient="yes" active="no"/>
                <image rect="50,3,-51,17" src="statusbar" stretch="7,8">
                    <status name="alarm" rect="3,3,9x9" imageon="bell_on"/>
                    <status name="lock" rect="14,3,9x9" imageon="lock_on"/>
                    <status name="calldivert" rect="25,3,9x9" imageon="calldivert"/>
                    <status name="roaming" rect="-36,3,9x9" imageon="roaming"/>
                    <status name="messages" rect="-25,3,9x9" imageon="mailalert"/>
                    <status name="call_active" rect="-14,1,5x12" imageon="incall"/>
                </image>
            </group>
            <group name="caption" transient="yes" active="no">
                <text rect="4,0,-50,20" name="caption" size="10" bold="yes" shadow="200" color="HighlightedText" align="left,vcenter" transient="yes"/>
                <rect name="inputmethod" rect="-22,1,22x19" brush="Highlight" color="None" transient="yes" active="no"/>
                <image rect="-100,3,-26,17" src="statusbar" stretch="7,8">
                    <status name="roaming" rect="4,3,9x9" imageon="roaming"/>
                    <status name="messages" rect="16,3,9x9" imageon="mailalert"/>
                    <status name="call_active" rect="28,1,5x12" imageon="incall"/>
                    <text name="time" rect="-30,0,-4,12" size="10" align="right,vcenter" color="#000000"/>
                </image>
                <level name="battery" rect="-20,2,6x16" src="battery-small" count="6"/>
                <image rect="-12,2,3x16" src="plusminus"/>
                <level name="signal" rect="-7,2,6x16" src="signal-small" count="6"/>
            </group>
        </exclusive>
    </image>
</page>

Context Bar

The context bar is a rectangular area at the bottom of the screen. It usually contains three buttons corresponding to context buttons on the keypad. The context bar displays either text or icons, so it is necessary to provide elements to deal with both possibilities. The Qtopia theme context bar definitition is shown below:

<page name="contextbar" base="themes/qtopia" rect="0,0,0x20">
    <image rect="0,0,0x20" color="Button" src="contextbar-stretch" tile="yes"/>
    <image rect="0,0,1x20" color="Button" src="contextbar-capleft"/>
    <image rect="-1,0,1x20" color="Button" src="contextbar-capright"/>
    <layout stretch="yes">
        <image name="button0" rect="0,2,0x16" interactive="yes"/>
        <group>
            <image name="button1" rect="0,2,0x16" interactive="yes"/>
            <image rect="-1,0,1x20" src="contextbar-divider" color="Button"/>
            <image rect="0,0,1x20" src="contextbar-divider" color="Button"/>
        </group>
        <image name="button2" rect="0,2,0x16" interactive="yes"/>
    </layout>
    <layout stretch="yes">
        <text name="button0" rect="0,2,0x16" size="12" bold="yes" align="hcenter" interactive="yes"/>
        <text name="button1" rect="0,2,0x16" size="12" bold="yes" align="hcenter" interactive="yes"/>
        <text name="button2" rect="0,2,0x16" size="12" bold="yes" align="hcenter" interactive="yes"/>
    </layout>
</page>

The first few lines display the context bar background. The first layout lays out the icon buttons. Note the group element used to display the divider lines at the ends of the center button. Finally, the text labels are specified.

This basic design is used by most context bars.

Home Screen

The home screen displays commonly accessed information such as:

The Qtopia theme displays the status indicators in the title bar when the home screen is visible, so it is not necessary to define them in the home screen. The following code defines the home screen for the Qtopia theme, with the exception of the PIN entry pad:

<page name="home" base="themes/qtopia">
    <group name="background">
        <image name="background" rect="0,-235,0,0" src="background" color="Highlight" tile="yes"/>
        <plugin name="bgplugin"/>
    </group>
    <rect rect="0,21,0x21" brush="#eeeeee" alpha="192">
        <text name="operator" size="14" align="vcenter" bold="yes" outline="#eeeeee"/>
    </rect>
    <text name="time" rect="-48,21,45x21" align="right,vcenter" size="14" bold="yes" outline="#eeeeee"/>
    <layout rect="0,45,0x90" align="hcenter">
        <rect name="calls" rect="0,0,78x0" color="None" brush="None" transient="yes" active="no">
            <image rect="18,1,46x46" src="call" scale="yes"/>
            <text name="calls" size="12" rect="6,43,70x35" align="hcenter" format="RichText" outline="#eeeeee"/>
        </rect>
        <rect name="messages" rect="0,0,78x0" color="None" brush="None" transient="yes" active="no">
            <image rect="19,4,38x38" src="message" scale="yes"/>
            <text name="messages" size="12" rect="6,43,70x35" align="hcenter" format="RichText" outline="#eeeeee"/>
        </rect>
    </layout>
    <image name="dialer" rect="58,123,-57,-33" src="default/dialerbutton" onclick="src=default/dialerbuttonp;color=Highlight" interactive="yes" keypad="no" scale="yes"/>
    <text name="profile" size="12" rect="-80,-36,78x14" color="#000000" align="right" outline="#eeeeee" transient="yes" active="no"/>
    <rect name="infobox" rect="0,-70,0x50" color="#72715a" brush="Base" alpha="208" transient="yes" active="no">
        <image name="infobox" rect="0,0,40x40"/>
        <text name="infobox" rect="40,0,-3,50" size="12" color="Text" align="hcenter,vcenter"/>
    </rect>
</page>

The background group specifies both a default background image and also allows a plug-in to be used to display the background. The background plug-in built into Qtopia displays the user-selected background image.

The calls and messages notifications are declared transient so that they will not appear unless there is actually missed calls or new messages. This leaves as little clutter as possible on the home screen, which in turn leaves more of the user's chosen background image visible.

To simplify the code above, the PIN entry pad has been omitted. An example of this is shown below.

    <layout name="pinbox" rect="0,21,0,0" orientation="vertical" transient="yes" active="no">
        <rect name="pinbox" rect="0,0,0,40" color="#72715a" brush="Base">
            <image name="pinbox" rect="0,0,40x40"/>
            <text name="pinbox" rect="40,0,-3,50" size="12" color="Text" align="hcenter,vcenter"/>
        </rect>
        <layout name="vertical" rect="22,0,132x132" orientation="vertical" spacing="-1" align="hcenter">
            <layout name="horizontal" rect="0,0,0x33" orientation="horizontal" spacing="-1" align="hcenter">
                <group rect="0,0,44x33" name="one" interactive="yes">
                    <image rect="0,0,0,0" name="one_bg" src="default/r1" onclick="src=default/r1p" scale="yes" />
                    <image rect="5,6,-5,-5" name="one_fg" src="default/1" scale="yes"/>
                </group>
                <group rect="0,0,44x33" name="two" interactive="yes">
                    <image rect="0,0,0,0" name="two_bg" src="default/r1" onclick="src=default/r1p" scale="yes" />
                    <image rect="5,6,-5,-5" name="two_fg" src="default/2" scale="yes"/>
                </group>
                <group rect="0,0,44x33" name="three" interactive="yes">
                    <image rect="0,0,0,0" name="three_bg" src="default/r1" onclick="src=default/r1p" scale="yes" />
                    <image rect="5,6,-5,-5" name="three_fg" src="default/3" scale="yes"/>
                </group>
            </layout>
            <layout rect="0,0,0x33" orientation="horizontal" spacing="-1" align="hcenter">
                <group rect="0,0,44x33" name="four" interactive="yes">
                    <image rect="0,0,0,0" name="four_bg" src="default/r2" onclick="src=default/r2p" scale="yes" />
                    <image rect="5,6,-5,-5" name="four_fg" src="default/4" scale="yes"/>
                </group>
                <group rect="0,0,44x33" name="five" interactive="yes">
                    <image rect="0,0,0,0" name="five_bg" src="default/r2" onclick="src=default/r2p" scale="yes" />
                    <image rect="5,6,-5,-5" name="five_fg" src="default/5" scale="yes"/>
                </group>
                <group rect="0,0,44x33" name="six" interactive="yes">
                    <image rect="0,0,0,0" name="six_bg" src="default/r2" onclick="src=default/r2p" scale="yes" />
                    <image rect="5,6,-5,-5" name="six_fg" src="default/6" scale="yes"/>
                </group>
            </layout>
            <layout rect="0,0,0x33" orientation="horizontal" spacing="-1" align="hcenter">
                <group rect="0,0,44x33" name="seven" interactive="yes">
                    <image rect="0,0,0,0" name="seven_bg" src="default/r3" onclick="src=default/r3p" scale="yes" />
                    <image rect="5,6,-5,-5" name="seven_fg" src="default/7" scale="yes"/>
                </group>
                <group rect="0,0,44x33" name="eight" interactive="yes">
                    <image rect="0,0,0,0" name="eight_bg" src="default/r3" onclick="src=default/r3p" scale="yes" />
                    <image rect="5,6,-5,-5" name="eight_fg" src="default/8" scale="yes"/>
                </group>
                <group rect="0,0,44x33" name="nine" interactive="yes">
                    <image rect="0,0,0,0" name="nine_bg" src="default/r3" onclick="src=default/r3p" scale="yes" />
                    <image rect="5,6,-5,-5" name="nine_fg" src="default/9" scale="yes"/>
                </group>
            </layout>
            <layout rect="0,0,0x33" orientation="horizontal" spacing="-1" align="hcenter">
                <group rect="0,0,44x33" name="star" interactive="yes">
                    <image rect="0,0,0,0" name="star_bg" src="default/r4" onclick="src=default/r4p" scale="yes" />
                    <image rect="5,6,-5,-5" name="star_fg" src="default/star" scale="yes"/>
                </group>
                <group rect="0,0,44x33" name="zero" interactive="yes">
                    <image rect="0,0,0,0" name="zero_bg" src="default/r4" onclick="src=default/r4p" scale="yes" />
                    <image rect="5,6,-5,-5" name="zero_fg" src="default/0" scale="yes"/>
                </group>
                <group rect="0,0,44x33" name="hash" interactive="yes">
                    <image rect="0,0,0,0" name="hash_bg" src="default/r4" onclick="src=default/r4p" scale="yes" />
                    <image rect="5,6,-5,-5" name="hash_fg" src="default/hash" scale="yes"/>
                </group>
            </layout>
        </layout>
    </layout>

Call Screen

<page name="callscreen" base="themes/default">
    <rect color="None" brush="Background"/>
    <image name="background" src="callscreen_bg" tile="yes" color="Background"/>
    <input name="callscreen" rect="0,0,0x32768" separator="1">
        <listitem name="active" rect="0,0,0,32"> 
            <image name="active_bg" rect="0,0,0,0" tile="yes" src="callitem_bg"  color="#50D914"/>
            <status name="conference" rect="0,0,16x16" imageon="conference"/>
            <text name="identifier" rect="16,0,0,0" bold="yes"/>
            <text name="status" rect="16,13,0,0"/>
            <image name="contact" rect="-24,0,24x30" scale="yes"/>
        </listitem>
        <listitem name="incoming" rect="0,0,0,32" >
            <image name="incoming_bg" rect="0,0,0,0" tile="yes" src="callitem_bg"  color="Base" />
            <text name="identifier" rect="16,0,0,0" bold="yes"/>
            <text name="status" rect="16,13,0,0"/>
            <image name="contact" rect="-24,0,24x30"/>
        </listitem>
        <listitem name="outgoing" rect="0,0,0,32">
            <image name="outgoing_bg" rect="0,0,0,0" tile="yes" src="callitem_bg"  color="Background" />
            <text name="identifier" rect="16,0,0,0" bold="yes"/>
            <text name="status" rect="16,13,0,0"/>
            <image name="contact" rect="-24,0,24x30"/>
        </listitem>
        <listitem name="onhold" rect="0,0,0,32">
            <image name="onhold_bg" rect="0,0,0,0" tile="yes" src="callitem_bg"  color="#A3A10E" />
            <status name="conference" rect="0,0,16x16" imageon="conference"/>
            <text name="identifier" rect="16,0,0,0" bold="yes"/>
            <text name="status" rect="16,13,0,0"/>
            <image name="contact" rect="-24,0,24x30"/>
        </listitem>
        <listitem name="dropped" rect="0,0,0,32">
            <image name="dropped_bg" rect="0,0,0,0" tile="yes" src="callitem_bg"  color="#AA2222" />
            <text name="identifier" rect="16,0,0,0" bold="yes"/>
            <text name="status" rect="16,13,0,0"/>
            <image name="contact" rect="-24,0,24x30"/>
        </listitem>
        <listitem name="selected" rect="0,0,0,32">
            <image name="selected_bg" rect="0,0,0,0" tile="yes" src="callitem_bg"  color="Highlight" />
            <status name="conference" rect="0,0,16x16" imageon="conference"/>
            <text name="identifier" rect="16,0,0,0" bold="yes" color="HighlightedText"/>
            <text name="status" rect="16,13,0,0" color="HighlightedText"/>
            <image name="contact" rect="-24,0,24x30"/>
        </listitem>
    </input>
    <input name="callscreennumber" rect="0,0,0x32768" bold="yes" color="Text" size="14"/>
</page>


Copyright © 2005 Trolltech Trademarks
Qtopia version 2.2.0