Dual-screen Navigation Rail

Cesar Valiente

Hello Android developers!

Google recently published a new landing page for building responsive layouts for larger screens (including dual-screen and foldable devices). The new NavigationRail widget includes features and guidance as an efficient way to navigate app features on larger screens.

About NavigationRail

NavigationRail is a material design component for top-level navigation on larger screens. It provides a variety of display options with icons, text, and even a floating action button if needed. For a responsive experience across phones, dual-screen/foldable, and tablet devices, it can be coupled with bottom navigation on smaller/narrower screens.

In this dual-screen NavigationRail sample, the app adapts to one or two screens and uses bottom navigation on the single screen but deploys the NavigationRail layout when spanned across the entire display, creating a vertical navigation bar.

The layout XML for the two controls appears in the activity_main.xml:

    app:menu="@menu/nav_menu" />
    app:menu="@menu/nav_menu" />

The correct widget is shown based on the presence of a display feature. But how do we know if there is a display feature (hinge or fold) on the device? To detect device display features when using an app, you can use Jetpack Window Manager. View last week’s blog post on Jetpack Window Manager to learn more about using this component.

Once the app detects if there is a display feature or not, the app will show the correct component and hide the other:

bottomNavView.visibility = View.GONE
navRailView.visibility = View.VISIBLE

As you can see, it’s easy to switch from one component to the other using their visibility parameters, but there are some additional alternatives you could consider. For example, we could inflate the specific layout that contains the correct component dynamically in code. If you want to see how that’s done, we created a separated branch following that approach.

Once you run the sample you will see how when the app is running on single-screen mode it shows a BottomNavigation and when the app is spanned across two displays, it shows a NavigationRail:

Bottom navigation is used on smaller screen area
Figure 1: on smaller screens, use BottomNavigation

Navigation rail is used on larger screen area
Figure 2: on larger screens, use NavigationRail

On other large-screen devices, including foldable devices, we can also switch between the NavigationRail and BottomNavigation. NavigationRail works best when the app is using the entire screen, but the BottomNavigation is used when the app is smaller due to multi-windowing:

Foldable device with navigation railFigure 3: Full screen app on a foldable device

Foldable device with multi-windowing and a small app with navigation railFigure 4: BottomNavigation is used for smaller screen area

Flutter too

There is also a Flutter version of NavigationRail component, which provides the same user experience across all the supported Flutter platforms. It should be paired with BottmNavigationBar for smaller screens, just as with the Android native widget.

Resources and feedback

Check out the Microsoft Surface Duo developer documentation and past blog posts for links and details on all our samples. You can find our samples on GitHub. 

If you have any questions, or would like to tell us about your apps, use the feedback forum or message us on Twitter @surfaceduodev

Finally, please join us for our dual screen developer livestream at 11am (Pacific time) each Friday – mark it in your calendar and check out the archives on YouTube.


Discussion is closed. Login to edit/delete existing comments.

Feedback usabilla icon