![Hero layout basics illustration](https://developer.android.com/static/images/design/ui/mobile/layout-basics-hero.png)

A layout defines the visual structure for a user to interface with your app,
such as in a composable. Android provides a range of libraries, canonical
starting points, and techniques to display and position content.

## Get Started

Start designing Android layouts by learning [app anatomy](https://developer.android.com/design/ui/mobile/guides/layout-and-content/app-anatomy.md.txt) then how to
[structure your app's content](https://developer.android.com/design/ui/mobile/guides/layout-and-content/content-structure.md.txt).

## Takeaways

**Layout orientation**


Consider different aspect ratios, size classes, and resolutions that users
might encounter. Verify that your app provides a good user
experience on both landscape and portrait orientation as well as different
screen sizes and form factors.

For more information, see the guidance on
[adapting your layout](https://developer.android.com/design/ui/mobile/guides/layout-and-content/adapt-layout.md.txt)
and
[canonical layouts](https://developer.android.com/design/ui/mobile/guides/layout-and-content/common-layouts.md.txt).
![](https://developer.android.com/static/images/design/ui/mobile/layout-basics-orientation.webp) **Device safe areas**


Honor device safe areas, which includes parts of the UI such as display
cutouts, edge-to-edge insets, edge displays, software keyboards, and
system bars. Provide a flexible layout for users to
interact with the keyboard.
Alas, your browser doesn't support HTML5 video. That's OK! You can still [download the video](https://developer.android.com/static/images/design/ui/mobile/layout-basics-video-1.mp4) and watch it with a video player. ![](https://developer.android.com/static/images/design/ui/mobile/layout-basics_alignment_do.webp)

### Do

Focus user inputs. If the keyboard is present, move the input up into a focused state or consider attaching the text input to the keyboard. ![](https://developer.android.com/static/images/design/ui/mobile/layout-basics_alignment_dont.webp)

### Don't

Hide inputs. Even on smaller screens, the user might not know or be able to scroll the screen. **Interaction ergonomics**


Keep essential interactions, like primary navigation, in a reachable screen
area. Floating action buttons (FABs) provide a
prominent and reachable interaction point
![](https://developer.android.com/static/images/design/ui/mobile/layout-basics-1-takeaways-key-essential-layout.webp) **Containment groups**


Use containment to group related content to guide the user through content and
actions. Cards using explicit containment to group content with related actions.
![](https://developer.android.com/static/images/design/ui/mobile/layout-basics-2-takeways-explicit-containment.webp)

**Alignment**

Provide consistent alignment between similar content and UI elements.

<br />

![](https://developer.android.com/static/images/design/ui/mobile/layout-basics_alignment_do.webp)

### Do

Establish consistent spacing between like elements. ![](https://developer.android.com/static/images/design/ui/mobile/layout-basics_alignment_dont.webp)

### Don't

Disrupt readability by inconsistently spacing like elements, which can make designs appear haphazard. **Essential interactions**


Don't overwhelm your user with too many actions per view.
![](https://developer.android.com/static/images/design/ui/mobile/layout-basics-1-takeaways-key-actions.webp) **Notate layout specs**


When building custom layouts, notate how content should sit within the layout
using alignment, constraints, or gravity terms. Include how images should
respond to their container to display properly.
![](https://developer.android.com/static/images/design/ui/mobile/layout-basics-2-takeways-notate.webp)