NavigationRailView MaterialDesign 1.4.0 Stable ?

Blog Infos
Author
droidcon
Published
Topics
,
Author
droidcon
Published
Topics
,
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 for landscape 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>
view raw landscape-layout hosted with ❤ by GitHub
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
}
}
}
view raw onItemSelectedListener hosted with ❤ by GitHub
  • 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
}
}
}
view raw onItemReselectedListener hosted with ❤ by GitHub

Job Offers

Job Offers

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

,

Compose Beyond Material Design

droidcon
In the implementation of Jetpack compose at our organization, one of the issues that popped up was how to implement a Design system that is not adapted from material design but true to what our…
Watch Video

Compose Beyond Material Design

Frank Tamre

Compose Beyond Material Design

Frank Tamre

Compose Beyond Material Design

Frank Tamre

Jobs

Demo
  • Portrait mode:
  • Landscape mode :

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

Check full sample code :

navczydev/NavigationRailSample

NavigationRailView sample . Contribute to navczydev/NavigationRailSample development by creating an account on GitHub.

github.com

 

?? ???? HAPPY CODING ???? ??
References

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system-backed by open-source code-that helps…

material.io

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system-backed by open-source code-that helps…

material.io

 

Stay in touch

 

navczydev – Overview

Android Developer Organizer at GDG-Montreal. navczydev has 84 repositories available. Follow their code on GitHub.

github.com

 

Nav Singh – Writer – Medium | LinkedIn

View Nav Singh’s profile on LinkedIn, the world’s largest professional community. Nav has 7 jobs listed on their…

www.linkedin.com

 

 

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog

Drawing a Football Ground with Jetpack Compose

Nour El Islam SAIDI
In this part of the article, we’ll delve into creating the groundwork for our…
READ MORE
blog

A Quick Guide for using Material Components in Android

droidcon
For this tutorial, we will be styling an App with Material Theme.The application basically…
READ MORE
blog

A first look at Material You

Igor Escodro
During I/O 2021, Google announced the latest stage for Material Design, Material You (or…
READ MORE
blog

Building High-Quality Android UI: Embracing Test-Driven Development with Jetpack Compose

Alejandro Zurcher
How can we approach UI development in Android while ensuring we are writing high-quality…
READ MORE

Autor

Menu