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

AR Annotations

Augmented reality (AR) annotations let users view the virtual annotations of existing objects in a facility. They can be used to explore a warehouse, machinery, or a business object to provide users with more information about the world around them. Examples of a scan screen (left), pulsing marker (middle) and selected marker (right) Anatomy AR [...]

Category: Patterns

AR Card

The AR card displays key information related to a single AR marker annotation. A user can tap the card to display additional information in a full-screen view. The user can also swipe between the cards. AR cards with image preview Anatomy The AR card includes variations of the following three elements. The content should match [...]

Category: Patterns

AR Markers

AR markers represent an annotated object in the world view. When a user selects an AR marker, the AR card appears at the bottom to display relevant information about the marker. Unselected AR markers (left) and a selected AR marker with AR card (right) Anatomy The Marker A. Outer Circle B. Inner Circle C. Icon [...]

Category: Patterns

AR Scanner

The AR scanner is a quick way to initiate augmented reality experiences, detecting an image through a device’s live camera. It ensures that the AR image can be accurately placed using the scanned item as a location anchor. Examples of a coaching view (left), scanning view (middle), and matched scan view (right) Usage Do Provide a [...]

Category: Patterns

Attach

The attach pattern 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 it is in edit [...]

Category: Patterns

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 trigger an action or make a choice with a single tap. They come in three variations: text button, tonal, and contained button. Text button and contained button Usage Buttons communicate actions that users can take. They are typically used in the following components: Dialogs Form cells Snackbar Cards App bars Do Buttons be [...]

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 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 points, or compare different data sets. To see the specific details of different chart types, please see chart types. Line chart in mobile (left) [...]

Category: Patterns

Chart Types

SAP Fiori for Android currently supports five chart types: line chart, column chart, stacked column chart, horizontal bar chart, and donut chart. Each chart type visualizes data differently and emphasizes various aspects of the data. App teams should choose a chart type based on the data type and purpose of the chart to best fulfill [...]

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. Usage Do Use chips [...]

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 achieve [...]

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 like numbers, text, and images. In 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 (left) [...]

Category: UI Components

Data Table Card

The data table card provides a preview of historic data in a table format. Currently, data table cards display up to four rows and two columns that can be customized to fit a variety of use cases. This card can also be used as an entry point to a connected data table. Collection of data [...]

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. There are 4 types of dialogs: Alert Dialog Prompts the user by displaying urgent information, detail, [...]

Category: UI Components

Filter Feedback Bar

The 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 [...]

Category: UI Components

Footer

A footer is a section that displays a description, label, or buttons. There are four types of footer variations. Usage A. Persistent Footer with Buttons 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 should be shown as a [...]

Category: UI Components

Header

A header is a section title to represent the content of the section. It helps to group content on screen into reasonable sections so users can consume the information easier. Headers should be concise and accurate so that users can quickly identify what each content section is about. Variations A. Section Header A section header represents [...]

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 relationships but may also show more complex relationships that are several levels deep such as a great-grandparent/great-grandchild. Usage Do Use the hierarchy view if the user needs to see the relationship [...]

Category: Patterns

Icons

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. Usage Do Use a key value cell to display a piece of information with its label. Don't Don't use the key value cell to [...]

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. KPI header on mobile (left) and tablet (right) Usage Do Use the KPI for [...]

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. Layout with 16dp margins and 72dp keyline Density-Independent Pixels (dp) SAP Fiori for Android uses a system of pixel units (dp) that allows for a design to scale [...]

Category: Foundation

List Card

List card thumbnail

The list card displays a set of items or objects in a vertical list format. Similar to the object card, the list card is also highly customizable. For increased organization, there are a few best practices on list item usage. List cards in mobile (left) and tablet (right) Usage Do Use the list card if [...]

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. Usage Do Use when the size and nature of available options are unknown or dynamic [...]

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

Multi-User Onboarding

The multi-user onboarding pattern addresses onboarding scenarios where more than one user may share a device. Users can select from a list of existing accounts on the device to log in with or add a new account. The multi-user onboarding pattern is an extension of the single-user onboarding pattern. Much like the single-user onboarding pattern, [...]

Category: Patterns

Navigation Bar

The navigation bar provides fast access to two to five core destinations in an app. Navigation bar with three destinations Usage Do Use the navigation bar for two to five core destinations. Use the navigation bar on mobile and small tablet interfaces. Keep the title of destinations short and concise. Don't Don’t use the navigation [...]

Category: UI Components

Navigation Drawer

The navigation drawer provides access to different destinations in an app. Navigation drawers can be permanently visible or opened and closed by tapping a menu icon. Modal navigation drawer (left) and standard navigation drawer (right) Usage Do Use the navigation drawer for five or more destinations. Use the modal navigation drawer primarily on mobile Use [...]

Category: UI Components

Navigation Rail

The navigation rail provides a top-level navigation to three to seven core destinations in an app. Navigation rail with floating action button, profile, and four destinations Usage A rail can be used as the sole navigation component on larger screens, such as tablet or desktop devices. Do Use the navigation rail for three to seven [...]

Category: UI Components

Object Card

The object card is a flexible container with critical information regarding a single object. It previews the object and serves as the entry point to the full object detail page. The object card is highly customizable to accommodate various content types and use cases. Collections of object cards on mobile (left) and tablet (right) Usage [...]

Category: UI Components

Object Cell

Object cells are made up of text, images, or icons. They can be configured in many ways to accommodate a wide variety of use cases. Object cell in mobile (left) and tablet (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 [...]

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

Pickers

The picker 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. Date picker (left), time picker (middle) and time duration picker (right) Usage Do Use a picker for a time-related decision that the user needs to make. Don't [...]

Category: UI Components

Privacy Notice

Privacy notice helps users understand and adjust privacy permissions. The design of privacy notice can vary depending on the application’s configuration. Privacy notice onboarding page (left) and privacy notice alert dialog (right) Usage When certain application features need a user’s privacy permission, the privacy notice onboarding page will notify the user about why the application needs those permissions. [...]

Category: Patterns

Product Icon

SAP Fiori for Android product icons The product icon of SAP mobile apps communicate the purpose of SAP’s mobile experience and supports business users in recognizing the app in the Play Store and on their home screens. Our product icon design direction complements the Horizon visual design and creates a recognizable mobile brand. The balance [...]

Category: Foundation

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 inform users about the status of ongoing processes, such as a login progress, uploading files, or refreshing content. They communicate an app’s state 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 with circular progress [...]

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

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

Search

A search involves the following: activating the search field, typing a search query, and displaying the search results. Persistent search on map 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 and Interaction A search is shown as a [...]

Category: Patterns

Signature Capture

The signature capture allows users to input their signature by signing directly on a dialog. The signature is captured and then saved with an optional watermark for additional information. Signature capture on mobile (left) and tablet (right) Usage The signature capture may be used when users must sign to authorize workflows. It can be used [...]

Category: UI Components

Signature Capture Inline

Signature capture inline is a variation of the signature capture component. This variation allows users to input their signature on a screen that is shared with other components. Signature capture inline on mobile (left) and tablet (right) Usage Signature capture inline may be used when users need to view content on the screen along with [...]

Category: UI Components

Signature Form Cell

The signature form cell is an entry point for users to launch the signature capture component. Anatomy A. Header The header introduces the signature form cell. B. Text Label The text label describes what the signature is for. C. Add Signature Button The "Add Signature" button launches the dialog for the signature capture when tapped. Anatomy [...]

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. 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 slider controls has a track representing the selectable [...]

Category: UI Components

Snackbar

A snackbar provides a brief message about about the performance of a process at the bottom of the screen. Snackbar Usage 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 its own without requiring the user's dismissal. Do [...]

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 (for mobile) or a modal dialog (for tablet) is used to display [...]

Category: Patterns

Sort By Multiple Criteria

The sort by multiple criteria pattern is an enhancement to the sorting features in the sort and filter. It 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 [...]

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 Use switches in a switch form cell only. Use switches to [...]

Category: UI Components

Text Inputs

Text input controls are used to request text entries from users. They are usually found in create and edit patterns as part of completing the task. Text input controls on mobile (left) and tablet (right) Variations Currently, there are two types of text inputs. Depending on the length of the text that users need to [...]

Category: UI Components

Theming

Theming refers to using a color palette and a logo to define a system-wide appearance for an application. It’s achieved by applying colors to major UI elements, such as text and background, with the intention to create visual harmony. It gives users a holistic visual experience throughout the application. This visual experience can be leveraged to [...]

Category: Foundation

Time Picker Form Cell

The time picker form cell is used for selecting time-based data types. Anatomy 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. Time Picker form cell anatomy Variations Date Picker [...]

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. Timeline on mobile (left) and tablet (right) Usage Do [...]

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. Timeline preview on mobile (left) and tablet (right) Usage Do Use the timeline preview to display objects and their respective timestamps. Use the timeline preview to indicate the status of objects via the nodes. Use [...]

Category: UI Components

Top App Bar

The top app bar contains actions and content based on the current screen in an app. This includes navigation, title, and actions. The elements in the top app bar are specific to the current screen, but the top app bar can also contain consistent elements across an app. Top app bar on mobile (left) and [...]

Category: UI Components

Type System

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. Fiori for Android 72 type system 72 Typeface SAP Fiori for Android uses SAP's proprietary 72 typeface to maintain consistency with other SAP products. [...]

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