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

Accessibility

The SAP Fiori for Android design system is designed to be compliant with accessibility standards. Our components are flexible, readable, and adaptable for usage by a wide range of users, providing an optimal and user-friendly experience for everyone, including individuals with visual, motor, auditory, speech, or cognitive impairments. Color Contrast Ratio Color contrast is the [...]

Category: Foundation

Type: -

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

Type: -

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

Type: -

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 Marker A. Outer Circle B. Inner Circle C. Icon Depending [...]

Category: Patterns

Type: -

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

Type: -

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 in edit mode. After the [...]

Category: Patterns

Type: -

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

Type: -

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

Type: -

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

Type: -

Calendar

The calendar view provides a visual overview of a week, a month, or multiple months. It can filter and display different types of content, such as events, agendas, or schedules, based on the time dimension. Example of calendar view on mobile (left) and tablet (right) Usage Do Use calendar view to display a visual overview [...]

Category: UI Components

Type: -

Card Body

The card body is the central part of the card that is used to display additional information alongside the content shown in the card header. By using the card body, several components from the SAP BTP SDK for Android can be integrated into a card, enabling the recreation of card types such as object cards, [...]

Category: UI Components

Type: -

Card Footer

The card footer is the bottom part of a card that contains important or routine actions that directly impact the card, such as “Approve” or “Submit”. The footer can accommodate a maximum of two action buttons. Card with a highlighted card footer Usage When using the card footer to integrate important user actions related to [...]

Category: UI Components

Type: -

Card Header

The card header is the uppermost part of the card that provides important information about the card and its related content on the detail page. The optional card header allows for a quick overview of key information, such as the title, subtitle, and status of the card. Card header examples Usage When using the card [...]

Category: UI Components

Type: -

Carousel Layout

A carousel layout is a design pattern that displays multiple cards horizontally, one after the other, with a glimpse of the next card visible on the edge of the screen. This partial visibility encourages users to swipe or scroll left or right to reveal more cards. Carousel with cards compact window size class (left) and [...]

Category: UI Components

Type: -

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

Type: -

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

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

Type: -

Circular Progress Indicator

A circular progress indicator is a visual element that displays the status of ongoing processes, such as logging in, uploading files, or refreshing content in a circular shape. It typically consists of a circular track and a moving indicator that fills up the track as the progress increases. Content refresh with circular progress indicator (left) [...]

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. Collection view of products on mobile (left), collection view of contacts on tablet (right) Usage Do Use [...]

Category: UI Components

Type: -

Colors

The right choice of colors is an important aspect that should be considered in smartwatch apps. It communicates the meaning and relationship of content, providing users with guidance to help them complete their tasks. Horizon Reference Colors The color palette for SAP Fiori for Wear OS is based on the color parameters from the Horizon [...]

Category: SAP Fiori for Wear OS

Type: -

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

Type: -

Contact Cell

A contact cell, commonly found in an object detail, gives quick access to the various methods of communicating with a contact. A contact cell consists of an image, labels (headline, subheadline), description, and contact actions. Contact cell on mobile (left) and tablet (right) Anatomy A. Detail Image (Optional) A rounded frame that displays an image [...]

Category: UI Components

Type: -

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

Type: -

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

Type: -

Design Principles

SAP Fiori for Wear OS provides a consistent and holistic user experience for SAP software on wearables. Wearables are computer technologies that users wear on their bodies, creating a more personalized experience. Common types of wearable devices are smartwatches. The purpose of wearables is to support an activity in the real world by providing additional [...]

Category: SAP Fiori for Wear OS

Type: -

Design Tokens

Design tokens are our cross-platform solution to managing color across iOS and Android. Design tokens are stored pieces of UI information such as color, spacing, sizing, and typography that collectively make up our design system's visual identity. Additionally, design tokens help us to maintain visual consistency, scale design decisions, and are simple to maintain and [...]

Category: Foundation

Type: -

Dialogs

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

Type: -

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

Type: -

Header

A header is a section title that represents the content of the section. It is used to group content on a screen into reasonable sections, making it easier for users to consume the information. Headers should be brief and concise so that users can quickly identify what each content section is about. Section header in [...]

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

Type: -

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

Type: -

Illustrated Message

The illustrated message communicates empty, error, and success states through a combination of solution-oriented messages, engaging illustrations, and a conversational tone. The illustrated message turns a situation, even a negative one, into a better experience for your users, while ensuring consistency. General empty state example Usage Use the illustrated message when you want to improve [...]

Category: Patterns

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

Type: -

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

Type: -

KPIs

KPIs (key performance indicators) are metrics used to evaluate the success of an organization, an individual, a group, or an activity. They serve to highlight the current value of an object or as a summary of the object. KPIs can be displayed in a header, in the content area of an object, on a card, [...]

Category: UI Components

Type: -

Layout

When designing for small screens, it is important to keep content within the layout legible, aligned, organized, and accessible. The following article presents some best practices that offer guidance for the design of a smartwatch layout, such as rules for handling different screen shapes, margins, text alignment, and touch targets. Screen Shapes Smartwatches on which [...]

Category: SAP Fiori for Wear OS

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

Type: -

Linear Progress Indicator

A linear progress indicator visually represents the status of ongoing processes, such as logging in, uploading files, or refreshing content by animating an indicator along a fixed track. It communicates the state of an app and indicates available actions, such as whether users can navigate away from the current screen. Login screen with linear [...]

Category: UI Components

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. List picker form cell on mobile (left) and tablet (right) Usage Do Use a list [...]

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

Type: -

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

Type: -

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

Category: Patterns

Type: -