Navigation Drawer in Android

 Navigation Drawer 

  • It is a panel that slides out from the edge of the screen. 
  • It typically contains the header and the menu. 
  • It is hidden when not in use and appears when the user swipes a finger from the starting edge of the screen or when the user touches the hamburger icon on start screen. 
  • It is used in complex application which has five or more primary destinations in them. 
  • Primary destinations are all at the same location within the navigation hierarchy. They typically all have the same navigation parent, the start destination. This means that when the navigation drawer switches between destinations, it pops the back stack back to the start destination, and then pushes the destination to be navigated to as the second element on the stack. 
  • Eg. A map application that switches between the map navigating or a list of favourite places, or mail app that switches between viewing the inbox. 
  • Navigation Drawer is a part of the material library, a library used to implement patterns that are part of Google's material design language. 

Use Case:

  • Include dependency
  • The navigation drawer is based on menu resource : so we create a new nav_drawer menu and add items 
  • We add a drawer layout in main activity and inside it we add a navigation view from the material library. 
  • Now we need to associate the navigation drawer via code. 

// Navigation Drawer
implementation 'com.google.android.material:material:1.2.1'


<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.google.android.material.navigation.NavigationView
android:id="@+id/navView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/nav_header"
app:menu="@menu/navdrawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>


override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
bindingMain = DataBindingUtil.setContentView(this, R.layout.activity_main)
// initialize drawerLayout var from binding
drawerLayout = bindingMain.drawerLayout
// first find the navController from your navigation host fragment
val navController = this.findNavController(R.id.navigationHost)
// second link the navController to action bar
// add the drawerlayout as the second parameter
NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)
// hook the navigation UI up to the navigation view. (navView)
NavigationUI.setupWithNavController(bindingMain.navView, navController)
}

override fun onSupportNavigateUp(): Boolean {
// find navController
val navController = this.findNavController(R.id.navigationHost)
// replace navcontroller.navigateUp with NavigationUI.navigateUp with drawerLayout
return NavigationUI.navigateUp(navController, drawerLayout)
}



Best Practices : 

  • We can prevent the drawer from being swiped anywhere other than startDestination 
  • We can do this by addOnDestinationChangedListener with lambda that set the DrawerLockMode depending on what destination we're navigating to. 

// unlock the swipe only on start Destination 
navController.addOnDestinationChangedListener { controller, destination, arguments ->
if (destination.id == controller.graph.startDestination){
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED)
}else {
drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED)
}
}





























Comments

Popular Posts