Intro

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