Stay organized with collections
Save and categorize content based on your preferences.
Understand the Compose layout templates and sample design layouts in order to
design and build unique app screens.
Most apps use either a non-scrolling or scrolling layout, consisting of the
following elements:
Time text: Given that the device is a watch, we recommend showing the
time text even when in an app journey (optional, but recommended).
Page title: Wayfinding and reminders of where in the journey the user
is (optional, but recommended).
Scroll indicator: Only on scrolling-layouts; indicates that there's
more below the screen fold.
Action buttons: Recommended at the bottom; confirm, conclude, or
continue the user-journey.
App layout sections
Top section
The top section has the option of Time Text, a compact button, and title serving
as a way finder and clear navigation. All are optional.
A compact button can be used in special cases where the page is very long, and a
search or action button will help the user navigate the list without having to
scroll all the way to the bottom.
Middle section
The middle section can contain any of the available Compose (non-fullscreen),
or custom components in a list. This section can contain additional headings to
group content, and the scrollbar.
All components within the middle content section should be responsive, filling
the available width up until the percentage margins. All scrolling layouts will
have scaling-lazy-column behavior, showing the components scaling and fading off
screen.
Bottom section
The bottom section provides space for primary and secondary action buttons, or
can be left empty if this is the end of a journey.
It is recommended to use an end-of-list Edge-Hugging Button as it utilizes the
limited space and complements the round screen.
More than one action can be needed, which can appear in a button stack, or
two-icon button group.
Non-scrolling app views
With title
Without title
With title and no bottom section
Without title or bottom section
Scrolling app views
With title
Without title
With title and no bottom section
Without title or bottom section
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-06-04 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-06-04 UTC."],[],[],null,["# Summary\n\nUnderstand the Compose layout templates and sample design layouts in order to\ndesign and build unique app screens.\n\nMost apps use either a non-scrolling or scrolling layout, consisting of the\nfollowing elements:\n\n- **Time text:** Given that the device is a watch, we recommend showing the time text even when in an app journey (optional, but recommended).\n- **Page title:** Wayfinding and reminders of where in the journey the user is (optional, but recommended).\n- **Scroll indicator:** Only on scrolling-layouts; indicates that there's more below the screen fold.\n- **Action buttons**: Recommended at the bottom; confirm, conclude, or continue the user-journey.\n\nApp layout sections\n-------------------\n\n**Note:** These sections don't apply to preset component layouts---such as dialogs, confirmation overlays, pickers, and switchers---which have specific layouts, margins, and custom components. \n**Top section**\n\n\u003cbr /\u003e\n\nThe top section has the option of Time Text, a compact button, and title serving\nas a way finder and clear navigation. All are optional.\n\nA compact button can be used in special cases where the page is very long, and a\nsearch or action button will help the user navigate the list without having to\nscroll all the way to the bottom.\n\n**Middle section**\n\n\u003cbr /\u003e\n\nThe middle section can contain any of the available Compose (non-fullscreen),\nor custom components in a list. This section can contain additional headings to\ngroup content, and the scrollbar.\n\nAll components within the middle content section should be responsive, filling\nthe available width up until the percentage margins. All scrolling layouts will\nhave scaling-lazy-column behavior, showing the components scaling and fading off\nscreen.\n\n**Bottom section**\n\n\u003cbr /\u003e\n\nThe bottom section provides space for primary and secondary action buttons, or\ncan be left empty if this is the end of a journey.\n\nIt is recommended to use an end-of-list Edge-Hugging Button as it utilizes the\nlimited space and complements the round screen.\n\nMore than one action can be needed, which can appear in a button stack, or\ntwo-icon button group.\n\n\u003cbr /\u003e\n\n| **Note:** The system places the time text and scrollbar components. They should be in your layouts to indicate that they're turned on in the build. The time text can include other relative information in your app.\n\nNon-scrolling app views\n-----------------------\n\n**With title** \n**Without title**\n\n\u003cbr /\u003e\n\n**With title and no bottom section** \n**Without title or bottom section**\n\n\u003cbr /\u003e\n\nScrolling app views\n-------------------\n\n**With title** \n**Without title**\n\n\u003cbr /\u003e\n\n**With title and no bottom section** \n**Without title or bottom section**\n\n\u003cbr /\u003e"]]
Top section
Middle section
Bottom section
With title
Without title
With title and no bottom section
Without title or bottom section
With title
Without title
With title and no bottom section
Without title or bottom section