A segmented control is a horizontal bar divided into two or more mutually exclusive buttons. This control provides users easy access to specific categories of content.

Usage

• Ensure the control’s segments are related to each other.
• Use a segmented control to switch between views. In the Campus app, for example, a segmented control is used to switch between Map and List views.
• Use the segmented control in a navigation bar, modal window, popover, or “drawer” (i.e., a pulley view controller).

• Do not use a segmented control if the segments are not related to each other.
• Do not use a segmented control to narrow a list. Use a Filter instead.
• Do not include more than one segmented control on the same screen.

Anatomy

A. Inactive control item

There is at least one inactive control item in a segmented control.

B. Active control item

There is at least one active control item in a segmented control.

Behavior and Interaction

When a button is tapped, the data corresponding to that segment is displayed and the button remains highlighted. Each segment allows the user to view a different set of information.

Adaptive Design

The maximum number of buttons that may appear in a segmented control varies depending on whether the navbar also includes a title.

In compact, the maximum number of buttons is five when there is a title in the navbar and four when there is no title.

In regular, the maximum number of buttons is five whenever there is a title in the navbar.

Resources

Related Components/Patterns: Segmented Form Cell

Development: FUISegmentControl, FUISegmentedControl

SAP Fiori for Android: N/A