Android Studio : Cara membuat navigation drawer layout

Aplikasi android dengan desain material design akan lebih menarik dengan menambahkan menu atau navigasi pada navigation drawer. Navigation drawer letaknya tersembunyi sebelah kiri layar.

1. Buat project

Buat project baru dalam Android Studio. Kemudian buat satu Activity kosong beserta layoutnya. Misal class dan xml layout  yang kita buat dengan nama seperti dibawah ini:

  • MainActivity.class
  • activity_main.xml

2. Masukkan dependensinya pada build.gradle

masukkan dependensi pada build.gradle bagian modul

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

3. Ganti layout pada main_activity.xml menjadi DrawerLayout

buka layout file activity_main.xml dan ganti semua isinya menjadi seperti dibawah ini.

<?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. Buka MainActivity dan pastikan isinya

buka MainActivity dan pastikan isi konten nya seperti dibawah ini:

public class MainActivity extends AppCompatActivity {

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

    }

}

5. Buat menu item yang akan terpasang pada Drawer

Buat file xml yang berisi item dari menu yang akan dipasang pada drawer. File ini berada di folder menu dibawah folder res. misalnya 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 pada Drawer

masukkan drawer menu item  yang telah kita buat di atas kedalam navigationView pada layout activity_main.xml dengan perintah app:menu = “@menu/drawer_view.

<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. Buat header untuk nav Drawer

buat satu file layout .xml untuk header pada drawer. Simpan dibawah folder layout dan kita namai 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 nav_header kedalam navigationView

masukkan nav_header yang kita buat diatas kedalam navigationView yang telah kita buat di file layout activity_main.xml dengan perintah app:headerLayout = “@layout/nav_header.

<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 untuk navigation Drawer pada file Java

Berikut adalah file lengkap java nya untuk action pada navigation Drawer termasuk action untuk klik masing-masing menunya.

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. Selesai

Tinggal buat action untuk masing-masing menunya.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *