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](https://m3.material.io/foundations/layout/canonical-layouts/feed).
![](https://developer.android.com/static/images/design/ui/mobile/layout-basics-22-canonical-layouts.png) **Figure 21:** Canonical layouts

The Android framework includes specialized components that make implementation
of the layouts straightforward and reliable using either [Jetpack Compose](https://developer.android.com/develop/ui/compose/layouts/adaptive/support-different-display-sizes)
or [views](https://developer.android.com/develop/ui/views/layout/declaring-layout) 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](https://www.figma.com/community/file/1164313362327941158) Figma file provides multiple layout
examples. The following example shows a one-dimensional collection of content.
![](https://developer.android.com/static/images/design/ui/mobile/layout-basics-23-one-dimension-collection.png) **Figure 22:** One dimensional collection of content

Explore [Material 3 Lists](https://m3.material.io/components/lists/overview) 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](https://m3.material.io/components/cards/guidelines#580b3156-4928-45cc-953e-dec3b65a6323).
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.

<br />

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](https://m3.material.io/foundations/layout/canonical-layouts/feed).

You can implement a feed layout in Compose with [Lazy lists or lazy grids](https://developer.android.com/jetpack/compose/lists#lazy),
or in Views with [`RecyclerView`](https://developer.android.com/develop/ui/views/layout/recyclerview) or [`CardView`](https://developer.android.com/develop/ui/views/layout/cardview).

![](https://developer.android.com/static/images/design/ui/mobile/layout-basics-24-feed-layout.png)
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](https://m3.material.io/foundations/layout/canonical-layouts/supporting-pane#b5f0bc74-9bb4-426b-b846-4b182cde1c76).
![](https://developer.android.com/static/images/design/ui/mobile/layout-basics-25-bottom-sheets.png) **Figure 24:** Bottom sheets can act as supporting content to the primary view

Learn about [M3 guidance for bottom sheets](https://m3.material.io/components/bottom-sheets/overview).