Surface Duo Bottom Navigation View


This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft makes no warranties, express or implied, with respect to the information provided here.

The SurfaceDuoBottomNavigationView is a customized BottomNavigationView. When the application is in dual portrait mode, the view can be rendered on the left or right screen.

displayPosition - Determines on which screen the view will render. Can be one of the three values:

  • DisplayPosition.START - grouped on first screen. START: tabs on the first screen

  • DisplayPosition.END - grouped on second screen. END: tabs on the first screen

  • DisplayPosition.DUAL - spanned across both screens (might appear under hinge). DUAL: tabs on the first screen

surfaceDuoNavView.displayPosition = DisplayPosition.START

The same can be obtained using the app:display_position attribute:


arrangeButtons - When the application is spanned on both screens and the component has an odd number of buttons the middle one will be cover by the hinge. One way to avoid this is to arrange the buttons differently on each screen:

The buttons can be arranged in different ways on the two screens

surfaceDuoNavView.arrangeButtons(3, 2)

useTransparentBackground - When the application is spanned and there are no buttons on a screen, the background on that screen can be made transparent:

The background on the first screen is transparent

surfaceDuoNavView.useTransparentBackground = true

useAnimation - Determines if an animation is used when the buttons arrangements is changed. By default the AccelerateDecelerateInterpolator will be used. With the help of animationInterpolator property this can be changed to any other interpolator.

surfaceDuoNavView.useAnimation = true
surfaceDuoNavView.animationInterpolator = OvershootInterpolator()

allowFlingGesture - If set to true, the displayPosition can be set to DisplayPosition.START or DisplayPosition.END with a fling gesture on the component.

surfaceDuoNavView.allowFlingGesture = true