NavigationRailView MaterialDesign 1.4.0 Stable ?

Blog Infos
Author
Published
Topics
,
Author
Published
Posted by: Nav Singh

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 :
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
android:textColor="?colorPrimary"
app:layout_constraintBottom_toTopOf="@id/bottom_bar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="@string/bottom_nav_label" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_bar"
style="@style/Widget.MaterialComponents.BottomNavigationView.PrimarySurface"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="@menu/nav_menu" />
</androidx.constraintlayout.widget.ConstraintLayout>
view raw portrait-layout hosted with ❤ by GitHub
Layout Code folandscape mode:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<TextView
android:id="@+id/textview"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
android:textColor="?colorPrimary"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/navigation_rail"
app:layout_constraintTop_toTopOf="parent"
tools:text="@string/nav_rail_label" />
<com.google.android.material.navigationrail.NavigationRailView
android:id="@+id/navigation_rail"
style="@style/Widget.MaterialComponents.NavigationRailView.Colored.Compact"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:headerLayout="@layout/nav_header"
app:labelVisibilityMode="selected"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:menu="@menu/nav_menu"
app:menuGravity="bottom" />
</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity code:
package com.example.navigationrailsample
import android.content.res.Configuration
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat
import com.example.navigationrailsample.databinding.ActivityMainBinding
import com.google.android.material.badge.BadgeDrawable
import com.google.android.material.floatingactionbutton.FloatingActionButton
/**
* @author Nav Singh
* @see [com.google.android.material.bottomnavigation.BottomNavigationView]
* @see [com.google.android.material.navigationrail.NavigationRailView]
*/
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
setContentView(activityMainBinding.root)
// update the text based on the orientation
activityMainBinding.textview.text = when (resources.configuration.orientation) {
Configuration.ORIENTATION_PORTRAIT -> {
getString(R.string.bottom_nav_label)
}
else -> {
getString(R.string.nav_rail_label)
}
}
// add badge to alarm
val badgeDrawable = activityMainBinding.navigationRail?.getOrCreateBadge(R.id.alarms)
badgeDrawable?.run {
Toast.makeText(applicationContext, "Create badge", Toast.LENGTH_SHORT).show()
number = 999
badgeTextColor =
ContextCompat.getColor(applicationContext, android.R.color.holo_red_light)
maxCharacterCount = 2
badgeGravity = BadgeDrawable.TOP_START
isVisible = true
}
// remove badge
// activityMainBinding.navigationRail?.removeBadge(R.id.alarms)
activityMainBinding.bottomBar?.setOnItemSelectedListener { item ->
when (item.itemId) {
R.id.alarms -> {
Toast.makeText(this, "Alarms Clicked", Toast.LENGTH_SHORT).show()
true
}
else -> {
Toast.makeText(this, "Other item clicked", Toast.LENGTH_SHORT).show()
true
}
}
}
activityMainBinding.navigationRail?.headerView?.findViewById<FloatingActionButton>(R.id.fab_add)
?.setOnClickListener {
Toast.makeText(this, "Fab Clicked", Toast.LENGTH_SHORT).show()
}
activityMainBinding.navigationRail?.setOnItemSelectedListener { item ->
when (item.itemId) {
R.id.alarms -> {
Toast.makeText(this, "Alarms Clicked", Toast.LENGTH_SHORT).show()
true
}
else -> {
Toast.makeText(this, "Other item clicked", Toast.LENGTH_SHORT).show()
true
}
}
}
}
}
view raw MainActivity hosted with ❤ by GitHub
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"
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/alarms"
android:enabled="true"
android:icon="@drawable/ic_alarms"
android:title="@string/alarms_destination_label" />
<item
android:id="@+id/schedule"
android:enabled="true"
android:icon="@drawable/icon_clock"
android:title="@string/schedule_destination_label" />
<item
android:id="@+id/timer"
android:enabled="true"
android:icon="@drawable/ic_alarms"
android:title="@string/timer_destination_label" />
<item
android:id="@+id/stopwatch"
android:enabled="true"
android:icon="@drawable/icon_clock"
android:title="@string/stopwatch_destination_label" />
</menu>
view raw nav_menu hosted with ❤ by GitHub
  • Set the menu gravity :
  • Set the label visibility mode for menu item’s title :
  • Set the header : It sets the header in NavigationRailView
app:headerLayout="@layout/nav_header"
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?colorPrimary"
android:backgroundTint="?colorPrimary"
android:contentDescription="@string/add_item"
app:borderWidth="0dp"
app:fabSize="mini"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_baseline_add_circle_24" />
</androidx.constraintlayout.widget.ConstraintLayout>
view raw nav_header hosted with ❤ by GitHub
  • 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 itemgetOrCreateBadge(int menuItemId)
// add badge to alarm
val badgeDrawable = activityMainBinding.navigationRail?.getOrCreateBadge(R.id.alarms)
badgeDrawable?.run {
Toast.makeText(applicationContext, "Create badge", Toast.LENGTH_SHORT).show()
number = 999
badgeTextColor =
ContextCompat.getColor(applicationContext, android.R.color.holo_red_light)
maxCharacterCount = 2
badgeGravity = BadgeDrawable.TOP_START
isVisible = true
}
// remove badge
// activityMainBinding.navigationRail?.removeBadge(R.id.alarms)
view raw Badge-Item hosted with ❤ by GitHub

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 :
activityMainBinding.navigationRail?.setOnItemSelectedListener { item ->
when (item.itemId) {
R.id.alarms -> {
Toast.makeText(this, "Alarms Clicked", Toast.LENGTH_SHORT).show()
true
}
else -> {
Toast.makeText(this, "Other item clicked", Toast.LENGTH_SHORT).show()
true
}
}
}
  • setOnItemReselectedListener on NavigationRailView :
activityMainBinding.navigationRail?.setOnItemReselectedListener { item ->
when (item.itemId) {
R.id.alarms -> {
Toast.makeText(this, "Alarms Clicked", Toast.LENGTH_SHORT).show()
true
}
else -> {
Toast.makeText(this, "Other item clicked", Toast.LENGTH_SHORT).show()
true
}
}
}

Job Offers

Job Offers


    Senior Android Engineer

    Busuu
    Madrid
    • Full Time
    apply now

    Senior Compiler Engineer C++/LLVM – Leuven

    Guardsquare
    Leuven, Belgium
    • Full Time
    apply now

    Senior Android Engineer

    Peloton Interactive
    New York
    • Full Time
    apply now
Load more listings

OUR VIDEO RECOMMENDATION

Jobs

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
For this tutorial, we will be styling an App with Material Theme.The application basically…
READ MORE
blog
During I/O 2021, Google announced the latest stage for Material Design, Material You (or…
READ MORE
blog

Android 12 review for developers

The Google I/O’21 conference took place, and we learned absolutely everything about the new…
READ MORE
blog

From Nothing to Material Transitions

Animations rarely change the core functionally of an app but you can’t deny they…
READ MORE
Menu