List items

A list view displays content as line items in a single-column list that scrolls vertically. This view is best when users rely on reading text and viewing data to make their selection.

List items require less vertical space than grid items, allowing more items to be displayed on the screen.


Anatomy

In a list view, each row contains a tile representing one list item. Primary actions can fill the tile, so that users can initiate action from anywhere in the tile. For supplemental actions that are represented by icons and text, only the region containing the icons and text is actionable.

1. Primary icon
2. Switcher button on
3. Switcher button off
4. Primary and secondary text
5. Content tile

Specs

Single-line list item

Two-line list item

Two-line list item reversed

Multiple-line list item with header

Multiple-line list item without header

List item with text overflow

List item with split actions

Indicator icon placement in list items


Scaling layouts

These reference layouts show how to adapt list items to accommodate screens of various widths and heights. (Width and height categories are defined in the Layout section.) Note that all pixel values are in rendered pixels, before any down-sampling or up-sampling occurs.

Standard, wide, and extra-wide screens

Standard, wide, and extra-wide screens with content tile

Super-wide screens


Styles

Typography

Type style Typeface Weight Size (dp)
Body 1 Roboto Regular 32
Body 3 Roboto Regular 24

Color

Element Color(day mode) Color (night mode)
Primary type / icons White White @ 88%
Secondary type / icons White @ 72% White @ 60%
Divider line White @ 22% White @ 12%
List item background Black Black

Sizing

Element Size (dp)
List item height 96 (short screens) / 116 (standard screen) / 128 (tall screen)
Primary icon 44
Tertiary icon 24
Content tile List item height minus 1dp
Medium avatar 76
Divider line thickness 1

Examples

Settings list - day
Settings list - night
Settings list - day
Settings list - night
Media list - day
Media list - night