Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 

SAP Mobile Design System and Apps

We are constantly working on our mobile design system and technology offerings to provide you with everything you need for designing mobile business applications. We have not only updated our existing UI components by listening to the valuable feedback of app teams, but we've also introduced new components to enhance the possibilities for a truly delightful user experience. One of our app teams that provided feedback was SAP Concur, who ended up completely revamping the SAP Concur mobile app by adopting the SAP BTP SDK and the SAP Fiori design language with the Horizon theme. But that's not all – we've also recently introduced SAP Fiori for watchOS and SAP Fiori for Wear OS, expanding our offerings to cater to even more platforms.


SAP Fiori for Wear OS and SAP Fiori for WatchOS

SAP Fiori for Wear OS

Our new watch design systems bring the power of SAP Fiori to Apple Watch and Wear OS devices for a more efficient, productive, and personalized experience. SAP Fiori for watchOS and SAP Fiori for Wear OS enable users to seamlessly access real-time business insights, smart notifications, and critical tasks on the go, all through a user-centric interface optimized for smart watches.

SAP Fiori for WatchOS

Get started with SAP Fiori for Wear OS | Get started with SAP Fiori for watchOS


New in SAP Fiori for Android 7.0

Our latest design system and Android SDK release has brought significant enhancements to a number of UI components that further enhance the mobile user experience.


Button styles: tint (A), neutral (B), and negative buttons (C)

Buttons come in different variations (contained, tonal, and text) and styles that add another layer of complexity to the UI. The new negative button style that we have added to the latest release of SAP Fiori for Android indicates destructive actions and warns users to take extra precautions when interacting with the buttons.

For more information, check out the Buttons article in the SAP Fiori for Android Design Guidelines.

List Picker Form Cell

List picker half-screen view (left) and full-screen view (right)

The list picker form cell, which allows users to select one or more options among specific values within a defined category, has been updated to replace the drill-down transition on mobile with a modal bottom sheet to provide more context for users. For both mobile and tablet, we have added a “Select All” feature to the “All Value” list for multi-select. We have also introduced a new floating anchor button that takes the user back to the top of the list. To exit the list view, the user can tap on “X” to discard changes or select the “Apply” button to save the selection.

Find out more about these new functionalities in the List Picker Form Cell guideline article.

Persistent Footer

Persistent footer on mobile (left) and tablet (right)

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. To reflect the latest SDK update, the footer article has been changed to persistent footer.

See Persistent Footer to learn more about this component.

Circular Progress Indicator

Circular progress indicator with one-line success message (left) and two-line success message (right)

The circular progress indicator, a variation of the progress indicator component that keeps users informed about the status of ongoing processes, has been updated to the latest SAP Fiori for Android visual style, which includes error and success states for failed and successfully completed actions.

Refer to Progress Indicators for more details.

Timeline View

Timeline on mobile (left) and tablet (right)

The timeline view component, which displays a list of items in chronological order, now comes with an updated visual design that is consistent with the timeline view component for iOS. We have introduced new node shapes and indications to enhance timeline cell functionalities.

Check out the Timeline View article to learn more about these changes.

Timeline Preview

Timeline preview on mobile (left) and tablet (right)

Along with the timeline view component, we have updated the timeline preview by introducing new node shapes to reflect the new design of the timeline view component, and we have also enhanced the flexibility of text labels.

See Timeline Preview for more details.


New in SAP Fiori for iOS 9.2

Our mobile design system and software development kit for iOS have received significant upgrades, incorporating a range of enhanced UI components alongside new additions. These advancements are aimed at providing an unparalleled mobile user experience.

Rating Control Form Cell

Rating control form cell in compact width (left) and regular width (right)

The rating control form cell, which indicates an average rating for an object in a form cell, has been added to our UI Kit.

For more information, check out the Rating Control Form Cell article in the SAP Fiori for iOS guidelines.

Step Progress Indicator

Step progress indicator in compact width (left) and regular width (right)

The step progress indicator is a new UI component that has been added to our SDK for iOS. It is an indicator for tracking and displaying a user’s state in a user flow and allows them to navigate to another step in both the default view and the optional “All Steps” view.

See Step Progress Indicator to learn more about this component.

Filter Feedback Bar

Applying fast filters in filter feedback bar

The filter feedback bar is a horizontal bar that appears above a list of content. For better accessibility, we have added the option to toggle the animation for selected filters on or off and reduced the height of the filter feedback bar to improve interaction with filter buttons.

Refer to Filter Feedback Bar for more details.

List Picker Form Cell

List picker on compact (left) and regular (right)

Just like the list picker form cell for Android, the iOS version now comes with a new flow with modal sheets and an optional anchor button. This new flow can be used to present non-immersive content or support simple tasks.

Check out the List Picker Form Cell guideline article.

Text Inputs

Compact width text input on iPhone (left) and regular width on iPad (right)

Text inputs such as text field form cells, key value form cells, and note form cells now have a new error state and an optional character counter enhancement. The new error state leverages the bounding box and hint text with color for a seamless experience that is consistent with Android. The character counter provides a familiar visual cue for users in instances where a character limit is required.

See Text Inputs for more information.


SAP Concur Mobile App

SAP Concur mobile app screens

As mentioned earlier, we heavily rely on the feedback of app teams. That’s why the SAP Concur team and SAP Fiori Mobile Design System team joined forces to reimagine the user experience of the SAP Concur mobile app that has multiple millions of active users worldwide. By using the SAP BTP SDK that comes with built-in accessibility features, the app was completely updated, for example with a new dynamic home screen that offers users a quick glance at contextual information, allowing them to easily manage their travel expenses. The SDK also provides theming options, including a dark theme, giving users the freedom to personalize the visual experience of their app.

Download the SAP Concur mobile app from the App Store or Google Play Store.

Mobile Design Guidelines

SAP Fiori Mobile Design Guidelines for Android and iOS

A detailed documentation on component anatomy, behavior, and interactions allows you to use components that match your use case. Crosslinks to Google’s Material Design Guidelines for Android and Apple’s Human Interface Guidelines for iOS, as well as links to development documentation, help you navigate to these resources. Additionally, you can find a feedback function on each guideline article that allows you to provide feedback.

SAP Fiori for Android Design Guidelines | SAP Fiori for iOS Design Guidelines

Figma UI Design Kits

Figma UI Design Kit

With the updated SAP Fiori for Android and iOS Figma UI design kits, it’s now easier than ever to use the latest components and patterns in your mobile design. By using the design kits, you can quickly create a consistent user experience that enables app implementations at scale.

SAP Fiori for Android 7.0 UI Design Kits | SAP Fiori for iOS 9.2 UI Design Kits

SAP Fiori Mentor App

SAP Fiori Mentor App for Android and iOS

The SAP Fiori Mentor app is an interactive playground that allows you to explore the flexibility of mobile components and patterns available through the SAP BTP SDKs for Android and iOS. By adjusting component settings within the app, the behavior, interaction, and features of components can be previewed live. If you’re a developer, you can export code samples with predefined settings into your preferred development tool. If you’re a designer, you can easily understand the scope of functionality for a specific component and specify your designs with applicable parameters, and hand over the respective code snippets to your development partners. To provide some tangible examples of the actual UI component usage in apps, the best practices section provides a selection of app design examples. By highlighting specific areas, each app design indicates which UI components are used, so you can deep dive into their additional features.

Apple App Store | Google Play Store

Software Development Kits

SAP BTP SDKs for Android and iOS

The SAP BTP SDK for iOS and SAP BTP SDK for Android include the SAP Fiori framework that contains user interface components. These frameworks are standalone and do not have a dependency on other parts of the SDK. These libraries make it easier to create applications that conform to the SAP Fiori design language. On iOS, the SAP BTP SDK offers “SAP Fiori framework“ and the “Fiori” controls extend Apple’s UIKit/SwiftUI. These controls can be used programmatically or through storyboard files. On Android, the SAP BTP SDK UI components are contained in the “Fiori” library and extend Material Design controls.

SAP BTP SDK for iOS | SAP BTP SDK for Android


Experience matters. Follow our journey as we transform the way we build products for enterprise on