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

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

Banners

A banner shows 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 could choose to use it for communicating internet connectivity, errors, synchronization statuses, and in-app notifications. Usage Banners must remain on screen until dismissed by the [...]

Category: UI Components

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

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

Chart Card

Chart card displays a preview and key information of the full screen chart. Users can tap to navigate to the full interactive card view. Usage Do Use the chart card if you want to provide users with an entry point to the full chart view. Don't Do not use the chart card to navigate to [...]

Category: Patterns

Chart Overview

A chart represents data in certain graphical patterns so users can get insights of the data set(s) visually. A full-width chart page allows users to view the trend of data, check specific data point, or compare different data sets. To see the specific details of different chart types, please see Chart Types. Structure In general, a [...]

Category: Patterns

Chart Types

SAP Fiori for Android currently supports two chart types: line chart and column chart. More chart types will be released in the future. Each chart type visualizes data differently and emphasizes on different aspect of the data. App team should choose a chart type based on the data type and purpose of the chart to [...]

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. 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

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

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

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

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

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

Filter Feedback Bar

Filter feedback bar is a horizontal scroll area containing interactive chips that provides users quick access to filter controls. The bar appears below the app bar, and above the list of objects. The interactive chips in the filter feedback bar indicate which filters have been applied, and what filters are available. Users can modify the [...]

Category: UI Components

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

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

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

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

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

KPIs

KPIs (Key performance indicators) are values for measuring and evaluating the success of an organization, an individual, a group, or an activity. KPIs are also used to highlight the current value of an object or as a summary of the object. Types There are four types of KPIs that can be used, which are the standard, [...]

Category: UI Components

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

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

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

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

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

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

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

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. Structure The OCR scanner comes as a full-screen model that includes a top app bar, scan window, and alignment [...]

Category: Patterns

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

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

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

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

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

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

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

Signature Capture

The signature capture allows users to input their signature by signing directly on the screen. The inputted signature is captured and then saved with an optional watermark for additional information. Usage The signature capture may be used when users must sign to authorize workflows. It can be used in various cases, like approving an order, [...]

Category: UI Components

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

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

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

Sort By Multiple Criteria

Sort by multiple criteria is an enhancement to sort features in sort and filter. This pattern allows users to select more than one sorting criterion and set the order in which these criteria will be applied. This advanced sorting feature allows users to prioritize the list of objects to their specific needs so they can [...]

Category: Patterns

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

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

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

Timeline

The timeline displays a list of objects (tasks, events, or meetings) in chronological order. Objects in the timeline are presented as tappable cards that display the most important information about an object such as title, description, or status. The timeline view can be filtered or searched. Nodes Usage Do's Do use the timeline cards to show a [...]

Category: UI Components

Timeline Preview

The timeline preview displays a snippet of the timeline, offering a high-level overview of what the overall project consists of. Usage Do's Do use the timeline preview to display objects and their respective timestamps. Do use the timeline preview to indicate the status of objects via the nodes. Do use the timeline preview to navigate [...]

Category: UI Components

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