Updated: September 22, 2018
Latest Version 0.3

Get Started

Intro

SAP Fiori for Android is made up of a wide variety of design foundations, components, and patterns that is packaged together in a harmonious system. Learn more about each detail to understand how you can use it for your own application.

Foundation of SAP Fiori for Android

 

SAP Fiori Design Principles

Learn about the design principles that make up SAP Fiori and how it is essential for creating effective and engaging apps.

 

Type System

Typography plays a crucial role in establishing hierarchy in the content with great legibility and scalability. Discover how SAP Fiori for Android utilizes SAP Fiori’s new proprietary font.

 

Colors

Color is essential in setting a delightful Fiori-based user experience that guides the user through the functions of the application in a concise manner. Find out more about the color palette to understand how to use it effectively.

 

Iconography

The icons of SAP Fiori for Android follows the Material Design icon system. In the case that there is a need for a custom icon, check this guide for creating your own.

 

Layout

The layout of the app follows certain logic that makes the app accessible, scalable, and readable. Components are designed in increments that make it easier to scale between different devices. Keylines are device-specific lines where content is aligned in order to maintain consistency in composition within an interface. Learn about the rules behind the layout to create an organized and clean interface.

 

Material Design

Material Design, Google’s design language, is used for all Google-developed native Android apps and has recently been updated to a more modern design system. SAP Fiori for Android applies the latest Material Design practices to bring the freshest UI and UX design principles to your SAP Fiori for Android application. Check out the new Material Design guidelines for more information on their updated design language.

UI Components

Components are the building blocks for any SAP Fiori for Android application. Each component serves a unique functional purpose to meet the application requirements.

 

Basic Components

Basic Components are a group of components that follow exactly how Material Design defines them as they are integral to the Android UX. SAP Fiori for Android colors and typography are applied to fully integrate these components with the rest of the application and to maintain the same visual language across all components.

Bottom Sheet
Buttons
Dialogs
Menus
Pickers
Progress Indicators
Snackbar

 

Form Cells

Form Cells are components that the user can interact with for making decisions or providing information. There are several types of different inputs, depending on what the user needs to provide.

Checkbox
Chips
List Picker Form Cell
Radio Button
Sliders
Switches
Text Inputs
Time Picker Form Cell

Patterns

Patterns define how you can use designs – from how they function to how the user moves within a specific flow from screen to screen.

Resources

Download the design kits to start designing your own SAP Fiori for Android app.

 

Resources

Download design stencils for Sketch and font files to start designing your own SAP Fiori for Android app.