diff --git a/CanonicalLayouts/README.md b/CanonicalLayouts/README.md new file mode 100644 index 00000000..95561516 --- /dev/null +++ b/CanonicalLayouts/README.md @@ -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. + diff --git a/README.md b/README.md index 4597dada..37bbd15c 100644 --- a/README.md +++ b/README.md @@ -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.