Divider

Usage

Dividers should be used as visual cues that separate content, groups, or sections, either horizontally or vertically. Dividers provide clarity of layout, improve readability, support a cleaner information hierarchy, and help guide users through their journey.

Divider colors should be subtle; enough contrast to be visible but not so strong that they become a dominant visual element.

Reference Material Design for general guidance when designing for Android.

Design properties

Types

Horizontal full-width

Used between vertically stacked items, such as lists, rows, and sections. The default horizontal divider spans the full width of the container or screen with no side margins.

Horizontal inset

Horizontal inset dividers have a specified margin on the leading edge, and no margin on the trailing edge.

Horizontal middle-inset

Horizontal middle-inset dividers have a specified margin on the leading and trailing edges, appearing optically center-aligned in relation to adjacent content.

Horizontal with subhead

Horizontal dividers with subhead are used to separate grouped content while providing contextual meaning or category labeling between sections. They visually divide content and use text to clarify or title the following group, improving scanability, readability, and content hierarchy within layouts.

Vertical

Vertical dividers extend the full height of their container to separate horizontally aligned content or interactive regions. They create clear visual boundaries between sections or panes without drawing focus away from the content.

Vertical inset

Vertical inset dividers have a specified margin on the top edge, and no margin on the bottom edge.

Vertical middle-inset

Vertical middle-inset dividers have a specified margin on the top and end bottom edge, appearing optically middle-aligned in relation to adjacent content.

Behavior and interaction

Behavior

• Static and non-interactive.
• Responds to layout changes, including theming and viewport sizes.
• Provides consistent separation across screen sizes.
• With inset dividers, align the inset with leading text or icon baselines for visual rhythm. Apply the same rules to middle-inset dividers on both leading and trailing edges.
• Avoid mixing multiple inset values within the same layout.

Positioning

• Align flush with container edges. Margins are built into the components so that all variants should be used at full-width.
• Should not be nested within padded elements that reduce the dividers visual span.

Changelog