Intro

Collection view previews a sample of content and presents it in a highly visual layout, serving as an alternative to object cells. The information is displayed in a grid or carousel format.

Collection view of products on compact screen (left) and collection view of contacts on expanded screen (right)

Usage

Use a collection view when you want to display data in a grid.
Use a collection view when the image is the preferred element to identify each item.
Use a collection view as an entry point to a full list of all the items or to a detailed view of each of those items.

Don't

Don’t use a collection view to display only text.
Don’t use a collection view if an image is not a good identifier of the item or the majority of items do not have images in the data set. Use object cells instead.

Avoid mixing different types of objects in one collection view.

Anatomy

Basic Anatomy

A. Header

The header at the top left of the collection view describes what the content in the view represents.

B. Collection Cells

Each collection cell represents one item. It can be an object or a person/account. Collection cells can be displayed in one row with horizontal scroll or in a multi-row grid.

C. Footer

The footer is placed below the collection cells with a “See All” button and a total number of items in that collection. Users can tap the “See All” button to view all the items in a collection as a list of object cells. The footer is only used in a horizontal scroll collection view and is not available in a multi-row grid collection view.

Collection view anatomy

Collection Cell Anatomy

A. Container

The container holds all the content. The type of content displayed in each cell should be consistent within one collection view. The container height depends on the height of the elements being displayed.

B. Image

An image is required for a collection view. If an item does not have an image, use a placeholder image.

C. Title (Optional)

The title can be used to display titles for people or accounts.

D. Subtitle (Optional)

The subtitle can be used to display additional information about a person or an account.

E. Attribute Label (Optional)

The attribute label can be used to add further information. An optional icon can also be displayed in the attribute line.

Collection cell anatomy: contacts (top), products (bottom)

Variations

Collection View with Horizontal Scroll

The horizontal scroll collection view displays collection cells in a single horizontal line. Users can scroll left and right to view items in this collection. It provides a preview of the collection without taking up a lot of screen space. Users can use the “See All” button to view the complete collection in list view.

Horizontal scroll collection view sample

Collection View in Multi-Row Grid

The multi-row grid layout allows the collection cells to be stacked vertically. Since all items in the collection should be displayed, there is no need for a “See All” button. Users can scroll vertically to browse through the items on the page.

Collection view grid sample

Behavior and Interaction

Horizontal Scroll

Users can scroll horizontally to view more cells. Upon scroll, the collection cell is cut off at both ends of the view. To accommodate the vast range of device sizes, the size of a collection cell is dynamic to maintain the cutoff effect.

Horizontal scroll behavior of collection cells

If there are not enough items in the collection to scroll, align the cells to the left with 16dp padding between each cell on compact screens and 24dp on medium and expanded screens.

To prevent horizontal scrolling, arrange the first few items in a row in the same way horizontal scroll cells are positioned until there is not enough space for a full cell or there are no more items to be displayed.

Sample collection view of contacts on expanded screen

In the horizontal scroll collection view, the “See All” button shows the entire set of data which is displayed as a list of object cells.

Tapping "See All" to view all collection view items in a list

In all types of collection views, tapping on a single collection cell will navigate to a detailed view of the item. The actual destination depends on the context and type of data represented by the cell. For example, a collection cell of a team member may open up an employee’s profile page.