Content composition and structure

Build up a flexible flow and rhythm with structure and containment methods for your content.

1. Base structure

To begin creating a solid structure with consistent guardrails, add margins and columns to your layouts.

Margins provide spacing on the left and right edges of the screen and content. A standard margin value for compact sizing is 16 dp, but margins should adapt to accommodate larger screens. Your app's body content and actions must stay within and align with these margins.

You can also ensure inset safe zones or insets at this step. System bar insets prevent crucial actions from falling under system bars. See Draw your content behind the system bars for details.

Figure 8: Margins (1) and system bar inset (2)

Use columns to build a flexible grid structure for consistent alignment, and to provide vertical definition to a layout by dividing content within the body area. Content goes in the areas of the screen containing columns. These columns lend structure to your layout, providing convenient structure to arrange elements.

Figure 9: Mobile screens are often divided into four columns

Use a column grid to align content with an underlying grid but retain flexible sizing. The column grid can accommodate different form factors by changing the column sizes and number of columns as needed by the screen size at certain points while allowing content to also scale. Avoid being too granular with the column grid, this is what the baseline grid is for: providing consistent spacing units.

Be careful of establishing an accompanying grid of rows as it can restrict horizontal content scaling across orientations and form factors, typically establishing padding rules will provide the needed visual consistency.

Place content

Starting to add copy to the layout structure. Margins protect content from the screen's edges. Columns provide a consistent spacing and alignment structure.

2. Apply containment

Use containment to visually group elements.

Containment refers to using white space and visible elements together to create a visual grouping. A container is a shape that represents an enclosed area. In a single layout, you can group together elements that share similar content or functionality and separate them from other elements using open space, typography, and dividers.

You can group similar items together with white space or visible division to help guide the user through content.

Figure 10: Breaking content into two larger groupings of header and primary copy

Implicit containment uses white space to visually group content to create container boundaries while explicit containment uses objects like divider lines and cards to group content together.

The following figure shows an example of using implicit containment to contain the header and primary copy. The column grid is used to align and create groupings. Highlights are explicitly contained within cards. Using iconography and type hierarchy for greater visual separation.

Figure 11: Example of implicit containment

3. Position content

Android has multiple ways to handle content elements in their respective containers that can help position them appropriately, including gravity, spacing, and scaling.

Figure 12: Layout example showing containment boundaries and position of elements

Gravity is a standard for placing an object within a potentially larger container for specific use cases. The following figure shows examples of positioning objects start and center (1), top and center horizontal (2), bottom left (3), and end and right (1).

Figure 13: Positioning gravity of child content and parent views

4. Scale content

Scaling is crucial to accommodate dynamic content, device orientation, and screen sizes. Elements can remain fixed or be scaled.

Noting how images are displayed within their containers with scaling and position is important to ensure it appears how you want the image to look despite the device context, otherwise the image's primary focus could appear cut off, images could be too small or large for the layout, or other undesirable effects.

Figure 14: Center-cropped image, which ensures the plant is centered within the container regardless of device size

Content that is not notated can appear differently than you expect or want.

Figure 15: Content that is not notated can appear in unexpected ways

Pinned content

Many elements have built in interactions, scrolling, and positioning with slots or scaffolds. Some elements can be modified to stay fixed instead of reacting to scrolling, for example floating action buttons (FABs) that house critical actions.

Alignment

Use AlignmentLine to create custom alignment lines, which parent layouts can use to align and position their children.

Do

Establish consistent spacing between like elements.

Don't

disrupt readability by inconsistently spacing like elements, which can make designs appear haphazard.

Component layout

Material 3 components provide their own configurations and states for interaction and content.

Compose provides convenient layouts for combining Material Components into common screen patterns. Composables such as Scaffold provide slots for various components and other screen elements. Read more about Material Components and Layout.