- To structure information or display a group of items that may or may not be actionable
- Stack items vertically to organize related information, such as settings or options
- Showcase key features or services with icons and brief descriptions
- Not suitable for displaying complex content requiring extensive explanation
- Avoid using ListAction for long lists of data. It's better for highlighting and navigating
- When stacked vertically, maintain consistent spacing and alignment for a harmonious layout
- Use consistent headings for each section on the same screen
Group related items together to aid comprehension and streamline navigation. Consider dividers to break up groups that differ in purpose.
Don't overuse icons. Pick easily recognizable icons that are directly related to the list item's purpose.
Keep text succinct so row information is easy to scan and comfortable to read.
Use more than two lines for headers and three lines of subtext as it reduces scanability and can pose issues with internationalization, spacing, and comprehension.
- Make sure the ListAction component includes appropriate list markup, with screen readers announcing the number of items, along with each item.
- Make sure that interactive elements in list items, such as checkboxes or buttons, are both focusable and usable.
- Include descriptive alt text for icons and labels that convey the purpose of each item.
People use Android’s accessibility features, such as TalkBack and dynamic text sizing to personalize how they interact with their device. Supporting these personalizations ensures that everyone has a great user experience. See Material Design and development documentation about accessibility for Android:
The default ListAction items don't include a start item and only display text, but they still allow for end items to be displayed.
ListAction items can display three different start items.
Commonly used to represent users, profiles, comments or messages in a list.
Using icons can effectively communicate meaning or context, thereby enhancing the visual information conveyed by list items. Icons sit in-line with header text. The icon start item supports all Gestalt icons.
This is usually used when a visual representation is necessary and can also be used to represent a Pin or board.
ListAction items can display a variety of end items.
Used to perform a specific action related to an item in the list, such as following or unfollowing a user.
Allows users to pick multiple items within a list
Enables users to pick a single option from a list
Toggles a specific feature on or off. Typically used for binary settings like activating dark mode.
Represents an action moving the user forward or about that specific list item. Typically an arrow moving the user to a new page. The icon end item supports: arrow-forward, arrow-up-right, check and add.
Additional information at the end of the list item
- Text + Icon
Additional information at the end of the list item with the addition of a specific icon button action
Text + Icon
End item placement
Checkbox, Select, and Switch end items will always appear in line with the title. All other end items will appear centered within the container of the ListAction item.
Checkbox, Select, Switch
All other end items
- Use short, meaningful labels that succinctly describe the purpose of each item
- Avoid truncation. If your copy is longer than three lines, consider revising the text.
- For headings use nouns or short phrases with title-style capitalization, and don't use punctuation.
- Be sure to localize the ListAction text. Note that localization can lengthen text by 20 to 30%.
- Allow text to wrap as needed. However consider adjusting the text if headers are longer than two lines and subtext is longer than three lines.