A sample that shows how the latest updates on androidx.navigation, that target foldables, dual-screen and large-screen devices, work

Overview

Navigation-foldable sample

androidx.navigation component has been updated to support foldable, dual-screen and large-screen devices. SlidingPaneLayout now is used under the hood in this component and enables list-detail capabilities. This feature is useful when we want to create navigation paths where we go from A to B, following A and B a common list-detail navigation pattern.

This sample app uses the following components:

For more information, Navigation component uses under the hood:

And SlidingPaneLayout uses:

How does it work?

On single screen mode on Surface Duo (or single screen devices or multi-window mode on other foldables), a list of buttons is shown, when clicked on one, a right pane overlaps the list adding a new navigation step. When the app is spanned across displays on Surface Duo and other foldables or on large-screen devices, we will the navigation steps (A and B / list-detail) shown side by side.

Examples

App running on a dual-screen device:

Surface Duo showing A-navigation-step/list pane on single screen mode Surface Duo showing A/list pane on single screen mode

Surface Duo showing the B-navigation-step/detail pane on single screen mode Surface Duo showing the B/detail pane on single screen mode

Surface Duo showing A and B navigation-steps/list-detail panes side by side on dual-screen (spanned) portrait mode Surface Duo showing A and B navigation-steps/list-detail panes side by side on dual-screen (spanned) portrait mode

Surface Duo showing A and B navigation-steps/list-detail panes side by side on dual-screen (spanned) landscape mode Surface Duo showing A and B navigation-steps/list-detail panes side by side on dual-screen (spanned) landscape mode

App running on a foldable device:

Foldable device showing A and B navigation-steps/list-detail panes side by side on portrait mode Foldable device showing A and B navigation-steps/list-detail panes side by side on portrait mode

Foldable device showing A and B navigation-steps/list-detail panes side by side on landscape mode Foldable device showing A and B navigation-steps/list-detail panes side by side on landscape mode

Foldable device showing A abd B navigation-steps/list-detail panes on multi-window on portrait mode Foldable device showing A abd B navigation-steps/list-detail panes on multi-window on portrait mode

Foldable device showing A-navigation-step/list pane on multi-window on landscape mode Foldable device showing A-navigation-step/list pane on multi-window on landscape mode

Foldable device showing B-navigation-step/detail pane on multi-window on landscape mode Foldable device showing B-navigation-step/detail pane on multi-window mode

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

License

Copyright (c) Microsoft Corporation.

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED AS IS, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

You might also like...
Bottom-App-Bar-with-Bottom-Navigation-in-Jetpack-compose-Android - Bottom App Bar with Bottom Navigation in Jetpack compose
Bottom-App-Bar-with-Bottom-Navigation-in-Jetpack-compose-Android - Bottom App Bar with Bottom Navigation in Jetpack compose

Bottom-App-Bar-with-Bottom-Navigation-in-Jetpack-compose-Android This is simple

A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.
A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

AnimatedBottomBar A customizable and easy to use bottom bar view with sleek animations. Examples Playground app Download the playground app from Googl

Okuki is a simple, hierarchical navigation bus and back stack for Android, with optional Rx bindings, and Toothpick DI integration.

Okuki A simple, hierarchical navigation bus and back stack for Android, with optional Rx bindings, and Toothpick integration for automatic dependency-

A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.
A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

A customizable and easy to use BottomBar navigation view with sleek animations, with support for ViewPager, ViewPager2, NavController, and badges.

A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose
A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

A small and simple, yet fully fledged and customizable navigation library for Jetpack Compose

🛸Voyager is a pragmatic navigation library built for, and seamlessly integrated with, Jetpack Compose.
🛸Voyager is a pragmatic navigation library built for, and seamlessly integrated with, Jetpack Compose.

Voyager is a pragmatic navigation library built for, and seamlessly integrated with, Jetpack Compose.

AndroidBriefActions - Android library for sending and observing non persistent actions such as showing a message; nice readable way to call navigation actions from ViewModel or Activity/Fragment.

implementation "com.vladmarkovic.briefactions:briefactions:$briefActionsVersion" Benefits Why use brief-actions library pattern: Prevent short-term ac

NavigationAndFragments - A use case for fragments and navigation

NavigationAndFragments A use case for fragments and navigation. To implement this use case, follow these steps : Create a new fragment navigation xml

A small navigation library for Jetpack Compose with state saving, backstack and animations support.

A small navigation library for Jetpack Compose with state saving, backstack and animations support.

Owner
Cesar Valiente
Now: #dualscreen and #foldables @microsoft 🚀 Before: many things 😝
Cesar Valiente
Sample to grasp screen transition flow using Navigation and BottomNavigationView.

NavigationFlowSample Navigation + BottomNavigationView を使用した画面遷移で、Destinationのフローを把握するためのサンプルです。 画面遷移時にバックグラウンドで動作しているの処理を切り替える際に有効かもしれません。 Code class

null 0 Oct 28, 2021
A simple Floating Action Button that shows an anchored Navigation View

Floating Navigation View A simple Floating Action Button that shows an anchored Navigation View and was inspired by Menu Material Fixed created by Tom

André Mion 1.3k Dec 29, 2022
Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way.

Alligator Alligator is a modern Android navigation library that will help to organize your navigation code in clean and testable way. Features Any app

Artur Artikov 290 Dec 9, 2022
[ACTIVE] Simple Stack, a backstack library / navigation framework for simpler navigation and state management (for fragments, views, or whatevers).

Simple Stack Why do I want this? To make navigation to another screen as simple as backstack.goTo(SomeScreen()), and going back as simple as backstack

Gabor Varadi 1.3k Jan 2, 2023
Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps

Animated Tab Bar is an awesome navigation extension that you can use to add cool, animated and fully customizable tab navigation in your apps. The extension provides handy methods and properties to change the behaviour as well as the appearance of the navigation bar.

Zain Ul Hassan 4 Nov 30, 2022
Android multi-module navigation built on top of Jetpack Navigation Compose

MultiNavCompose Android library for multi-module navigation built on top of Jetpack Navigation Compose. The goal of this library is to simplify the se

Jeziel Lago 21 Dec 10, 2022
DSC Moi University session on using Navigation components to simplify creating navigation flow in our apps to use best practices recommended by the Google Android Team

Navigation Components Navigate between destination using safe args How to use the navigation graph and editor How send data between destinations Demo

Breens Mbaka 6 Feb 3, 2022
Navigation Component: THE BEST WAY to create navigation flows for your app

LIVE #017 - Navigation Component: A MELHOR FORMA de criar fluxos de navegação para o seu app! Código fonte do projeto criado na live #017, ensinando c

Kaique Ocanha 4 Jun 15, 2022
New style for app design simple bottom navigation with side navigation drawer UI made in Jetpack Compose.😉😎

BottomNavWithSideDrawer New style for app design simple bottom navigtaion with side navigation drawer UI made in Jetpack Compose. ?? ?? (Navigation Co

Arvind Meshram 5 Nov 24, 2022
Navigation Drawer Bottom Navigation View

LIVE #019 - Toolbar, Navigation Drawer e BottomNavigationView com Navigation Com

Kaique Ocanha 6 Jun 15, 2022