Foundations

Design Tokens

New! 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 update. 

Typography

Updated Font Styles! 72 Semibold is now added to SAP Fiori for Android typography. Subtitle 1, Subtitle 2, Button, and Caption 2 are updated to Semibold font weight. H5B, H7, and H7 are updated to Bold. Existing SDK components using those font styles are updated accordingly. New font scales have also been added: H4B-Small (Bold, 28sp) and H8 (Bold, 16sp). 

UI Components

Calendar

New Component! 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.

Cards & Layouts

New Component! A card provides brief, related pieces of information and serves as an entry point, teaser, or preview to more detailed content. It consists of a toolkit with nested components that can create a variety of cards that meet SAP product requirements. By pressing on the card, users can select the card and navigate to a dedicated page with more detailed information.

Input & Selection

Updated Components! The label font style for all Input & Selection components has been updated to Subtitle 2, resulting in improved visual consistency. Additionally, an optional helper text has been included for all types of Input & Selection controls. 

KPIs

New Component! A new KPI component, that is based on the KPI Header component, is now available. It can be used in more types of content areas and comes with more variations.

Rating Control

New Component! The rating control can be used in various contexts to provide insight regarding the opinions and preferences of an object. Currently, the rating control is display-only.

Status Info Label

New Component! The status info label displays complementary information that relates to the object. It is a flexible combination of a text value and an icon.

Step Progress Indicator

New Component! The step progress indicator is a progress indicator for tracking and displaying a user’s state in a user flow. It allows the user to navigate to another step in both the horizontal view and the vertical “All Steps” view. It also supports dynamic steps such as sub-steps or indeterminate steps.

Tags

New Component! Tags are used to display quick and useful bits of information to the user, such as keywords, labels, categories, or status. They use a different visual representation than plain text and function as independent bits of information. Tags are not interactive.

Patterns

Illustrated Messages

New Pattern! Illustrated messages communicate empty, error, and success states through a combination of solution-oriented messages, engaging illustrations, and a conversational tone. They are flexible and adaptive. Use an illustrated message when you want to improve the user experience for one or more message states in your application.

Widgets

New Pattern! Android widgets provide a quick overview of key information across the user’s home screens. They retain simplicity by showing only the most valuable information and functionality from the application first, guiding users to access more complex data and actions within the app.

Resources

SAP Fiori for Android UI Kit 7.1

Updated Figma UI Kit with new components and enhancements for this release, including: 

• New Updates page documenting release updates in the UI Kit. 
• Instruction on using the new color variables in UI Kit 7.1.

Updates to Guideline Structure

Input and Selection

The Form Cells section has been renamed to Input and Selection to better reflect the usage of the controls. The individual component name inside the Form Cells section remains unchanged.

Foundations

Accessibility

Updated guideline! The Accessibility guideline article has been updated to include more content on color contrast and increase contrast mode. See Accessibility for more details.

Colors

Updated guideline! The Colors guideline article has been updated to a new structure with updated content. See Colors for more details.

UI Components & Patterns

Buttons – Semantic (Negative)

New button variation! The negative button style indicates destructive actions and warns users to take extra precautions when interacting with the buttons. See Buttons for more details.

List Picker Form Cell

Updated component! List picker form cell on mobile replaced the drill-down transition with a modal bottom sheet to provide more context for users. For both mobile and tablet, a “Select All” feature is added to the all value list for multi-select. A new floating anchor button is introduced to take the user back to the top of the list. To exit the list view, the user needs to explicitly tap on “x” to discard changes or the “Apply” button to save the selection. See List Picker Form Cell for more details. 

Persistent Footer

Updated component! The Footer article has been changed to Persistent Footer to reflect the latest SDK update. A persistent footer is a section at the bottom edge of the screen that displays a description, label, or buttons. It is used for closing or finalizing actions that impact the current view. See Persistent Footer for more details.

Progress Indicators – Circular Progress Indicator

Updated component! The circular progress indicator has been updated to the latest SAP Fiori for Android visual style with support for error and success states. See Progress Indicators for more details.

Timeline View

Updated component! Refreshed visual design that is consistent with the timeline view for iOS. Introduced new node shapes and indications to enhance timeline cell functionalities. See Timeline View for more details. 

Timeline Preview

Updated component! Introduced new node shapes to reflect timeline view’s new design. Enhanced flexibility on text labels. See Timeline Preview for more details.

Resources

SAP Fiori for Android UI Kit 7.0

Updated Figma UI Kit with new components and enhancements for this release, including:

• New Updates page documenting release updates in the UI Kit.
• Added technical names and links to development documentation to Info Card. 

Updates to Guideline Structure

Navigation and Search

The Navigation Bar, Navigation Drawer, Navigation Rail, Search, and Top App Bar guideline articles are located within the Navigation and Search section under UI Components.

Foundations

Iconography

New icon set! 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. To learn more, refer to Icons.

UI Components & Patterns

Banners

Error state enhancement! Added error state for banners. A banner error state can be used to provide a page-level error message. For example, it is used in the Inline Edit flow for data tables.

Data Table – Inline Edit

Feature enhancement! In the inline edit mode, users can edit multiple lines without opening the key object cell view. Currently, the inline edit mode is available for text, List Picker, and Time Picker.

Navigation Drawer

New component! 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. Refer to Navigation Drawer to learn more.

Navigation Rail

New component! The navigation rail provides a top-level navigation to three to seven core destinations in an app. To learn more, refer to Navigation Rail.

Onboarding – Single-user Onboarding & Multi-User Onboarding

• Updated pattern! Added guidance for splash screen.
• Updated pattern! Updated launch screen with optional new EULA flow. A new dialog design to comply with China’s legal requirements.
• Updated pattern! Increased content width for tablet/large screens.

Progress Indicators – Linear Progress Indicator

Updated component! The linear progress indicator has been updated to the latest SAP Fiori for Android visual style with support for error and success states. See Linear Progress Indicator.

Switches

Updated component! The switch control is updated to M3 style, which provides better accessibility. See Switches.

Resources

SAP Fiori for Android UI Kit 6.0 (Link to Figma)

Updated Figma UI Kit with new components and enhancements for this release, including:

• New Updates page documenting release updates in the UI Kit.
• Grouped Navigation Bar, Navigation Drawer, Navigation Rail, Search, and Top App Bar into Navigation & Search page.
• Info Card for each component documenting the basic information about the component and major change history.