Components Subheaders

Subheaders

Subheaders are list tiles that delineate sections of a list or grid list.

Subheaders may be displayed inline with tiles or associated with content. They are typically related to filtering or sorting criteria.

Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader.

Subheader types

List
Grid
Menu

Font

Roboto Medium 14sp

List subheaders Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Specs

Tile height: 48dp
Subheader font: Roboto Medium 14sp

Color

Subheader color can either be the secondary grey text value (54% black) or the primary color of the app.

In long lists of complex information, consider using colored subheaders to delineate content. Android settings contain an example of how color can be used on subheaders.

Grey subheader

Padding: 16dp
Subheader tile height: 48dp

Grey subheader in email inbox

Alignment

A subheader should be left-aligned with an avatar/icon in a list, unless there is a promoted action in that space.

If there is a floating action button left-aligned with the avatar/icon in a list, align the subheader with the text content.

With a left-aligned floating action button, the subheader is aligned with the text content.

Subheader tile height: 48dp
Floating action button tile width: 72dp

The subheader is in the primary color of the app and aligned with the text because of the left-aligned floating action button.

Grid subheaders Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Tile height: 48dp
Subheader font: Roboto Medium 14sp
Subheader is aligned 16dp from the left edge

The grid subheader is aligned 16dp from the left edge. The height of the grid subheader tile is 48dp.

Grid subheaders for the months of the year in a photo album

Menu subheaders Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Tile height: 48dp
Subheader font: Roboto Medium 14sp
Subheader is aligned 16dp from the left edge

Menu subheader specs

Subheader padding from left edge: 16dp
Tile height: 48dp

Example of menu subheader