{"id":2814,"date":"2022-10-13T11:16:30","date_gmt":"2022-10-13T18:16:30","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/surface-duo\/?p=2814"},"modified":"2022-10-14T08:52:52","modified_gmt":"2022-10-14T15:52:52","slug":"foldable-navigation-rail","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/surface-duo\/foldable-navigation-rail\/","title":{"rendered":"Foldable Navigation Rail"},"content":{"rendered":"

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

\n This week we\u2019re excited to share with you a new library to make it easy to support Navigation Rail on foldable devices like Surface Duo.\n<\/p>\n

Navigation Rail package<\/h2>\n

\n One of the tricks when building mobile apps for Surface Duo devices is to avoid your UI being obscured by the hinge. Controls that aren\u2019t aware of foldable devices may place elements \u201cunder\u201d the fold area, making them hard to read and touch:\n<\/p>\n

\n \"Surface\n<\/p>\n

\n To avoid this typically requires custom code using the WindowInfoTracker<\/code> from the Jetpack Window Manager, observing changes to the WindowLayoutInfo<\/code>, and adjusting the layout accordingly.\n<\/p>\n

\n To make things easier, the Dual-screen layout library<\/a> contains a collection of components designed to automatically adapt to foldable devices, so no additional code is required. \n<\/p>\n

Adding the NavigationRailView<\/h2>\n

\n Similar to the BottomNavigationView<\/a> and the TabLayout<\/a>, this component is a customized NavigationRailView<\/a> from Google\u2019s Material library. It is designed to display its child views in a way that will not interfere with the hinge found on foldable devices like Surface Duo.\n<\/p>\n

\n The NavigationRailView can use the setMenuGravity()<\/code> function to control how the destinations from the menu views will be grouped: Top<\/code>, Center<\/code>, or Bottom<\/code>. \n
\n The view encapsulates an implementation of the WindowInfoTracker<\/code> and for each of the above three cases it will try to reposition some of the buttons to avoid overlapping with the folding feature.\n<\/p>\n

\n \"Surface\n<\/p>\n

\n This can be accomplished either using the xml\u2019s app:menuGravity<\/code> attribute or using the setMenuGravity()<\/code> Java function: \n<\/p>\n

\r\n  app:menuGravity=\"top\"\r\n<\/pre>\n
\n  or Kotlin setter function:\n<\/p>\n
\r\n  binding.navRailView.menuGravity = Gravity.TOP\r\n<\/pre>\n
\n  A special case is if we want to position the button in the center. Here we have an extra option in the form of a function called arrangeButtons(startBtnCount, endBtnCount)<\/code> that takes two parameters: startBtnCount<\/code> telling how many buttons should be positioned on the top screen and endBtnCount<\/code> telling how many buttons should be positioned on the bottom screen, respectively. \n<\/p>\n
\n  This example shows how to set the first five destinations on the top screen and last two on the bottom screen:\n<\/p>\n
\r\n  binding.navRailView.arrangeButtons(5,2)\r\n<\/pre>\n
\n  \"Surface\n<\/p>\n
Animations and gestures<\/h2>\n
\n  Keeping the tradition with other components, NavigationRailView also supports animations and fling gestures.\n<\/p>\n
\n  The position of the destinations can also be changed at runtime using the two methods described above. To make the transition more pleasant, a translation animation can be used. This option can be enabled or disabled by changing the useAnimation<\/code> property from both xml and Java or Kotlin. By default, the value is set to true.\n<\/p>\n
\n  In addition to this, we can also set up a custom interpolator for the animation using the animationInterpolator<\/code> property: \n<\/p>\n
\r\n  binding.navRailView.animationInterpolator = AccelerateInterpolator()\r\n<\/pre>\n
\n  By default, an instance of the AccelerateDecelerateInterpolator()<\/code> is used.\n<\/p>\n
Gestures<\/h2>\n
\n  The button\u2019s position can also be changed at runtime using a swipe gesture on the component.\n<\/p>\n
\n  The component can detect a swipe up or down gesture and will change the gravity of the destinations to Gravity.TOP<\/code> or Gravity.BOTTOM<\/code>.\n<\/p>\n
\n  This feature can be turned on or off by using the allowFlingGesture<\/code>. By default, it is set to true.\n<\/p>\n
Resources and feedback<\/h2>\n
\n  If you have any questions, or would like to tell us about your apps, use the feedback forum<\/a> or message us on Twitter @surfaceduodev<\/a>.\u00a0\n<\/p>\n
\n  Finally, join us live on Twitch on Friday at 11am (Pacific Time) to discuss the Navigation Rail, foldable user experiences, and any other Surface Duo developer questions you might have.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hello Android developers! This week we\u2019re excited to share with you a new library to make it easy to support Navigation Rail on foldable devices like Surface Duo. Navigation Rail package One of the tricks when building mobile apps for Surface Duo devices is to avoid your UI being obscured by the hinge. Controls that […]<\/p>\n","protected":false},"author":82638,"featured_media":2816,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2814","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk"],"acf":[],"blog_post_summary":"
Hello Android developers! This week we\u2019re excited to share with you a new library to make it easy to support Navigation Rail on foldable devices like Surface Duo. Navigation Rail package One of the tricks when building mobile apps for Surface Duo devices is to avoid your UI being obscured by the hinge. Controls that […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2814","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\/82638"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=2814"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/2814\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/2816"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=2814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=2814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=2814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}