How to create Android Navigation Menu using DrawerLayout – Drawer Menu


We have learned much of android tutorials in the previous articles, we proceed to do the same and continue like that. Today we are going to learn how to implement android slide menu using DrawerLayout. The navigation drawer is a UI panel that shows your app’s main navigation menu. It is hidden when not in use, but appears when the user swipes a finger from the left edge of the screen or when at the top level of the app, the user touches the drawer icon in the app bar.

SEE ALSO: Simplest way to Request Multiple Permissions in Android Applications



android navigation drawer example
android navigation drawer example

Android Navigation Menu using Drawer Layout

To create Android navigation menu, you need to declare android.support.v4.widget.DrawerLayout as your main View. The DrawerLayout contains two children; application’s main View and the navigation menu.The first View should contain applications main content and the second view, navigation menu, should be hidden when not in use, but to appears when the user swipes a finger from the left edge of the screen.

Creating a new application

Go ahead and create a new application from the File > New Project, fill in all the necessary fileds. In the content_main.xml (the MainActivity layout), add the following code.

SEE ALSO: How to Make Android AUTOMATED Image Slider using View Pager

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".MainActivity"
    tools:showIn="@layout/activity_main">;

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
<!-- Remember we said that drawerLayout MUST contain two views --> 

<!-- the activity main layout --> 
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

        </LinearLayout>

<!-- the activity navigation menu --> 

        <LinearLayout
            android:id="@+id/linear_navigation"
            android:layout_width="280dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:background="#FFF"
            android:orientation="vertical">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />


        </LinearLayout>


    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>


That’s all it’s needed for our MainActivity layout. There is only one rule when implementing navigation drawer menu and that’s The DrawerLayout View, Must at all times contain TWO views; main view and navigation view.

SEE ALSO: Android RecyclerView tutorial for beginners

In the MainActivity.java add the following code. We are going to explain it thereafter.

package tensorflowfuzzyliquiditymanagementsystem.com.myapplication;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    private ActionBarDrawerToggle drawerToggle;
    private LinearLayout linearNavigation;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        drawerLayout = findViewById(R.id.drawer_layout);
        linearNavigation = findViewById(R.id.linear_navigation);

        drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.open, R.string.close);

        drawerLayout.addDrawerListener(drawerToggle);

        FloatingActionButton fab = (FloatingActionButton) 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();
            }
        });

        getSupportActionBar().setDisplayShowHomeEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (drawerLayout.isDrawerOpen(linearNavigation)) {
                    drawerLayout.closeDrawer(linearNavigation);
                } else {
                    drawerLayout.openDrawer(linearNavigation);
                }
            }
        });

    }

    @Override
    protected void onPostCreate(@Nullable Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);

        drawerToggle.syncState();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.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);
    }
}

If you studied this code carefully and slowly, you will realize it’s simple and straightforward. Alright, first you will need to declare three variables, namely; The DrawerLayout, LinearLayout (this is our navigation menu from the main activity), and ActionBarDrawerToggle (will be used to as a listener to our drawerLayout) . Second, you will go ahead and instantiate or initialize all your fields(variables). Notice that you will need two strings while instantiating the ActionBarDrawerToggle i.e. the open string and close string, these strings should be created from the string resource file (strings.xml). Then you will need to add the drawer listener, which is the drawer toggle.



You might have realized that we have included the following two lines in the onCreate method.

getSupportActionBar().setDisplayShowHomeEnabled(true);
 getSupportActionBar().setDisplayHomeAsUpEnabled(true);

These two lines are used to design the Android hamburger menu as shown in the image below.

android hamburger menu for navigation drawer menu

Lastly, you need to sync your ActionBarDrawerToggle in the onPostCreate method. This one will be used to animated the hamburger menu. To do this, just override the onPostCreate method of the Activity as shown in the code below.

@Override
    protected void onPostCreate(@Nullable Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);

        drawerToggle.syncState();
    }

Video on how to create android navigation drawer menu