Dividers

A divider is a thin line that groups content in lists and layouts.

Android check Web Not available Flutter iOS Not available

Usage

Dividers separate content into clear groups.

Principles

Subtle

Dividers should be noticeable in a layout, but not jarring.

Secondary

Dividers should only be used if elements cannot be separated using white space.

Infrequent

Use dividers sparingly, to create groupings rather than separate items.


Types

Full-bleed dividers separate content into sections and span the entire length of a layout. Inset dividers separate related content, anchored by elements that align with...

Full-bleed dividers
Full-bleed dividers separate content into sections and span the entire length of a layout.
Inset dividers
Inset dividers separate related content, anchored by elements that align with the app bar title.
Middle dividers
Middle dividers space related content and are centered in a layout or list.
Dividers with subheaders
Dividers can be paired with subheaders to help define content groupings.

Types

Full-bleed dividers

Full-bleed dividers separate content into sections.

Full-bleed dividers separate content into sections, such as:

  • Separating list and layout elements
  • Indicating where an element may expand
When lists don’t have an anchoring element (such as an icon), spacing may not be enough to separate content. Full-bleed dividers can help separate individual tiles.
A full-bleed divider in a navigation drawer


Inset dividers

Inset dividers separate related content, such as emails in an email thread. They should be used with anchoring elements such as icons or avatars, and...

Inset dividers separate related content, such as emails in an email thread. They should be used with anchoring elements such as icons or avatars, and left-aligned with the app bar title.

Inset dividers
Use inset dividers when there are anchoring elements such as an icon or avatar.
DoUse inset dividers to group items.
Don'tDon’t use dividers to separate individual items.

Middle dividers

Dividers can also be placed in the middle of a layout. They are best for separating related content, such prices on a receipt.

Dividers can also be placed in the middle of a layout. They are best for separating related content, such prices on a receipt.

An inset divider above a subheader
A full divider above a subheader

Dividers with subheaders

Dividers can be paired with subheaders to identify grouped content. Place dividers above subheaders to reinforce the subheader’s connection to content.

Dividers can be paired with subheaders to identify grouped content. Place dividers above subheaders to reinforce the subheader’s connection to content.

An inset divider above a subheader
A full-bleed divider above a subheader

Theming

Fortnightly Material Theme

This news app’s divider color has been customized using Material Theming. Fortnightly is a news app that uses Material Design components and Material Theming to...

Color

Fortnightly’s divider uses custom color

Element Category Attribute Value
Surface Surface Color
Opacity
#FFFFFF
100%
Divider On Surface Color
Opacity
#000000
12%

Owl Material Theme

This educational app’s divider color has been customized using Material Theming. Owl is an educational app that provides courses for people who want to explore...

Color

Owl’s divider uses custom color

Element Category Attribute Value
Background Background Color
Opacity
#0336FF
100%
Divider On Background Color
Opacity
#FFFFFF
20%

Specs

  • Measurement 1
 

Using dividers

Before you can use Material dividers, you need to add a dependency to the Material Components for Android library. For more information, go to the Getting started page.

MaterialDivider View

API and source code:

The MaterialDivider is a view that can be used in layouts to separate content into clear groups.

Note: Make sure to set android:layout_height="wrap_content" on the MaterialDivider to ensure that the correct size is set for the divider.

The full-bleed divider is displayed below:

Gray full-bleed divider example

On the layout:

By default, dividers will be full-bleed. You can use app:dividerInsetStart and app:dividerInsetEnd to achieve the look of an inset or middle divider:

Or in code:

MaterialDividerItemDecoration

API and source code:

The MaterialDividerItemDecoration is a RecyclerView.ItemDecoration, similar to a DividerItemDecoration, that can be used as a divider between items of a LinearLayoutManager. It supports both horizontal and vertical orientations.

A list with full-bleed dividers is displayed below:

Vertical list of five items with gray dividers between each item

In code:

By default, dividers will be full-bleed. To achieve the look of an inset or middle divider:

Vertical list of five items with gray dividers that have a start inset

In code:

Making dividers accessible

The divider is a decorative element. There are no special accessibility precautions for the divider.

Key properties

Dividers attributes

ElementAttributeRelated method(s)Default value
Thicknessapp:dividerThicknesssetDividerThickness
setDividerThicknessResource
getDividerThickness
1dp
Colorapp:dividerColorsetDividerColor
setDividerColorResource
getDividerColor
colorOnSurface at 12%
Start insetapp:dividerInsetStartsetDividerInsetStart
setDividerInsetStartResource
getDividerInsetStart
0dp
End insetapp:dividerInsetEndsetDividerInsetEnd
setDividerInsetEndResource
getDividerInsetEnd
0dp

Styles

ElementStyle
Default styleWidget.MaterialComponents.MaterialDivider

Default style theme attribute: ?attr/materialDividerStyle

See the full list of styles and attrs.

Theming dividers

Dividers support Material Theming and can be customized in terms of color.

Divider theming example

API and source code:

The following example shows a divider with Material Theming.

Pink full-bleed divider

Implementing divider theming

Using theme attributes in res/values/styles.xml (themes all dividers and affects other components):

or using default style theme attributes, styles and theme overlays (themes all dividers but does not affect other components):

More easily, you can also change the divider color via the ?attr/dividerColor attribute:

or using the style in the layout (affects only this divider):

No Android implementation guidance available
No Web implementation guidance available

Making dividers accessible

Flutter's APIs support accessibility setting for large fonts, screen readers, and sufficient contrast. For more information, go to Flutter's accessibility and internationalization pages.

For more guidance on writing labels, go to our page on how to write a good accessibility label.

Anatomy and key properties

The following shows the anatomy of a divider:

Divider anatomy

Divider

 Property
ColorWithin the Divider widget use the color parameter
SpaceWithin the Divider widget use the height parameter. Within the VerticalDivider widget use the width parameter.
IndentWithin the Divider widget use the indent parameter
End IndentWithin the Divider widget use the endIndent parameter
ThicknessWithin the Divider widget use the thickness parameter

Types

There are 4 types of dividers:

  1. Full Bleed divider
  2. Inset divider
  3. Middle divider
  4. Vertical divider

Full-bleed dividers

Full-bleed dividers separate content into sections and span the entire length of a layout.

Full-bleed dividers example

The following example shows a list with full-bleed dividers:

Full bleed divider

Inset dividers

Inset dividers separate related content, anchored by elements that align with the app bar title.

Inset divider example

The following example shows two lists separated by an inset divider and a subheader

Inset divider

Middle dividers

Middle dividers space related content and are centered in a layout or list.

Middle divider example

The following example shows a middle divider separating a list of items and their prices and the total cost:

Middle divider

Flutter Vertical Dividers

Vertical divider offers the same parameters as the regular divider but instead the divider is vertical.

VerticalDivider

Vertical divider

Theming dividers

Divider

The following shows an inset divider with Shrine theming

No Flutter implementation guidance available
No iOS implementation guidance available

Up next