Components Lists
This document is a preview.

Google ©

Privacy & Terms

Lists

Lists present multiple line items in a vertical arrangement as a single continuous element.

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

A list consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for tiles.

Tiles hold content, and can vary in height within a list.

Lists are best suited to presenting a homogeneous data type or sets of data types, such as images and text, optimized for reading comprehension, with the goal of differentiating between like data types or qualities within a single type of data.

If more than three lines of text needs to be shown in list tiles, use cards instead.

If the primary distinguishing content consists of images, use a grid list.

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

Tile content

List tiles present collections of related content in a consistent format, using hierarchy to enhance readability by prioritizing a consistent type or set of content. For example, emphasizing an avatar and text snippet over a time stamp. This helps users more easily find the distinguishing information they are looking for within the collection of content.

List tiles can contain up to three lines of text, and the amount of text can vary between tiles within the same list. To display more than 3 lines of text, use a card.

Bias the most distinguishing content in a tile towards the left side of the tile, and to the first line in a tile with multi-line content.

Tile actions

The majority of space on a list tile should be dedicated to the primary action.

Because actions are not distinguishing elements of list tiles, place supplemental actions on the right-hand side of the tile.

Primary and supplemental actions, such as play, zoom in, delete, and select, are immediate and typically do not have a submenu of options (action overflow) within the list.

Actions can open a subsequent view such as a card or hovercard.

Primary actions
  • Fill the entire tile, and therefore are not represented via icons, text, etc.
  • Are consistent throughout tiles in a specific list. For example, the primary action for all tiles in a single list of music would be to play a song, or in a list of emails, to open to read an email.
Supplemental actions
  • Are represented in tiles with icons, secondary text, etc.
  • Are functionally consistent throughout tiles in a specific list, for example, an icon that indicates whether someone is online.
  • Are placed in a consistent location within the tiles of a specific list.

Avoid creating visual noise by repeatedly using supplemental actions in tiles, for example, by displaying a share action in every tile. Toggles, such as stars or pins, are an exception because they provide meaningful information by displaying state.

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

Scrolling

Lists scroll only vertically.

Gestures

Per-tile swipe actions should be consistent within lists.
Where appropriate, tiles can be moved between a list and a drop target (for example, moving a file into a folder).
Where appropriate, tiles can be picked up and manually reordered within a list.

Tile filtering and sorting

List tiles can be programmatically sorted or filtered by date, file size, alphabetical order, or other parameters
Do.
Don't.

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

In a single-line list, each tile contains a single line of text. The amount of text can vary between tiles within the same list.

Element
Context

In a two-line list, each tile contains a maximum of two lines of text. The amount of text can vary between tiles within the same list.

Element
Context

In a three-line list, each tile contains a maximum of three lines of text.

The amount of text can vary between tiles within the same list.

Element
Context

Single-line list

Text only

Font: Roboto Regular 16 sp

Tile height: 48 dp

Text padding: 16 dp

Add 8 dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Element
Element
Context

Icon with text

Font: Roboto Regular 16 sp

Tile height: 48 dp

Left icon padding: 16 dp

Text left padding: 72 dp

Text top and bottom padding: 16 dp

Add 8 dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Element
Element
Context

Avatar with text

Font: Roboto Regular 16 sp

Tile height: 56 dp

Left avatar padding: 16 dp

Text left padding: 72 dp

Text top and bottom padding: 20 dp

Add 8 dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Element
Element
Context

Two-line list

Text only

Primary text font: Roboto Regular 16 sp

Secondary text font: Roboto Regular 14 sp

Tile height: 72 dp

Text padding: 16 dp

Add 8 dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Element
Element
Context

Avatar with text

Primary text font: Roboto Regular 16 sp

Secondary text font: Roboto Regular 14 sp

Tile height: 72 dp

Left avatar padding: 16 dp

Text left padding: 72 dp

Text top and bottom padding: 16 dp

Center-align icon with text area.

Add 8 dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Element
Element
Context

Avatar with text and icon

Primary text font: Roboto Regular 16 sp

Secondary text font: Roboto Regular 14 sp

Tile height: 72 dp

Left avatar padding: 16 dp

Text left padding: 72 dp

Text top and bottom padding: 16 dp

Right icon padding: 16 dp

Add 8 dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Element
Element
Context

Three-line list

Text only

Primary text font: Roboto Regular 16 sp

Secondary text font: Roboto Regular 14 sp

Tile height: 88 dp

Text padding: 16 dp

Add 8 dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Element
Element
Context

Avatar with text

Primary text font: Roboto Regular 16 sp

Secondary text font: Roboto Regular 14 sp

Tile height: 88 dp

Left avatar padding: 16 dp

Left text padding: 72 dp

Top-align avatar with primary text.

Add 8 dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Element
Element
Context

Avatar with text and icon

Primary text font: Roboto Regular 16 sp

Secondary text font: Roboto Regular 14 sp

Tile height: 88 dp

Left avatar padding: 16 dp

Text left padding: 72 dp

Text top and bottom padding: 16 dp

Right icon padding: 16 dp

Top-align avatar and icon with primary text.

Add 8 dp padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.

Element
Element
Context