What’s New
Welcome to the New SAP Design System Portal!
The SAP Design System portal is your one-stop-shop for all the resources and guidance you need to build your best with SAP. Here you’ll find all of the SAP Fiori Design Guidelines across mobile, web and digital design platforms, along with resources and support to help you get the most out of the system.
What’s new?
The SAP Fiori Design Guidelines are now the all-encompassing SAP Design System Guidelines. All the content you use and rely upon can be found here in the new experience, either via the Android landing page (direct links right to key sources like components, visual foundations, and mobile documentation), or the side bar navigation within the system guidelines. You can also toggle between web, mobile, and digital design using the top menu navigation.
The old URL (experience.sap.com/fiori-design) will stay live for a transitional period, before being deprecated and re-directing to the new portal site (sap.com/design-system). Make sure to bookmark your new links!
SAP BTP SDK for Android 25.8
UI Components & Patterns
AI User Feedback
New Pattern! The AI user feedback pattern allows users to provide positive or negative feedback about their experience with embedded AI, applicable from component-level feedback to page-level feedback.
AI user feedback in default view
AI Writing Assistant
New Pattern! AI writing assistant quickly and seamlessly edits text in text input fields via provided prompts in a panel, allowing users to refine their input and complete writing tasks with efficiency.
AI writing assistant default panel
Circular Progress Indicator
Feature Enhancements! The icon button can be changed to a different icon button once loading is finished.
Object cell with a progress indicator
Illustrated Message
Feature Enhancements! New illustration assets have been added.
Illustrated message with the new “empty task” illustration
Native File Viewer
Feature Enhancements! The native file viewer now supports password-protected PDFs by prompting users to enter a password in a dialog before the file is displayed.
Viewing password-protected PDF files
Picker Form Cell
Feature Enhancements! The Jetpack Compose version of the picker form cells is now available.
Date picker form cell with Horizon tonal color option
Stepper Form Cell
New Component! The stepper form cell in two layout options and the nested stepper control are now available for Jetpack Compose.
Stepper form cell in horizontal layout (top) and vertical layout (bottom)
Text Input
Feature Enhancements! Text input – single property form cell now supports currency input by offering an ISO code on the label, and formatting the entered value with currency symbol based on local settings.
Text input – single property form cell with currency input
Time Picker
Feature Enhancements! The Jetpack Compose version of the time picker is now available.
Time picker with Horizon tonal color option
SAP BTP SDK for Android 25.4
Design Kit
New Design Kit with Horizon Tonal Color Option
Updated Design Kit! A tonal variant of the Horizon theme has been added. The tonal color option provides better Android native experience. With this update, a new design kit has also been created, separating it from the non-tonal color option.
SAP Fiori for Android Design Kit
Foundation
Adaptive Layout
Guideline Enhancements! The guideline articles have been updated to provide guidance on how to apply M3’s adaptive layout to mobile apps for a better user experience on large screens.
List-detail layout displayed in expanded window size
Colors
Guideline Enhancements! Introducing Horizon theme with tonal option. The tonal variance of the Horizon theme combines the Horizon characteristics with M3 tonal styles to create an enhanced Android native experience.
Horizon theme with tonal variant
UI Components & Patterns
AI Notice
New Pattern! The AI notice informs users when content is AI-generated, reminding them to double-check its accuracy.
A note form cell with AI notice
AI Progress Indicator
New Component! The AI progress indicator provides information about the status of a user’s request while they wait for the content to be generated by AI.
AI linear progress indicator
Attachment Form Cell
Feature Enhancements! A confirmation dialog now appears by default when an attachment is deleted.
Confirmation dialog for deleting an attachment
Banner
Feature Enhancements! The banner component is now available in Jetpack Compose.
Banner with one-line text and one action
Barcode Scanner
New Pattern! The barcode scanner allows users to quickly locate an object by scanning a barcode via their device’s built-in camera. It supports both manual and auto capture modes for processing multiple bar codes.
Barcode scanner in auto mode
Calendar
Feature Enhancements! The calendar control now supports range selection.
Calendar control in range selection mode
Card Header
Feature Enhancements! The card header now provides slots for custom components. The card cell has been enhanced to allow for improved information hierarchy.
Main card header with slots for custom components
Circular Progress Indicator
Feature Enhancements! The in-place loading state can be applied to a button inside an object cell. The button reverts to its original state after successful loading.
Loading state button in object cell
Collection View
Feature Enhancements! The Jetpack Compose version of the collection view has been updated with visual changes such as an adopted attachment grid.
Collection view with edge-to-edge horizontal scroll
Date Picker
Feature Enhancements! The Jetpack Compose version of the date picker supports custom features such as an alternate calendar and clearing a selection.
Date picker dialog with Horizon tonal color option
Inline Signature Capture
Feature Enhancements! Inline signature capture now supports mandatory field indicators and error state.
Inline signature Capture in error state
Material Design 3 Standard Components
Guideline Enhancements! Several components will be discontinued for receiving updates as we transition to providing Horizon theme support for M3 standard components.
M3 primary tabs on compact screen with Horizon tonal color option
Onboarding
Guideline Enhancements! The single-user onboarding guideline article has been updated with detailed explanation of how to choose the right flow for your use case and best practice examples for customization.
Custom page example for QR code scan
Rating Control
Feature Enhancements! The rating control now supports a leading label for the display-only variant and has a new interactive variant.
Interactive rating control example
SAP BTP SDK for Android 24.12
Design Kit
New Updates via Branches
Updated Design Kit! We’ve transitioned from creating new versions as separate files to updating within the same file using branches. This change ensures a single source of truth, improves collaboration, and simplifies version control by keeping all updates centralized and organized in one place.
SAP Fiori for Android Design Kit
Foundation
Color System - Elevation
New! The Elevation article goes into the details, visual cues, examples, and usage of the elevation system.
Elevation techniques: tonal color, shadow, and scrim
UI Components & Patterns
AI Button
Guideline Enhancements! The AI Button guideline article now includes best practices for using the icon-only AI button variant.
Icon-only AI button placed in object cells
AI Acknowledgement
Guideline Enhancements! The guideline now includes best practices for using the AI Acknowledgement in an onboarding and in-app service update scenario.
AI Acknowledgement in onboarding
Attachment Form Cell
Feature Enhancements! The attachment form cell can now indicate mandatory fields with an asterisk. If the user doesn’t upload a file, the attachment form cell displays an error state. An optional helper text has also been introduced.
Attachment form cell in error state
Avatar and Avatar Group
Feature Enhancements! A short label can now be displayed together with the avatar group to provide descriptive information. For better visibility, the avatar group now also offers avatars with a size of 24dp in addition to the default 16dp.
Avatar group with trailing label
Button
Feature Enhancements! The loading state can be applied to a button when a user-triggered non-disruptive progress is being processed. The original icon and/or text is replaced with an activity indicator and/or loading message.
Loading button examples
Chips
Feature Enhancements! The chip form cell now supports adding a mandatory field indicator.
Chip form cell with required field
Circular Progress Indicator & Linear Progress Indicator
Updated to M3 style! The circular progress indicator and linear progress indicator components have been updated to integrate the lasted Material 3 styles. This update enhanced accessibility for both components.
Progress indicator examples
Date and Duration Picker
Feature Enhancements! The date and range pickers now enable a few features provided by View-Based Android picker. The date and range picker dates may now show a disabled date, and a minimum and/or maximum date may now be set. The date picker may now show status indicators.
Date picker showing disabled states and status indicators
Document Scanner
New Component! The document scanner offers both automatic and manual scanning modes for single or multiple documents, along with border detection. Editing options are also available in the gallery view.
Document scanner camera view (left) and gallery view (right)
Multi-Message Handling
New Component! Multi-message handling helps users manage multiple messages within an app, making it easy for users to take action. Multi-message handling follows the basic structure of a bottom sheet, prioritizing message components based on their importance.
Multi-message handling
Object Cell
Feature Enhancements! The object cell has been enhanced to support more nested components, including rating controls and menus. Options to include text buttons, icon buttons, and KPI, and new combinations for the right accessory have also been added. Additionally, rows can be swapped for increased flexibility.
Object cell on compact screen (top) and expanded screen (bottom)
Section Header/Footer
New Section Footer! The section footer provides additional actions or information at the bottom of a group section. It supports various layouts, including a left-aligned button, right-aligned button, two opposite buttons, and text only, with flexible positioning to adapt to different use cases.
Section footer types
Slider
Updated to M3 style! The slider and slider form cell have been visually updated to align with the latest Material 3 design guidelines. Updates include wider active and inactive tracks, a stop indicator at the end of the inactive track, and the redesigned handle.
Slider form cell