Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
986fbb5
Revised the README files for the adaptive apps samples.
JonEckenrode May 8, 2026
ba26ab6
Revised the README files for the adaptive apps samples.
JonEckenrode May 8, 2026
20b4646
Merge branch 'adaptive-apps-samples-readme-reorg' of github.com:andro…
JonEckenrode May 8, 2026
5f3049d
Merge branch 'adaptive-apps-samples-readme-reorg' of github.com:andro…
JonEckenrode May 8, 2026
3f86814
Merge branch 'adaptive-apps-samples-readme-reorg' of github.com:andro…
JonEckenrode May 8, 2026
0f7b3fe
Merge branch 'adaptive-apps-samples-readme-reorg' of github.com:andro…
JonEckenrode May 8, 2026
c11c3a7
Merge branch 'adaptive-apps-samples-readme-reorg' of github.com:andro…
JonEckenrode May 8, 2026
4405b63
Merge branch 'adaptive-apps-samples-readme-reorg' of github.com:andro…
JonEckenrode May 8, 2026
e516329
Merge branch 'adaptive-apps-samples-readme-reorg' of github.com:andro…
JonEckenrode May 8, 2026
1711c9a
Merge branch 'adaptive-apps-samples-readme-reorg' of github.com:andro…
JonEckenrode May 8, 2026
4e81c52
Merge branch 'adaptive-apps-samples-readme-reorg' of github.com:andro…
JonEckenrode May 8, 2026
5898699
Add FlexBox, Grid, and MediaQuery samples to the root README
JonEckenrode May 10, 2026
7faf947
Update MediaQuery sample reference to root directory and add link to …
JonEckenrode May 10, 2026
6bcf14c
Add revised subproject READMEs for FlexBox, Grid, and MediaQuery
JonEckenrode May 10, 2026
5ae3bb7
Remove subproject READMEs from reorg branch
JonEckenrode May 10, 2026
0ea1839
Fix punctuation in Grid section of README
JonEckenrode May 10, 2026
a835da4
Restore subproject READMEs for FlexBox, Grid, and MediaQuery
JonEckenrode May 11, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions CanonicalLayouts/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# Canonical layouts

The large screen canonical layouts are proven design patterns that provide an optimal user experience on large screen devices. The layouts are responsive and adaptive, supporting small screen phones as well as tablets, foldables, and ChromeOS devices.

For more information see the [Large screen canonical layouts](https://developer.android.com/guide/topics/large-screens/large-screen-canonical-layouts) developer guide.

## Installation

Clone the [adaptive-apps-samples](https://github.com/android/adaptive-apps-samples) repository, then open the canonical layout samples as projects in Android Studio.

## Canonical layouts and related implementations
- List-Detail
- [Activities](./list-detail-activity-embedding)
- [Views and Fragments](./list-detail-sliding-pane)
- [Jetpack Compose](./list-detail-compose)
- Feed
- [Views and Fragments](./feed-view)
- [Jetpack Compose](./feed-compose)
- Supporting Pane
- [Views](./supporting-pane-views)
- [Fragments](./supporting-pane-fragments)
- [Jetpack Compose](./supporting-pane-compose)

## Support

Stack Overflow: http://stackoverflow.com/questions/tagged/android

If you find an error in the samples, please file an issue.

8 changes: 8 additions & 0 deletions FlexBox/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# FlexBox layout sample

Build flexible, wrapped, and responsive column/row structures that adapt automatically to display dimensions using Jetpack Compose FlexBox layout APIs.

## Features demonstrated
- **Dynamic wrapping:** Content wrapped inside row/column lines as width adapts.
- **Basis and Shrink parameters:** Proportionally distributing space and shrinking elements under tight dimensions.
- **Alignment & gaps:** Configuring custom alignments and gaps between elements dynamically.
7 changes: 7 additions & 0 deletions Grid/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# Grid layout sample

Create responsive grid-based user interfaces using Compose `Grid` APIs.

## Features demonstrated
- **Column span adjustments:** Elements spanning multiple columns.
- **Multi-column adaptation:** Adapting elements to fit different display widths dynamically.
10 changes: 10 additions & 0 deletions MediaQuery/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# MediaQuery sample

Build responsive and adaptive UIs with Compose's experimental `mediaQuery` API.

## Features demonstrated
- **Fold posture detection:** Adapts layout when a foldable device is folded into `Tabletop` posture.
- **Hardware sensor awareness:** Detects available cameras/microphones.
- **Peripheral detection:** Displays warnings if no physical keyboard is connected.
- **Pointer precision adaptive targets:** Scales clickable tap targets for coarse touch inputs.
- **Adaptive Viewing distance:** Automatically enlarges typography for medium/far viewing ranges.
67 changes: 48 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,58 @@
# Adaptive apps samples

The large screen canonical layouts are proven design patterns that provide an optimal user experience on large screen devices. The layouts are responsive and adaptive, supporting small screen phones as well as tablets, foldables, and ChromeOS devices.
Adaptive apps provide an optimal user experience on all display sizes and form factors, including phones, tablets, foldables, desktops, TV, Automotive, XR, and display modes such as split screen and desktop windowing.

For more information see the [Large screen canonical layouts](https://developer.android.com/guide/topics/large-screens/large-screen-canonical-layouts) developer guide.
The adaptive app samples demonstrate best practices for building Android apps that dynamically adjust their layout and functionality to make the most of available display space.

## Installation
## Samples

Clone the [adaptive-apps-samples](https://github.com/android/adaptive-apps-samples) repository, then open the canonical layout samples as projects in Android Studio.
### [Canonical layouts](./CanonicalLayouts)

## Available Canonical layouts and related implementations
- List-Detail
- [Activities](./CanonicalLayouts/list-detail-activity-embedding)
- [Views and Fragments](./CanonicalLayouts/list-detail-sliding-pane)
- [Jetpack Compose](./CanonicalLayouts/list-detail-compose)
- Feed
- [Views and Fragments](./CanonicalLayouts/feed-view)
- [Jetpack Compose](./CanonicalLayouts/feed-compose)
- Supporting Pane
- [Views](./CanonicalLayouts/supporting-pane-views)
- [Fragments](./CanonicalLayouts/supporting-pane-fragments)
- [Jetpack Compose](./CanonicalLayouts/supporting-pane-compose)
Proven design patterns for large screens:
- **List-Detail**: Optimal for browsing content and seeing details side-by-side
- **Feed**: Ideal for content discovery
- **Supporting Pane**: Best for showing related content or tools alongside primary content

## Support
See the [Canonical Layouts README](./CanonicalLayouts/README.md) for more details.

Stack Overflow: http://stackoverflow.com/questions/tagged/android
### [Adaptive JetStream](./AdaptiveJetStream)

If you find an error in the samples, please file an issue.
A media streaming app that adapts to various form factors using a single binary. The sample demonstrates how to use Compose Material3 to create experiences optimized for all display sizes.

See the [Adaptive JetStream README](./AdaptiveJetStream/README.md) to learn more.

### [Adaptive navigation](./AdaptiveNavigationSample)

A navigation app that uses `NavigationSuiteScaffold` to align navigation icons vertically (top, center, or bottom) within a navigation rail, adapting to different screen sizes and user preferences.

See the [Adaptive navigation README](./AdaptiveNavigationSample/README.md) for all the details.

### [FlexBox](./FlexBox)

Demonstrates dynamic wrapping, resizing, basis and shrink properties using Jetpack Compose FlexBox layout APIs for responsive content flow.

See the [FlexBox README](./FlexBox/README.md) for more details.

### [Grid](./Grid)

Demonstrates a responsive, multi-column content layout that dynamically adjusts column spans and weights based on the device's screen dimensions using Compose Grid layout APIs.

See the [Grid README](./Grid/README.md).

### [MediaQuery](./MediaQuery)

Demonstrates real-time layout adaptation utilizing the experimental `mediaQuery` API in Jetpack Compose. Adapts layout elements based on screen size, device fold posture, precision of pointer devices, physical viewing distance, and active hardware sensors.

See the [MediaQuery README](./MediaQuery/README.md) to learn more.

## Get started

To explore the samples:
1. Clone this repository.
2. Open the specific sample directory (for example `CanonicalLayouts` or `AdaptiveJetStream`) as an Android Studio project.

## License

This project is licensed under the Apache License, Version 2.0.

See the [LICENSE](LICENSE.md) file for details.
Loading