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.
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. This allows for the UI to translate to the various device displays regardless of pixels density.
8dp/4dp Increment system
SAP Fiori for Android layouts are designed in increments of 8dp and 4dp 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.
- Use the 8dp/4dp increment in all aspects of the design.
- Do not use measurements that do not fall within the 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.
- Use the proper keylines defined for each device size (mobile or tablet).
- Do not use tablet keylines on mobile and vice versa. Do not alternate alignments of content and components within a screen.
Padding is the horizontal or vertical space between elements. Padding maintains consistency and allows for ease of scalability.
- Use padding in between elements within a component.
- Do not add additional padding between a keyline and an element.
Height is the height of a component. Elements and measurements within the component should add up to an increment of 8dp. This height influences the overall layout.
Height should be equal to an increment of 8dp.
Do not add spacing between elements if it is not an increment of 8dp/4dp.
Consider accessibility when designing the spacing of interactive elements. Provide ample space to place elements and consider a minimum of 48dp x 48dp touch target with 8dp padding between multiple touch targets.
- Use a minimum of 48dp touchable area.
- Use 8dp padding in between touchable areas.
- Do not use touch targets below 48dp in size.
- Do not place touch targets without padding next to each other.