Usage guidelines
- 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 information requiring extensive explanation
- Avoid using ListAction for long lists of data. It's better for highlighting and navigating
Best practices
- 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.
Accessibility
- 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:
Accessbile design on Android
Accessible development on Android
Design tokens
Anatomy
Variants
Defualt
The default ListAction items don't include a start item and only display text, but they still allow for end items to be displayed.
Start items
ListAction items can display three different start items.
- Avatar
Commonly used to represent users, profiles, comments or messages in a list. - Icon
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. - Image
This is usually used when a visual representation is necessary and can also be used to represent a Pin or board.
Avatar
Icon
Image
ListAction items can display a variety of end items.
- Button
Used to perform a specific action related to an item in the list, such as following or unfollowing a user. - Checkbox
Allows users to pick multiple items within a list - Select
Enables users to pick a single option from a list - Switch
Toggles a specific feature on or off. Typically used for binary settings like activating dark mode. - Icon
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. - Text
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
Button
Checkbox
Select
Switch
Icon
Text
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
Writing
- 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.
Localization
- 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.
