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