Android slices

Components can display small, customizable search content called slices as part of search results.


Usage

Slices display rich content and actions on components, appearing as part of search results in the Google search app. They can display a variety of content types, such as text, images, and actions.

Principles

Slices focus on one task, or a set of related tasks, and highlight the most important information. Slices reflect content or features from your app....

Focused

Slices focus on one task, or a set of related tasks, and highlight the most important information.

Related

Slices reflect content or features from your app.

Relevant

Slices provide only the information and controls needed to complete a task.

Navigation

Slices provide navigation to a specific feature, or content, in an app.

Slices can provide navigation to specific items.

Task completion

Slices allow users to complete tasks inline, such as by displaying controls like toggles or sliders.

Slices can display checklists and other controls.

Content discovery

Slices remind users of past interactions with an app’s content and features.

Slices can display rich content from past user interactions, such as videos.

When to use

Android’s Presenter determines the appropriate type of slice to display based on context. In search, the type of slice is influenced by how relevant a...

Android’s Presenter determines the appropriate type of slice to display based on context. In search, the type of slice is influenced by how relevant a slice is to the search results.


Anatomy

Slices contain a header and one or more rows of interactive content. Various elements are grouped together to create a slice, such as a list, grid, or images.

1. Header title - The title of the slice
2. Header subtitle - Supplementary text
3. Header actions - Actions
4. Image (Optional) - An image related to a row’s content
5. Row title - A row description
6. Row subtitle - Supplementary row text
7. Row action - Actions that apply to a single row

Content

DoMake each slice relevant to the user.
Don'tDon’t serve multiple purposes with a single slice. Create separate slices for each use case.
Don'tDon’t place unrelated search terms or content in a slice.

Actions

Slices display a limited set of actions related to a specific task.

Slices display a limited set of actions related to a specific task.

DoProvide a limited set of actions.
Don'tOnly show primary actions that relate to a specific task.

Component types

Slices can be displayed in different sizes, depending on their usage and presentation.

Large slice

Large slices consist of a header and one or more rows of content (with corresponding actions).

Large slices consist of a header and one or more rows of content (with corresponding actions).

A large slice

Small slice

Small slices are equal in size to the header of a large slice. The header area (used for subtitles on large slices) can be replaced...

Small slices are equal in size to the header of a large slice. The header area (used for subtitles on large slices) can be replaced with a summary.

A small slice

Behavior

Scrolling

Slices can contain overflow content, accessible from the “See more” button.

Slices can contain overflow content, accessible from the “See more” button.

Slices can contain additional content in an overflow menu.

Sensitive actions

For sensitive or personal tasks, inline actions can be performed in the slice UI but should not be confirmed there. Instead, they should provide a...

For sensitive or personal tasks, inline actions can be performed in the slice UI but should not be confirmed there. Instead, they should provide a link that takes the user into the app for confirmation.


Placement

Slices appear as part of search results in Android. The placement of a slice is determined by the search ranking algorithm.

A large slice in search results

Search suggestions

A search query can include a slice in search suggestions.

A small slice in search suggestions

Theming

Slices display the default system UI style.

Accent color

Slices can use an accent color to highlight important information or reinforce product branding.

Slices can use an accent color to highlight important information or reinforce product branding.

Highlight important information using coloring, with appropriate color contrast.
Don'tDon’t highlight multiple pieces of information, use multiple colors for highlighting, or highlight many elements.

Specs

Header

Row

Grid

Image

Slider

Progress Bar

Up next