This article provides an overview of the topics that have been added or changed based on the controls available in the SAP BTP SDK for Android.

SAP BTP SDK for Android 7.1

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. 

Token hierarchy shows the different levels of design tokens
Token hierarchy shows the different levels of design tokens

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

Sample card using the new H6 and Subtitle 2 font style
Sample card using the new H6 and Subtitle 2 font style

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.

Example of calendar view on mobile
Example of calendar view on mobile

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.

Information
Use the new card, as the following card components will be replaced in the future: data table card, list card, and object card.
Sample cards in staggered layout on mobile
Sample cards in staggered layout on mobile

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. 

Sample Input & Selection components with updated font style
Sample Input & Selection components with updated font style

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.

Sample KPIs in a widget
Sample KPIs in a widget

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.

Rating controls in a list
Rating controls in a list

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.

Sample status info labels
Sample status info labels

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.

Step progress indicator in horizontal view
Step progress indicator in horizontal view

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.

Sample tags in a card
Sample tags in a card

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.

Empty state example on mobile
Empty state example on mobile

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.

Widgets on an Android device
Widgets on an Android device

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.
Introduce color variables in UI Kit
Introduce color variables in UI Kit

SAP BTP SDK for Android 7.0

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.

Menu renamed to Input & Selection
Menu renamed to Input & Selection

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.

Accessibility article update
Accessibility article update

Colors

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

Color article updates
Color article updates

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.

Tint (1), neutral (2), and negative buttons (3)
Tint (1), neutral (2), and negative buttons (3)

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. 

User interaction of selecting and applying values
User interaction of selecting and applying values

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.

Persistent footer on mobile
Persistent footer on mobile

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.

Success state behavior of a circular progress indicator
Success state behavior of a circular progress indicator

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. 

Mobile timeline view sample screen
Mobile timeline view sample screen

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.

Mobile timeline preview sample screen
Mobile timeline preview sample screen

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. 
Info card for Buttons with added technical names
Info card for Buttons with added technical names

SAP BTP SDK for Android 6.0

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.