Foundation Layout

Intro

Layout utilizes several spatial practices, such as increments, keylines, padding, and vertical spacing. SAP Fiori for Android applies these practices to keep content aligned, organized, and accessible.

Layout with 16dp margins and 72dp keyline
Layout with 16dp margins and 72dp keyline

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 4 dp and 8 dp 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.

8dp/4dp increment system
8dp/4dp increment system
Do

Use the 4 dp/8 dp increment in all aspects of the design.

Don't

Do not use measurements that do not fall within the 4 dp/8 dp increment system.

Keylines

Keylines dictate the alignment of visual elements and also define their placement from the edge of the screen. Keylines differ between devices due to the differences in pixel density and screen size.

To ensure that an app maintains a clean and orderly layout, all visual elements and content must align to keylines. By aligning to keylines, the app content maintains visual and structural consistency across an entire application.

Do

Use the proper keylines defined for each device size (mobile or tablet).

Don't
  • Do not use tablet keylines on mobile and vice versa.
  • Do not alternate alignments of content and components within a screen.

Padding

Padding is the horizontal or vertical space between elements. Padding maintains consistency and allows for ease of scalability.

Specifications on mobile (top) and tablet (bottom)
Specifications on mobile (top) and tablet (bottom)
Do

Use padding between elements within a component.

Don't

Do not add additional padding between a keyline and an element.

Height

Height is the height of a component. Elements and measurements within the component should add up to an increment of 4dp. This height influences the overall layout.

Component heights in increments of 4dp
Component heights in increments of 4dp
Do

Height should be equal to an increment of 4 dp.

Don't

Do not add spacing between elements if it is not an increment of 4 dp.

Touch Target

Consider accessibility when designing the spacing of interactive elements. Provide ample space to place elements and consider a minimum of 48 dp x 48 dp touch target with 8 dp padding between multiple touch targets.

48dp x 48dp touch targets
48dp x 48dp touch targets
Do
  • Use a minimum of 48 dp touchable area.
  • Use 8 dp padding in between touchable areas. 
Don't
  • Do not use touch targets below 48 dp in size.
  • Do not place touch targets without padding next to each other.

Resources

Material Design: Spacing Methods