Skip to search Skip to content
  • Home
  • Get Started
  • Explore SAP Fiori for Android
  • New Updates
  • Foundation
    • SAP Fiori Design Principles
    • Type System
    • Colors
    • Iconography
    • Layout
  • UI Components
    • Basic Components
      • Introduction
      • Banners
      • Bottom Sheet
      • Buttons
      • Dialogs
      • Menus
      • Pickers
      • Progress Indicators
      • Snackbar
    • Form Cells
      • Checkboxes
      • Chips
      • List Picker Form Cell
      • Radio Button
      • Sliders
      • Switches
      • Text Inputs
      • Time Picker Form Cell
    • Collection View
    • Data Table
    • Filter Feedback Bar
    • Footer
    • Header
    • Key Value Cell
    • KPIs
    • Object Cell
    • Object Header
    • Profile Header
    • Search
    • Signature Capture
    • Timeline
    • Timeline Preview
  • Patterns
    • Attach
    • Charts
      • Chart Overview
      • Chart Card
      • Chart Types
    • Create
    • Hierarchy View
    • Map
    • OCR Scan
    • Onboarding
    • Search
    • Sort and Filter
    • Sort By Multiple Criteria
  • Resources

Fiori for Android Design Guidelines

Explore SAP Fiori for Android

Explore SAP Fiori for Android

Categories

Attach

The attach component is usually part of the create or editing work flow, located at the end of the form. All the attached files should be associated with a certain business object. The app team can specify which types of files are supported. In general, users can only add/delete attachments when the component is in [...]
Category: Patterns
Type: -

Bottom Sheet

Bottom sheets are containers with supplementary content that is located at the bottom of the screen. Principles Bottom sheets contain content that supplements the screen's primary UI region. Bottom sheets can display a wide variety of content and layouts. Bottom sheets are easy to access on mobile. Types Modal bottom sheets are primarily used on mobile. [...]
Category: UI Components
Type: -

Buttons

Buttons allow users to trigger an action or make a choice with a single tap. Usage Buttons communicate actions that users can take. They are typically used in places like: Dialogs Form cells Snackbar Cards App bars Do’s Buttons should be easy to find within the UI. A button’s action should be clear. Don’ts Do [...]
Category: UI Components
Type: -

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
Type: -

Chips

Chips are interactive elements that provide users with a set of options. Users can tap a chip to make selections. There are two types of chips: choice chip and filter chip. When the names of the options fit within the chip, choice chip is an alternative for radio button and filter chip is an alternative [...]
Category: UI Components
Type: -

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. Structure Basic Structure A. Header At the top left of the collection view is the header, [...]
Category: UI Components
Type: -

Colors

Color sets the tone of the app and is a tool for communication. It helps with defining hierarchy for certain elements within an app and helps direct the users to where they need to go. For SAP Fiori for Android, we use the same colors as SAP Fiori for Web in order to keep the [...]
Category: Foundation
Type: -

Create

The create view presents users a form used to generate new objects and object details. It is typically triggered by “create…” or “add…” actions. The create view 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
Type: -

Data Table

Data table is a set of labeled data in column(s) and row(s) showing numbers, text, and images. In general, data table is a grid layout of columns and rows. Data table is available only on tablet to fit different types of data into a screen. On the mobile version, the data is displayed as the table [...]
Category: UI Components
Type: -

Dialogs

Dialogs are a type of modal that are used to display important information, show a list of selections for the user to make, warn the user of any alerts, and so on. It prompts the user to react and it interrupts the process of the application. There are 4 types of dialogs: Alert Dialog Prompts [...]
Category: UI Components
Type: -

Footer

A footer is a section that displays a description, label, or button(s). There are 4 types of footer variations in SAP Fiori for Android. Usage A. Persistent Footer with Button(s) Indicate the Primary Action When one or more actions are presented, indicate the primary action by placing it in a contained button. The secondary action [...]
Category: UI Components
Type: -

Header

A header is a section title to represent the entire contents of the section. There are two types of headers for tablet and one type for mobile. Usage A. Caption Header Represent the contents of the section. It uses a simple and easy word or phrase to understand the purpose of the section. B. Data Table Header [...]
Category: UI Components
Type: -

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 relationships but may also show more complex relationships that are several levels deep such as a great-grandparent/great-grandchild. Additionally, the hierarchy view is useful for seeing the sibling relationship of an object to understand [...]
Category: Patterns
Type: -

Iconography

Iconography is essential for creating a cohesive and enjoyable app experience. To maintain the look and feel among Fiori design language we advise using the outline icon style provided by Material Design. Download them here. Usage Do’s Use Material Design outline icon set. Use icons to highlight important actions for users. Use icons to indicate [...]
Category: Foundation
Type: -

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 cells are typically found in the object and object details page. Usage Do's Use a key value cell to display a piece of [...]
Category: UI Components
Type: -

Layout

Layout utilizes several spatial practices such as increments, keylines, padding, and vertical spacing. SAP Fiori for Android applies these practices to keep content aligned, organized, and accessible. Density-Independent Pixels (dp) SAP Fiori for Android uses a system of pixel units (dp) that allows for a design to scale to screens with different pixel densities. This allows for [...]
Category: Foundation
Type: -

Line Chart

The line chart represents data points using dots connected by lines to shows peaks and falls of the data set. This chart type is useful for showing changes in values (continuous or discrete) over time. Usage Do’s Use line chart to display a trend in the data, because the connections between the data points provides [...]
Category: Patterns
Type: -

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. Usage Use the list picker form cell if: The number of available options is more [...]
Category: UI Components
Type: -

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. Usage Do’s Use the map if you have a location-based dataset where the user needs to access tracking or routing information, monitor business objects, or visualize [...]
Category: Patterns
Type: -

Menus

A menu displays a list of options on a temporary container. Usage A menu pops up when users interact with a button, action, or another control. Menus allow users to make a selection from a list of options. Do’s Use a menu when the number of actions exceeds the components action limit. Don’ts Do not [...]
Category: UI Components
Type: -

Object Cell

Object cell is made up of text, images or icons. They can be configured in many ways to accommodate a wide variety of use cases. Usage Do’s Use object cell to preview information about an item in a list format. Don’ts Do not use object cell to compare attributes from different list items. Instead, refer [...]
Category: UI Components
Type: -

Object Header

The object header is essentially a quick view of the more relevant and important content of a particular object. It’s based on the prominent app bar from Material Design where the app bar is extended to accommodate more content. The object header uses a visually different theme in order to differentiate the object’s header area and [...]
Category: UI Components
Type: -

Onboarding

In enterprise applications, onboarding is the process of activating an account for a new user (or an existing user) and getting them up and running with the app. The user’s account is typically assigned by an admin or the IT department before using the app. The onboarding process can vary depending on the configuration of the app [...]
Category: Patterns
Type: -

Pickers

The picker component is used for time-based selections. There are three types of pickers: date picker, time picker and time duration picker. Pickers are always displayed in a dialog. Usage Do’s Use a picker for a time-related decision that the user needs to make. Don’ts Don’t use a picker for picking a number that isn’t related [...]
Category: UI Components
Type: -

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. Usage Do’s Use the profile header on a user profile or an object detail page. Don’ts Do not include lengthy information. It [...]
Category: UI Components
Type: -

Progress Indicators

Progress indicators display an undefined wait time or illustrate the length of a certain process to a user. Usage Progress indicators help users estimate the status of ongoing processes, like waiting for an app to load, submitting a form, or saving updates. Types Linear Indicator Determinate indicators display how long a process will take. They [...]
Category: UI Components
Type: -

Radio Buttons

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

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
Type: -

Search

A search usually involves the following: activating the search field, typing a search query, and displaying the search results. Usage Use search to find information quickly within an app. Use search suggestions to assist the user by providing past searches and search suggestions. Behavior & Interaction A search is shown as a Persistent search or Expandable [...]
Category: Patterns
Type: -

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. Variations The type of search is determined by how prominent search is within the app. Persistent Search Persistent [...]
Category: UI Components
Type: -

Sliders

A slider is a control that enables the user to adjust single values within a specified numerical range. Slider Control Structure 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 slider controls has a track representing the selectable [...]
Category: UI Components
Type: -

Snackbar

A snackbar provides a brief message about an app’s processes at the bottom of the screen. Usage Provides updates on an app’s processes Appears temporarily and disappears on its own without requiring the user’s dismissal Contains a single action Non-interruptive User action is not required Self-dismissing 0-1 actions Types Snackbar with Text Label The message [...]
Category: UI Components
Type: -

Sort and Filter

Filtering and sorting 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 (for mobile) or modal dialog (for tablet) is used to display all filter controls. [...]
Category: Patterns
Type: -

Switches

The switch control mimics a physical switch that allows users to turn individual settings (such as personalization or display settings) “on” or “off”. When users change a switch to “on”, they expect an instantaneous action as soon as the switch changes state. Usage Do's Use switches in a switch form cell only. Use switches to [...]
Category: UI Components
Type: -

Text Inputs

Text input controls are used to request a text entry from users. They are normally found in Create and Edit views as a part of completing the task. Types Currently, there are two types of text inputs provided in the SAP Fiori for Android. Depending on the length of the text that users need to [...]
Category: UI Components
Type: -

Time Picker Form Cell

Time picker form cell is used specifically for selecting time-based data types. Structure A. Property Name The property name describes what property this cell is defining. B. Value This is the value selected by the user. It can be a specific time point, or a time duration. Types Date Picker Form Cell - Select Time [...]
Category: UI Components
Type: -

Type System

We have set our own authentic type system for SAP Fiori Android which uses SAP’s proprietary typeface, "72". This typeface was designed specifically with Fiori principles in mind and makes SAP Fiori Android design solid and consistent. "72" is optimized to give you legibility, clarity, and consistency in different contexts. Style Category The type system [...]
Category: Foundation
Type: -
© 2021 SAP SE. All rights reserved.