Using Bottom Toolbar

The Toolbar at the bottom of the screen offers a convenient way to navigate within the application with easily implementable buttons, tabs and menus. It reacts automatically to device rotation events, and can be configured to be persistent throughout all application views, or change the available Toolbar items depending on which application view the user is in at the moment.

The Bottom Toolbar can contain up to five items. Items with a specific function have a pre-defined location. For example, a back button is always the leftmost item.

When designing applications that do not require use of the Bottom Toolbar, you can remove it from view by setting its visibility to false in the ToolBarLayout

ToolBarLayout { visible: false }

Toolbar example

The following example describes how to create a back button, two tabs, and a dropdown menu in the Bottom Toolbar:

import QtQuick 1.1
import com.nokia.meego 1.1

PageStackWindow {
   ToolBarLayout {
       id: myToolBar
       ToolIcon { iconId: "toolbar-back"; onClicked: { myMenu.close(); pageStack.pop(); } }
       ButtonRow {
           platformStyle: TabButtonStyle {}
           TabButton {
               text: "First tab"
               tab: tab1
           }
           TabButton {
               text: "Second tab"
               tab: tab2
           }
       ToolIcon { iconId: "toolbar-view-menu"; onClicked: (myMenu.status == DialogStatus.Closed) ? myMenu.open() : myMenu.close() }
   }

   TabGroup {
   id: myTabGroup
   currentTab: tab1

       Page {
           id: tab1
           // contents of the page when the first tab is selected
       }
       Page {
           id: tab2
           // contents of the page when the second tab is selected
       }
   }

   Menu {
       id: myMenu
       onStatusChanged: {
           if (status === DialogStatus.Closing) {
               screen.allowSwipe = enableSwipe;
           }
       }
       MenuLayout {
           MenuItem {
               text: "First menu option";
               onClicked: //do something
           }
           MenuItem {
               text: "Second menu option";
               onClicked: //do something
           }
       }
   }
}

For more information on using the bottom Toolbar, see N9 Application Toolbar Development Guidelines at Nokia Developer site.