Android Studio : How to create navigation drawer layout

Android provide default material design which is very useful to create interesting looks for android application. One of material design provided is navigationDrawer, a left sliding navigation menu.

1. Create project

Create project in Android Studio and create empty activity and it’s layout. For example we create such:

  • MainActivity.class
  • activity_main.xml

2. Add dependency at build.gradle

add dependency at build.gradle of module

dependencies {
  implementation 'com.android.support:appcompat-v7:27.1.1'
  implementation 'com.android.support:design:27.1.1'
}

3. Update the layout at main_activity.xml to DrawerLayout

Open the layout file activity_main.xml and update the content to something like below:

<?xml version="1.0" encoding="utf-8"?>
<!-- Gunakan DrawerLayout pada container induk -->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- Layout untuk konten dimana drawer akan muncul disini -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- Container untuk konten drawer -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true" />

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

4. Open MainActivity and make sure the content

Open the java class MainActivity we have created and make sure the content is something like below:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }

}

5. Create menu item which will be put on the Drawer

Create menu item in the .xml file. The file should be located in the following folder structure, res>menu>drawer_view.xml.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="@string/import" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="@string/gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="@string/slideshow" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="@string/tools" />
    </group>
</menu>

6. Set menu item on the Drawer

Put the drawer menu item file which was created above to the navigationView in the activity_main.xml using command app:menu below:

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:menu="@menu/drawer_view" />

7. Create header for navigation drawer

We can create drawer header in the top of menu item. Create xml layout file in the layout folder and name it with nav_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="?attr/colorPrimaryDark"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:orientation="vertical"
    android:gravity="bottom">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="My header title"/>

</LinearLayout>

8. Set navigation header to the navigationView

Put the navigation header which is created above to the navigationView in the activity_main.xml using command app:headerLayout.

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:menu="@menu/drawer_view"
    app:headerLayout="@layout/nav_header" />

9. Set action for the navigation Drawer in the Java class file

Below is the complete java file to support navigation drawer include click action handling in each menu items.

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mToggle;
    private NavigationView navigationView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
        mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,R.string.open,R.string.close);

        mDrawerLayout.addDrawerListener(mToggle);
        mToggle.syncState();

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        navigationView = (NavigationView) findViewById(R.id.nav_view);
        setupDrawerContent(navigationView);

    }

   private void setupDrawerContent(NavigationView navigationView) {
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                selectDrawerItem(menuItem);

                return true;
            }
        });
    }

    //method untuk eksekusi action dari tiap menu item
    public void selectDrawerItem(MenuItem menuItem) {
        Fragment fragment = null;
        Class fragmentClass;

        switch (menuItem.getItemId()) {
            case R.id.nav_home:
                //action
                break;
            case R.id.nav_gallery:
                //action
                break;
            case R.id.nav_slideshow:
                //action
                break;
            case R.id.nav_manage:
                //action
                break;
         
        }


        menuItem.setChecked(true);
        mDrawerLayout.closeDrawers();
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item){
        if(mToggle.onOptionsItemSelected(item)){
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

10. Finish

The next step is to create action for every menu item which will be tapped.

Leave a Reply

Your email address will not be published. Required fields are marked *