Density-Independent Pixels (dp)

SAP Fiori for Android uses a system of pixel units (dp) that allows for a design to scale to screens with different pixel densities. The UI therefore adapts to various device displays regardless of pixel density.

Increment System

SAP Fiori for Android layouts are designed in increments of 4dp and 8dp for smaller elements for scalability purposes. Using an incremental system allows for all measurements in a design to be predictable and easier to scale when designing on multiple devices.

The 4dp/8dp incremental system enables a variety of spacing options from 4dp to 52dp

Spacing

Margins and Padding

Margins are the spaces between the left/right window edge and the component. Typically, these margins are set to 16dp or 24dp, depending on the window size. For larger window size classes, margins can be adjusted more flexibly to improve legibility, similar to the design element of letterboxing.

Padding is the horizontal or vertical space between elements within a component. Padding ensures consistency and allows for easy scalability.
The padding between elements within a component should add up to an increment of 4dp. This height affects the overall vertical layout.

Compact screen size with 16dp margins (left) and medium/expanded screen size with 24dp margins (right)

Spacers

In a layout, a spacer is the space between two panes. Spacers are 24dp wide and can have a drag handle to adjust the size and position of the panes. The touch target of the handle slightly extends over the panes.

Medium/expanded size with a spacer of 24dp to separate the panes

Adaptive Color

In adaptive layouts, color plays a significant role. The bars at the top and bottom edges of the screen derive their colors from adjacent components. For example, the status bar takes on the color of the top app bar. In the resting state, the top app bar shares the same color as the surface, and so does the status bar. Upon scrolling, the color of the top app bar changes, and the status bar updates its color accordingly. If no component is adjacent to the status bar and system bar, they remain transparent, allowing the underlying surface and content to show through.

(From left to right) Two positive examples showing how the status and system bar adapt their colors to match adjacent components and one negative example where the bars ignore the surrounding components

On split screens, there can be two status bars A and B, for example, on foldable devices in multi-window mode.

Two status bars on a foldable device side by side in portrait mode (left) and one status bar in landscape mode (right)

Parts of Layout

For a seamless transition between different window size classes and to provide the user with better orientation, three regions play an important part:

• App Bar
• Body
• Navigation

Schematics illustrating the three main UI regions: app bar (A), body (B), and navigation (C)

App Logo

If an application has five or fewer navigation targets, the app logo can be featured as the leading element in the top app bar. We suggest displaying the app logo only on the home screen.

App logo in top app bar

If there are more than five primary destinations or secondary/tertiary navigation targets, the app logo is replaced by the menu icon as the leading element in the top app bar to prioritize functionality. The app logo is then displayed in the modal drawer.

Interaction of app logo moving to the navigation drawer

Touch Target

Accessibility is key when designing the spacing of interactive elements. It’s essential to provide sufficient space to place elements, aiming for a minimum touch target size of 48dp x 48dp with 8dp padding between multiple touch targets.

48dp x 48dp touch targets

Resources

Material Design 3: Understanding Layout, Applying Layout