Home · All Namespaces · All Classes · Grouped Classes · Modules · Functions

Tutorial: Context Bar Theme

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 Qt Extended theme context bar definition 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 and finally the text labels are specified.

Note: the group element used to display the divider lines at the ends of the center button.

This basic design is used by most context bars.