Explore SAP Fiori for Android | SAP Fiori for Android Design Guidelines

Attachment Form Cell

The attachment form cell is usually part of the create or editing workflow, located at the end of the form. All the attached files should be associated with a certain business object. Adding attachments on compact (left) and medium and expanded screens (right) Anatomy Basic Anatomy A. Header The header is at the top of [...]

Category: UI Components

Banners

Banners show a short and concise message that displays at the top of the screen. It allows the user to take action or ignore it at any time. Apps may choose to use it for communicating internet connectivity, errors, synchronization statuses, or in-app notifications. Banner on mobile (left) and on tablet (right) Usage Do Banners [...]

Category: UI Components

Bottom Sheet

Bottom sheets are containers with supplementary content that is located at the bottom of the screen. Bottom sheet list view Usage Do Use bottom sheets to show deep-linked content that supplements the screen’s primary UI region. Use bottom sheets when representing actions in a list as opposed to menus or simple dialog. Use bottom sheets [...]

Category: UI Components

Buttons

Buttons allow users to perform actions, make decisions, or begin a process. The label of a button communicates the action that it is going to initiate. Examples of different buttons Usage Buttons should only be used for actions. Avoid using too many buttons – if users have too many options, it is difficult for them [...]

Category: UI Components

Chart Card

Chart cards display a preview and key information of the full screen chart. Users can tap to navigate to the full interactive card view. Chart cards in mobile (left) and tablet (right) Usage Do Use the chart card if you want to provide users with an entry point to the full chart view. Don't Do [...]

Category: Patterns

Chart Types

SAP Fiori for Android supports different chart types. Each chart type visualizes data differently and emphasizes various aspects of the data. Choose a chart type based on the data type and purpose of the chart to best fulfill users’ needs. Line chart (left), column chart (center left), stacked column chart (center right), horizontal bar chart [...]

Category: Patterns

Checkboxes

A checkbox lets the user set a binary value on the option associated with the control. When the user taps the checkbox, it toggles between checked and unchecked. Checked means that the state described by the checkbox text applies, or that the item has been chosen. Within a group of checkboxes, each checkbox can be [...]

Category: Patterns

Chips

Chips are interactive elements that provide users with a set of options. Users can tap a chip to make selections. Chips can be used for single and multiple selection. A single selection chip is an alternative for a radio button and a multiple selection chip is an alternative for a checkbox. Chips form cell on [...]

Category: UI Components

Collection View

Collection view previews a sample of content and presents it in a highly visual layout. It is an alternative view of object cells. The information is displayed in a grid format instead of list with an emphasis on images. Collection view of products on mobile (left), collection view of contacts on tablet (right) Usage Do Use [...]

Category: UI Components

Colors

Color sets the visual balance of SAP Fiori for Android apps. On screen, color is used to define the visual hierarchy of UI elements and to direct the user’s attention to complete their tasks. Horizon Theme Color Palette The Horizon color palette introduces a unified color palette that brings our brand and products together to [...]

Category: Foundation

Create

The create pattern presents users a form used to generate new objects and object details. It is typically triggered by “Create” or “Add” actions. The create pattern is presented in a full-screen dialog on mobile devices or modal dialog on tablets. In the dialog, users are able to input the information related to the object [...]

Category: Patterns

Data Table

The data table is a grid layout of columns and rows showing labeled data, such as numbers, text, and images. On mobile, a horizontal scrollable data table with a sticky header is available. Alternatively, the data table will be converted to object cells by default on mobile if horizontal scrolling is disabled. Data table on mobile [...]

Category: UI Components

Date & Time Picker Form Cell

The date and time picker form cell is used for selecting time-based data types. Time picker form cells in compact (left) and expanded layouts (right) Anatomy Single Value Picker Form Cell Single value picker form cells are used for selecting only a single value, which includes the date picker, range picker, time picker, and duration [...]

Category: UI Components

Date & Time Pickers

The picker provides a dialog for date or time-based selections. It can be used to select a date, a range of dates, a time, or a duration of time. Picker types in compact size from left to right: date picker, range picker, time picker, duration picker Usage Do Use a picker for a time-related decision [...]

Category: UI Components

Dialogs

Alert dialog (first), simple dialog (second), confirmation dialog (third), full-screen dialog (fourth)

Dialogs are a type of modal that are used to provide high priority information, display critical information, or ask for specific user action or decisions. It prompts the user to react and it interrupts the process of the application. Alert Dialog Prompts the user by displaying urgent information, detail, or actions. Simple Dialog Displays a [...]

Category: UI Components

Header

A header is a section title that summarizes the content within that section. It is used to organize screen content into logical parts, making it easier for users to navigate and understand the information. Headers should be brief and concise, allowing users to quickly identify what each section contains. Section header in forms: compact screen [...]

Category: UI Components

Hierarchy View

The hierarchy view is a set of columns that show the hierarchical relationships between objects. Typically, the hierarchy view shows a parent/child and sibling relationship but may also show more complex relationships that are several levels deep, such as a great-grandparent/great-grandchild. Example of hierarchy view on mobile (left) and tablet (right) Usage Do Use the [...]

Category: UI Components

Iconography

SAP icon library SAP icons have been redesigned for the Horizon visual theme with a fresh, friendly, and bold style. The new icons maintain consistency of size, stroke, and visual balance and are tailored for simple and direct user interaction, using metaphors that are easy to understand in an enterprise setting. Usage Do Use the [...]

Category: Foundation

Key Value Cell

The key value cell is a table view cell that fits inside the table view container. It is ideal for displaying sets of data that also need to display their labels. Key value cell on mobile (left) and on tablet (right) Usage Do Use a key value cell to display a piece of information with [...]

Category: UI Components

KPI Header

The KPI header displays a quick summary of KPI data to the user. It is typically used in an overview pattern to provide the user with contextual information at a glance KPI header on mobile (left) and tablet (right) Anatomy The KPI header is a container that includes multiple KPIs that are important to the [...]

Category: UI Components

List Picker Form Cell

The list picker form cell allows for the selection of one or more options among values within a defined category. It serves as the entry point to a list of available values for that category and summarizes the selected value. List picker form cell on a compact (left) and expanded screen (right) Usage Do Use [...]

Category: UI Components

Map

The map displays business objects on a map. It can also be used to show points of interest, optimized routing based on business criteria, and other quantitative location-based data. Map on mobile (left) and tablet (right) Usage Do Use the map if you have a location-based dataset where the user needs to access tracking or [...]

Category: Patterns

Menus

A menu displays a list of relevant options for the user that can be triggered from a button. Menu Usage A menu pops up when users interact with a button, an action, or another control. Menus allow users to select from a list of options. Do Use a menu when the number of actions exceeds [...]

Category: UI Components

Object Cell

Object cells consist of text, images, or icons. They can be configured in various ways to accommodate a wide range of use cases. Object cell on compact (left) and expanded screen (right) Usage Do Use an object cell to preview information about an item in a list format. Don't Don't use an object cell to compare [...]

Category: UI Components

Object Header

The object header is the topmost area in the object’s detail page that provides a detailed glimpse of that object. The object header provides an area that contains information such as object title, subtitle, and description amongst other supplementary information. Object header with two pages on mobile (left) and tablet (right) Usage Do Use concise [...]

Category: UI Components

OCR Scan

The OCR scan takes advantage of mobile technology to provide users a more efficient way to input data. The scanner identifies specific text from an object or document based on app specific data structure, and pre-fills the form. Mobile OCR scan screen (left); tablet OCR scan screen (right) Anatomy The OCR scanner comes as a [...]

Category: Patterns

Overview

SAP Fiori for Android leverages various window size classes to provide a pleasant user experience across different form factors. This adaptive design functionality allows content to be dynamically rearranged and resized in response to changes in device orientation or when the app is used on different . By shifting the focus from specific devices, such [...]

Category: Foundation

Persistent Footer

A persistent footer component is used for closing or finalizing actions that impact the current view. It is fixed at the bottom edge of the screen and comes in two different layouts: one for related actions with one or more buttons and one for opposite actions with two buttons and a helper/status text. Persistent footer [...]

Category: UI Components

Profile Header

The profile header gives a quick intro of a person to the user. It also includes methods to contact that person quickly without needing to access a different area of the profile page. Profile header on mobile (left) and on tablet (right) Usage Do Use the profile header on a user profile or an object [...]

Category: UI Components

Progress Indicators

Progress indicators keep users informed about the status of ongoing processes, such as logging in, uploading files, or refreshing content. They communicate the state of an app and indicate available actions, such as whether users can navigate away from the current screen. Login screen with linear progress indicator (left), uploading files (middle), content refresh [...]

Category: UI Components

Radio Buttons

Radio buttons provide users with a set of mutually exclusive options. They allow them to select only one option from two or more choices. Each option is represented by a radio button. Usage Do Use radio buttons for single selection. Use radio buttons when at least two distinct choices are available. Use radio buttons to [...]

Category: UI Components

SAP Fiori Design Principles

SAP Fiori provides a consistent and holistic user experience for SAP software. By creating visually pleasing designs with a strong focus on ease of use, the experience is intuitive and simple, across all devices. With effortless interaction patterns, the SAP Fiori UX is designed for a powerful impact across your enterprise. Design Principles The design [...]

Category: Foundation

Search

A search involves the following: activating the search field, typing a search query, and displaying the search results. Persistent search on map Usage The search pattern is used to help users find information quickly within an app. Adding search suggestions provides them with past searches and search suggestions. Behavior and Interaction A search is shown [...]

Category: Patterns

Search

Search is used to find and access content globally within an app or locally within any given screen. There are two variations of search, persistent and expandable search. The variation used is determined by its prominence within the app. Search in portrait orientation (left) and landscape orientation (right) Anatomy A. Icon Area In the non-active [...]

Category: UI Components

Single-User Onboarding

For enterprise software, onboarding is the process of activating an account by providing the user with key instructions. Existing user accounts are typically assigned by an admin or the IT department. The onboarding process can vary depending on the configuration of the app by the admin or the IT department in terms of data sensitivity, security [...]

Category: Patterns

Sliders

A slider is a control that enables the user to adjust single values within a specified numerical range. Sliders on compact (left) and expanded screens (right) Anatomy Slider Control A. Container A slider control always stays in a container with reserved paddings to provide enough touch area for users to operate the slider. B. Track A [...]

Category: UI Components

Snackbar

A snackbar provides a brief message about the performance of a process at the bottom of the screen. Snackbar Usage A snackbar provides updates of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen and disappears on without requiring the user's dismissal. Do Create text [...]

Category: UI Components

Sort and Filter

Sorting and filtering are two ways of refining the results from a long list of objects. These two features help users navigate through a big amount of data and find the specific data they want to focus on easier. Typically, a full-screen dialog on compact or a modal dialog for medium and expanded screens is [...]

Category: Patterns

Switches

The switch control mimics a physical switch that allows users to turn on/off individual settings, such as personalization or display settings. When users change a switch to “on”, they expect an instantaneous action as soon as the switch changes state. Switch on mobile (left) and on tablet (right) Usage Do Use switches in a switch [...]

Category: UI Components

Text Inputs

Text input controls are used to request a text entry from the user. They are usually found in the create or edit pattern. Text input controls on mobile (left) and tablet (right) Usage Do Use capital case for labels. Use an asterisk next to the label to indicate that the text input is required. Use [...]

Category: UI Components

Typography

SAP Fiori for Android type system maps SAP's 72 typeface to Material Design's type hierarchy. This respects the established visual harmony of Material Design's components while introducing SAP Fiori's unique visual identity. SAP Fiori for Android 72 type system 72 Typeface SAP Fiori for Android uses SAP's proprietary 72 typeface to maintain consistency with other SAP [...]

Category: Foundation

We'd appreciate your feedback!

Processing your feedback

Your feedback has been sent to the SAP Fiori design team.

Thank you for your helping us to improve our guidelines!

We'd appreciate your feedback!

Please fill out the form to send us your feedback.

This topic was helpful
This topic was not helpful
- Can you tell us why?
- The information I need is missing
- The content is unclear / hard to follow
- The content is incorrect / out of date
- Other

Include screenshot

Your feedback is anonymous, so you won't receive a reply. If you'd like help with a specific question, please visit the SAP Fiori Community