Utilize canonical layouts as a starting point, ready-to-use compositions that help layouts adapt for common use cases and screen sizes. These layouts are aesthetic and functional, and derived from Material 3 guidance.
The Android framework includes specialized components that make implementation of the layouts straightforward and reliable using either Jetpack Compose or views APIs.
List-detail layout
A list-detail layout enables users to explore lists of items that have descriptive, explanatory, or other supplementary information—the item detail. For compact screen sizes, only the list or detail view are visible. Displaying a collection of content in a row-based layout, lists make up the most common form of layouts for apps. List-detail is ideal for messaging apps, contact managers, file browsers, or any app where the content can be organized as a list of items that reveal additional information.
Content can be static or dynamic.
- Dynamic content is content that your app serves on-the-fly, and is ideal for showing user-generated content or reflect the user's preference or actions. For example, imagine a photo app with a scrollable list of user-generated photos, which is unique for each user and changes as the user uploads more images. These images are dynamic content.
- Static content represents hard-coded content, which is modifiable only by making changes directly to your app's code. Examples of static content are images and text that every user might see.
The Now in Android Figma file provides multiple layout examples. The following example shows a one-dimensional collection of content.
Explore Material 3 Lists for more design guidance on list components and specs.
Feed layout
A feed layout arranges equivalent content elements in a configurable grid for quick, convenient viewing of a large amount of content. Learn more on Material 3 guidelines for using cards in a collection. Feeds can be list- or grid- based configuration on compact displays, typically in cards or tiles. Content can be dynamic, meaning it is "fed in" from a dynamic external source such as an API.
A grid layout is composed of both rows and columns made up by implied or explicit containment principles. A grid layout can be more rigidly applied or staggered to vary the rows and columns. Both should have consistent application of spacing and logic to avoid confusing users. Explore Material 3 guidelines about designing feeds.
You can implement a feed layout in Compose with Lazy lists or lazy grids,
or in Views with RecyclerView or CardView.
For example, here a photo gallery and podcasts in a grid layout are common feed formats.
Support pane layout
A mobile view may require supporting content or controls. Typically in the form of sheets or dialogs, they can help the primary view stay focused and uncluttered. Check out M3 guidance for using the supporting pane canonical layout.
Learn about M3 guidance for bottom sheets.