Skip to content

Toolbars

Toolbars are typically fixed to the bottom edge of the screen and contain one or more buttons. We highly recommend using toolbars only if the actions defined in them impact the entire view, rather than specific components.

Toolbars in Mobile Development Kit

The supported toolbar items in Mobile Development Kit include buttons (with limited functionalities), icons, system items, and spaces (applicable only for iOS). On iOS, users can position the toolbar items either to the left or right based on their business requirements. On Android, the toolbar items are aligned to the right by default.

Fiori Toolbar

The Fiori toolbar is completely Fiori-Design compliant. It is used for finalizing actions that affect the current view. The Fiori toolbar currently supports buttons with fully defined functionalities, including button type, semantics, button image, button image position, and style. Additionally, the Fiori Toolbar allows users to set helper text, customize icons for the overflow button (applicable only for iOS), and control the visibility of the toolbar itself.

Note

When both Fiori toolbar and Mobile Development Kit's default toolbar are defined in the same page, Fiori toolbar will take precedence.

The buttons in the toolbar are automatically positioned based on the number of buttons defined. For instance-

  • One toolbar item -
    • On phone - Stretches across the toolbar.
    • On tablet - Items are aligned to the right.
  • Two toolbar items -
    • On phone - Items are placed on either side of the layout, left and right.
    • On tablet - Items are aligned to the right. However, on Android tablets, if the HelperText is defined, the items are placed on either side of the layout.
  • Three or more toolbar items -
    • On phone - Only two items will be displayed, aligned to the right while the rest will be pushed into the overflow button.
    • On tablet - If there are three toolbar items, then all three items will be displayed and aligned to the right. In cases where there are more than three items, the excess items will be pushed into the overflow button.

For more information, refer to FioriToolbar and getFioriToolbar documentation.

Last update: September 6, 2024