Using App Menu in Header Layout Navigation Drawer

Hey, today I am going to discuss Drawer Layout. This means you will get knowledge about how to add drawer layout with an event listener. The navigation drawer can be implemented by using the DrawerLayout widget. In the layout of your activity, you should define the DrawerLayout element.

This is also known as the navigation drawer. This is a layout that displays the app's main navigation options on the left edge of the right edge of the screen. Let's set up a basic navigation drawer based on the following steps with DrawerLayout.

Table of Contents

• What is the Drawer Layout?
• Create a Drawer Layout
  • Main XML Layouts
  • Header layout for the navigation drawer
  • Menu for navigation layout
  • How to access navigation layout by activity?
  • On navigation item select
  • Drawer layout with an event listener
  • Final code for drawer layout with an event listener
• Conclusion

What is the Drawer Layout?

As we discuss drawer layout acts as a top-level container for window content that allows for interactive drawer views to be pulled out from one or both vertical edges of the window. You can use it in your app either left edge or right edge. Mostly drawer layout is used on the left edge.

Create a Drawer Layout

Adding a navigation drawer, into the app is very simple. This is the top-level layout of the activity. You need to add this layout to your XML file. This XML file can be your activity file or fragment file.

Main XML Layouts

Let's take an example for the navigation drawer. First of all, add this XML snippet to your XML file.

          <?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawer_layout"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:fitsSystemWindows="true"     tools:openDrawer="start">      <include         layout="@layout/app_bar_main"         android:layout_width="match_parent"         android:layout_height="match_parent" />      <com.google.android.material.navigation.NavigationView         android:id="@+id/nav_view"         android:layout_width="wrap_content"         android:layout_height="match_parent"         android:layout_gravity="start"         android:fitsSystemWindows="true"         app:headerLayout="@layout/nav_header_main"         app:menu="@menu/activity_main_drawer" />  </androidx.drawerlayout.widget.DrawerLayout>                  

Header layout for the navigation drawer

Create a header layout for the navigation drawer now. This XML design will show on the top of the navigation drawer. You can customize with your own design patterns.

          <?xml version="1.0" encoding="utf-8"?> <LinearLayout 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="@dimen/nav_header_height"     android:background="@drawable/side_nav_bar"     android:gravity="bottom"     android:orientation="vertical"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingBottom="@dimen/activity_vertical_margin"     android:theme="@style/ThemeOverlay.AppCompat.Dark">      <ImageView         android:id="@+id/imageView"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:contentDescription="@string/nav_header_desc"         android:paddingTop="@dimen/nav_header_vertical_spacing"         app:srcCompat="@mipmap/ic_launcher_round" />      <TextView         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:paddingTop="@dimen/nav_header_vertical_spacing"         android:text="@string/nav_header_title"         android:textAppearance="@style/TextAppearance.AppCompat.Body1" />      <TextView         android:id="@+id/textView"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="@string/nav_header_subtitle" />  </LinearLayout>                  

Menu for navigation layout

A most important segment of the navigation drawer is menu design. There are many two ways to design your menu, the first one is by using XML and second is dynamic via code. Sample for navigation menu like this by using XML.

          <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     tools:showIn="navigation_view">      <group android:checkableBehavior="single">         <item             android:id="@+id/nav_home"             android:icon="@drawable/ic_menu_camera"             android:title="@string/menu_home" />         <item             android:id="@+id/nav_gallery"             android:icon="@drawable/ic_menu_gallery"             android:title="@string/menu_gallery" />         <item             android:id="@+id/nav_slideshow"             android:icon="@drawable/ic_menu_slideshow"             android:title="@string/menu_slideshow" />         <item             android:id="@+id/nav_tools"             android:icon="@drawable/ic_menu_manage"             android:title="@string/menu_tools" />     </group>      <item android:title="Communicate">         <menu>             <item                 android:id="@+id/nav_share"                 android:icon="@drawable/ic_menu_share"                 android:title="@string/menu_share" />             <item                 android:id="@+id/nav_send"                 android:icon="@drawable/ic_menu_send"                 android:title="@string/menu_send" />         </menu>     </item>  </menu>                  

How to access navigation layout by activity?

Now, these are the code snippets where you handle your drawer layout with an event listener. You can access your drawer layout activity as well as your drawer layout menu. You just need to create your drawer layout object in your activity to access all features of the drawer layout.

          DrawerLayout drawer = findViewById(R.id.drawer_layout); NavigationView navigationView = findViewById(R.id.nav_view); ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(                 this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close); drawer.addDrawerListener(toggle); toggle.syncState(); navigationView.setNavigationItemSelectedListener(this);        

On navigation item select

Now, you need to add code for controlling your menu options. So, add the onNavigationItemSelected function in your activity.

          @Override     public boolean onNavigationItemSelected(MenuItem item) {         // Handle navigation view item clicks here.         int id = item.getItemId();          if (id == R.id.nav_home) {             // Handle the camera action         } else if (id == R.id.nav_gallery) {          } else if (id == R.id.nav_slideshow) {          } else if (id == R.id.nav_tools) {          } else if (id == R.id.nav_share) {          } else if (id == R.id.nav_send) {          }          DrawerLayout drawer = findViewById(R.id.drawer_layout);         drawer.closeDrawer(GravityCompat.START);         return true;     }        

Drawer layout with an event listener

Finally, this is the code where you can detect your drawer layout is open or closed with an event listener.

          drawer.addDrawerListener(new DrawerLayout.DrawerListener() {             @Override             public void onDrawerSlide(View drawerView, float slideOffset) {                 //Log.i(TAG, "onDrawerSlide");             }              @Override             public void onDrawerOpened(View drawerView) {                 Log.i(TAG, "onDrawerOpened");             }              @Override             public void onDrawerClosed(View drawerView) {                 Log.i(TAG, "onDrawerClosed");             }              @Override             public void onDrawerStateChanged(int newState) {                 //Log.i(TAG, "onDrawerStateChanged");             }         });        

Final code for drawer layout with an event listener

          package com.codingissue.example;  import android.os.Bundle;  import com.google.android.material.floatingactionbutton.FloatingActionButton; import com.google.android.material.snackbar.Snackbar;  import android.util.Log; import android.view.View;  import androidx.core.view.GravityCompat; import androidx.appcompat.app.ActionBarDrawerToggle;  import android.view.MenuItem;  import com.google.android.material.navigation.NavigationView;  import androidx.drawerlayout.widget.DrawerLayout;  import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar;  import android.view.Menu;  public class MainActivity extends AppCompatActivity         implements NavigationView.OnNavigationItemSelectedListener {      private String TAG = "MainActivity";      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         Toolbar toolbar = findViewById(R.id.toolbar);         setSupportActionBar(toolbar);         FloatingActionButton fab = findViewById(R.id.fab);         fab.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View view) {                 Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)                         .setAction("Action", null).show();             }         });         DrawerLayout drawer = findViewById(R.id.drawer_layout);         NavigationView navigationView = findViewById(R.id.nav_view);         ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(                 this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);         drawer.addDrawerListener(toggle);         toggle.syncState();         navigationView.setNavigationItemSelectedListener(this);          drawer.addDrawerListener(new DrawerLayout.DrawerListener() {             @Override             public void onDrawerSlide(View drawerView, float slideOffset) {                 //Log.i(TAG, "onDrawerSlide");             }              @Override             public void onDrawerOpened(View drawerView) {                 Log.i(TAG, "onDrawerOpened");             }              @Override             public void onDrawerClosed(View drawerView) {                 Log.i(TAG, "onDrawerClosed");             }              @Override             public void onDrawerStateChanged(int newState) {                 //Log.i(TAG, "onDrawerStateChanged");             }         });     }      @Override     public void onBackPressed() {         DrawerLayout drawer = findViewById(R.id.drawer_layout);         if (drawer.isDrawerOpen(GravityCompat.START)) {             drawer.closeDrawer(GravityCompat.START);         } else {             super.onBackPressed();         }     }      @Override     public boolean onCreateOptionsMenu(Menu menu) {         // Inflate the menu; this adds items to the action bar if it is present.         getMenuInflater().inflate(R.menu.main, menu);         return true;     }      @Override     public boolean onOptionsItemSelected(MenuItem item) {         // Handle action bar item clicks here. The action bar will         // automatically handle clicks on the Home/Up button, so long         // as you specify a parent activity in AndroidManifest.xml.         int id = item.getItemId();          //noinspection SimplifiableIfStatement         if (id == R.id.action_settings) {             return true;         }          return super.onOptionsItemSelected(item);     }      @SuppressWarnings("StatementWithEmptyBody")     @Override     public boolean onNavigationItemSelected(MenuItem item) {         // Handle navigation view item clicks here.         int id = item.getItemId();          if (id == R.id.nav_home) {             // Handle the camera action         } else if (id == R.id.nav_gallery) {          } else if (id == R.id.nav_slideshow) {          } else if (id == R.id.nav_tools) {          } else if (id == R.id.nav_share) {          } else if (id == R.id.nav_send) {          }          DrawerLayout drawer = findViewById(R.id.drawer_layout);         drawer.closeDrawer(GravityCompat.START);         return true;     } }                  

Conclusion

In the above post, we learn about the navigation drawer layout with an event listener. We also learned drawer layout can be adjusted on the left edge and right edge of the screen. We can detect navigation item click as well as navigation movement.

If you want to ask something about drawer layout then comment below.

Using App Menu in Header Layout Navigation Drawer

Source: https://www.legendblogs.com/navigation-drawer-layout-with-an-event-listener

Share this post