{"id":1798,"date":"2021-08-19T12:19:17","date_gmt":"2021-08-19T19:19:17","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=1798"},"modified":"2021-08-19T12:19:17","modified_gmt":"2021-08-19T19:19:17","slug":"dual-screen-navigation-rail","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/dual-screen-navigation-rail\/","title":{"rendered":"Dual-screen Navigation Rail"},"content":{"rendered":"

\n Hello Android developers!\n<\/p>\n

\n Google recently published a new landing page<\/a> 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.\n<\/p>\n

About NavigationRail<\/h2>\n

NavigationRail<\/a> 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.\n<\/p>\n

NavigationRail on dual-screens<\/h2>\n

\n In this dual-screen NavigationRail sample<\/a>, 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.\n<\/p>\n

\n The layout XML for the two controls appears in the activity_main.xml:\n<\/p>\n

<com.google.android.material.navigationrail.NavigationRailView\r\n    android:id=\"@+id\/navigation_rail\"\r\n    android:layout_width=\"wrap_content\"\r\n    android:layout_height=\"match_parent\"\r\n    android:visibility=\"gone\"\r\n    app:layout_constraintLeft_toLeftOf=\"parent\"\r\n    app:layout_constraintTop_toTopOf=\"parent\"\r\n    app:menu=\"@menu\/nav_menu\" \/>\r\n<com.google.android.material.bottomnavigation.BottomNavigationView\r\n    android:id=\"@+id\/bottom_nav_view\"\r\n    android:layout_width=\"0dp\"\r\n    android:layout_height=\"wrap_content\"\r\n    android:layout_marginStart=\"0dp\"\r\n    android:layout_marginEnd=\"0dp\"\r\n    android:background=\"?android:attr\/windowBackground\"\r\n    android:visibility=\"gone\"\r\n    app:layout_constraintBottom_toBottomOf=\"parent\"\r\n    app:layout_constraintLeft_toLeftOf=\"parent\"\r\n    app:layout_constraintRight_toRightOf=\"parent\"\r\n    app:menu=\"@menu\/nav_menu\" \/><\/pre>\n
\n  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<\/a>. View  last week\u2019s blog post on Jetpack Window Manager<\/a> to learn more about using this component.\n<\/p>\n
\n  Once the app detects if there is a display feature or not, the app will show the correct component and hide the other:\n<\/p>\n
bottomNavView.visibility = View.GONE\r\nnavRailView.visibility = View.VISIBLE<\/pre>\n
\n  As you can see, it\u2019s 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\u2019s done, we created a separated branch following that approach<\/a>.\n<\/p>\n
\n  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:\n<\/p>\n
\n  \"Bottom
Figure 1: on smaller screens, use BottomNavigation<\/em>\n<\/p>\n
\n  \"Navigation
Figure 2: on larger screens, use NavigationRail<\/em>\n<\/p>\n
NavigationRail on foldables<\/h2>\n
\n  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:\n<\/p>\n
\"Foldable<\/a>Figure 3: Full screen app on a foldable device<\/em>\n<\/p>\n
\n  \"FoldableFigure 4: BottomNavigation is used for smaller screen area<\/em>\n<\/p>\n
Flutter too<\/h2>\n
\n  There is also a Flutter version of NavigationRail<\/a> component, which provides the same user experience across all the supported Flutter platforms. It should be paired with BottmNavigationBar<\/a> for smaller screens, just as with the Android native widget.\n<\/p>\n
Resources and feedback<\/h2>\n
\n  Check out the\u00a0Microsoft Surface Duo developer documentation<\/a>\u00a0and\u00a0past\u00a0blog posts<\/a>\u00a0for links and details on all our samples. You can find\u00a0our\u00a0samples<\/a>\u00a0on GitHub.\u00a0\n<\/p>\n
\n  If you have any questions, or would like to tell us about your apps, use the\u00a0feedback forum<\/a>\u00a0or message us on Twitter\u00a0@surfaceduodev<\/a>.\u00a0\n<\/p>\n
\n  Finally, please join us for our dual screen developer livestream<\/a> at 11am (Pacific time) each Friday \u2013 mark it in your calendar and check out the archives on YouTube<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
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. […]<\/p>\n","protected":false},"author":30297,"featured_media":1800,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,706,473],"class_list":["post-1798","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-dual-screen-development","tag-jetpack-window-manager","tag-kotlin"],"acf":[],"blog_post_summary":"
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. […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1798","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/30297"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1798"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1798\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1800"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1798"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1798"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1798"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}