Microsoft has added a new component to its Dual-screen layout library for supporting Navigation Rail on foldable devices, such as the Surface Duo. Navigation Rail is a Material Design component that provides a side navigation bar for app destinations.
On devices with foldable screens, a challenge arises in making sure that UI elements aren’t obscured by the hinge where the device folds, which might occur if the elements aren’t designed for foldable devices and thus are placed in the area the screen folds.
To make sure that the Navigation Rail menu doesn’t conflict with the screen hinge, Microsoft has introduced support for NavigationRailView.
Developers can use the setMenuGravity() function to Top, Center, or Bottom, which will reposition the buttons on the menu to avoid being placed under the screen hinge.
NavigationRailView also supports animations and fling gestures. Because the position of the Navigation Rail is changed at runtime using these methods, a translation animation can be added to make the transition look more natural.
Gestures can also be used to change the Navigation Rail position. Swiping up or down on the menu will set the gravity to either Top or Bottom, respectively.
