NavigationRailView MaterialDesign 1.4.0 Stable 🎉

https://twitter.com/materialdesign/status/1413218592062124037

In this article, We will learn about NavigationRailView finally which hits the stable channel 🎉 🎉

NavigationRailView : It is a side navigation component that displays 3 to 7 app destinations and, optionally, a Floating Action Button.

• Each destination is represented by an icon and a text label.
• The rail can function on its own at larger screen sizes, such as desktop and tablet.
• During the transition between screen sizes and devices, it can also complement other navigation components, such as bottom navigation.

Let’s see it in action 👨‍💻😍

• Add dependency to Material Design library in your module’s build.gradle

implementation("com.google.android.material:material:1.4.0")

I have created the sample project which uses the different layout based on the orientation of the device

• Portrait mode : Application will use BottomNavigationView
• Landscape mode : Application use the NavigationRailView

Layout Code for portrait mode :

Portrait mode layout

Layout Code for landscape mode:

Landscape mode layout

MainActivity code:

MainActivity code

NavigationRailView properties deep dive:

• Set the menu : nav_manu refer to the menu layout file which is used to inflate the items in NavigationRailView

app:menu="@menu/nav_menu" 

nav_menu layout code

• Set the menu gravity :

menuGravity

• Set the label visibility mode for menu item’s title :

labelVisibilitySlectedMode options

• Set the header : It sets the header in NavigationRailView

app:headerLayout="@layout/nav_header"

• Add/Remove Badge to item : Each item in NavigationRailView can have badge associates to it. You can add/remove badge to any item :

// it will create a new badge if there is no badge exist for provided menu item
getOrCreateBadge(int menuItemId)

You can modify the various properties of badge :

1. number
2. badgeTextColor,
3. maxCharacterCount,
4. badgeGravity: (BadgeDrawable.TOP_START, BadgeDrawable.BOTTOM_END, etc.)

• setOnItemSelectedListener on NavigationRailView :

onItemSelectedListener code

• setOnItemReselectedListener on NavigationRailView :

onItemReselectedListener code

Demo

• Portrait mode :

Portrait mode demo

• Landscape mode :

Landscape mode demo

I have used ViewBinding for layout inflation, Check here to learn more about ViewBinding.

Check full sample code :

navczydev/NavigationRailSample

😊😊 👏👏👏👏 HAPPY CODING 👏👏👏👏 😊😊

References

Material Design

Material Design

Stay in touch

navczydev - Overview

Nav Singh - Writer - Medium | LinkedIn

JavaScript is not available.