Tahap Demi Tahap Menambahkan Navigation Drawer - Membuat Aplikasi Android

Navigation Drawer adalah sebuah panel yang menunjukan navigasi utama sebuah aplikasi (android) yang berada diujung kiri tampilan. Banyak aplikasi populer untuk sistem operasi android yang menggunakan menu / navigation drawer ini, dan menurut saya pribadi, tampilan menu dengan model seperti ini sangat efektif untuk sebuah aplikasi. Kurang lebih nanti hasilnya akan seperti ini …

Untuk membuat tampilan menu seperti video diatas hanya memerlukan sebuah class java dan sebuah layout. Untuk memulai langsung saja menuju kode layout, Elemen dengan strata tertinggi pada layout kali ini adalah


```xml
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer_layout">
...
</android.support.v4.widget.DrawerLayout>

Selanjutnya adalah menambahkan elemen ListView sebagai drawer-nya

<ListView
    android:layout_width="200dp"
    android:layout_height="match_parent"
    android:id="@+id/navList"
    android:layout_gravity="left|start"
    android:background="#ffeeeeee"/>

ListView (atau apapun yang view yang digunakan sebagai drawer), sebaiknya tidak lebih dari 320dp untuk atribut android:layout_width - nya, sehingga kemunculan drawer tidak akan menutup seluruh permukaan aplikasi.

Supaya tampilan sama berikut adalah kode lengkap untuk layout-nya …

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer_layout">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        android:background="#ffffffff">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:text="@string/text_main"
            android:textSize="24sp"
            android:gravity="center"
            android:layout_marginTop="100dp"/>
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@android:drawable/sym_def_app_icon"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:contentDescription="@string/gambar_asal" />
    </RelativeLayout>
    <ListView
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:id="@+id/navList"
        android:layout_gravity="left|start"
        android:background="#ffeeeeee"/>
</android.support.v4.widget.DrawerLayout>

Setelah layout-nya selesai, sekarang saatnya untuk memasuki tahap selanjutnya yaitu mengetik kode java.

Kelas java yang digunakan disini merupakan extends dari kelas AppCompatActivity (kemungkinan update menjadi deprecated bisa disesuaikan dengan kode terbaru).

Drawer yang digunakan kali ini adalah sebuah ListView, sehingga properti pada kode java nya pun akan disesuaikan dengan elemen tersebut. Pada kode java akan digunakan sebuah array String sebagai tempat data list disimpan, dan sebuah ArrayAdapter untuk variabel konversinya.

Mulai, tambahkan 2 anggota baru sebagai variabel ke dalam Activity-nya:

private ListView mDrawerList;
private ArrayAdapter<String> mAdapter;

Kemudian arahkan variabel ListView(mDrawerList) dengan elemen yang ada pada layout didalam method onCreate():

mDrawerList = (ListView) findViewById(R.id.navList);

Daftar menu akan dipisah menjadi sebuah helper method tersendiri sehingga kode lebih rapi dan dipanggil didalam onCreate():

private void addDrawerItems(){
    String[] osArray = {"Ayam Goreng", "Sate", "Rendang", "Bakso", "Gorengan"};
    mAdapter.set(new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, osArray));
    mDrawerList.setAdapter(mAdapter.get());
}

Sampai disini, drawer sudah bisa di-_draw_ … dan selanjutnya

Toggle tampilan menu (tombol hamburger ≡ / ← tombol kembali)

Tahap ini lebih kepada pendekatan desain, jadi menu akan tampil sesuai dengan petunjuk simbol ini - ≡ (menu belum tampil) , ← (menu tampil).

tambahkan kode berikut pada method onCreate():

if(getSupportActionBar() != null){
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    getSupportActionBar().setHomeButtonEnabled(true);
}

Supaya tampilan bekerja seperti seharusnya dibutuhkan sesuatu yang disebut dengan ActionBarDrawerToggle. Dimulai dengan beberapa tambahan variabel untuk membantu objek ini bekerja, sebuah variabel untuk toggle, sebuah untuk DrawerLayout representasi, dan sebuah String untuk pembaharuan judul pada daerah ActionBar:

private ActionBarDrawerToggle mDrawerToggle;
private DrawerLayout mDrawerLayout;
private String mActivityTitle;

Masukan kedalam method onCreate():

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mActivityTitle = getTitle().toString();

Buat sebuah helper method kembali khusus untuk pembentukan drawer, method ini kurang lebih bercerita tentang men-_toggle_-kan ActionBar, ketika drawer dibuka judul ActionBar = “Menunya”, ketika drawer tertutup ActionBar = (judul sesuai dengan nilai dari mActivityTitle). Jangan lupa panggil setupDrawer() didalam onCreate()

private void setupDrawer() {
    mDrawerToggle = new ActionBarDrawerToggle(
            this
            , mDrawerLayout
            , R.string.drawer_open
            , R.string.drawer_close
    ){
        public void onDrawerOpened(View drawerView){
            super.onDrawerOpened(drawerView);
            if(getSupportActionBar() != null){
                getSupportActionBar().setTitle("Menunya");
            }
            invalidateOptionsMenu();
        }

        public void onDrawerClosed(View view){
            super.onDrawerClosed(view);
            if(getSupportActionBar() != null){
                getSupportActionBar().setTitle(mActivityTitle);
            }
            invalidateOptionsMenu();
        }
    };
}

Sayangnya, toggle yang telah dibuat masih belum bekerja dengan baik, dibutuhkan 2 baris kode lagi untuk memungkinkan simbol ≡ berfungsi yang kemudian memasang objek toggle baru pada layout drawer. Tambahkan kode berikut kedalam


```java
mDrawerToggle.setDrawerIndicatorEnabled(true);
mDrawerLayout.setDrawerListener(mDrawerToggle);

Akhirnya, aktifkan hal berikut pada method onOptionsItemSelected().

public boolean onOptionsItemSelected(MenuItem item) {
    int id = item.getItemId();

    return
            id == R.id.action_settings
                    || mDrawerToggle.onOptionsItemSelected(item)
                    || super.onOptionsItemSelected(item);
}

Indahnya Sinkronisasi

Dapat diperhatikan bahwa kode sementara belum bekerja secara sempurna antara drawer dengan pergantian simbol dan ketika terjadi pergantian state didalam Activity (orientation changes). Untuk melengkapi tambahkan kode berikut …

@Override
protected void onPostCreate(Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    mDrawerToggle.syncState();
}

@Override
public void onConfigurationChanged(Configuration newConfig) {
    super.onConfigurationChanged(newConfig);
    mDrawerToggle.onConfigurationChanged(newConfig);
}

Kode lengkap untuk Activity-nya:

package com.example.dwi.nd;

import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private ListView mDrawerList;
    private final ThreadLocal<ArrayAdapter<String>> mAdapter = new ThreadLocal<>();

    private ActionBarDrawerToggle mDrawerToggle;
    private DrawerLayout mDrawerLayout;
    private String mActivityTitle;

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

        mDrawerList = (ListView) findViewById(R.id.navList);
        addDrawerItems();

        mDrawerList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(
                        MainActivity.this
                        , "Menu nomor-" + position + " dipilih!"
                        , Toast.LENGTH_SHORT
                ).show();
            }
        });

        if(getSupportActionBar() != null){
            getSupportActionBar().setDisplayHomeAsUpEnabled(true);
            getSupportActionBar().setHomeButtonEnabled(true);
        }

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mActivityTitle = getTitle().toString();

        setupDrawer();

        mDrawerToggle.setDrawerIndicatorEnabled(true);
        mDrawerLayout.setDrawerListener(mDrawerToggle);
    }

    private void setupDrawer() {
        mDrawerToggle = new ActionBarDrawerToggle(
                this
                , mDrawerLayout
                , R.string.drawer_open
                , R.string.drawer_close
        ){
            public void onDrawerOpened(View drawerView){
                super.onDrawerOpened(drawerView);
                if(getSupportActionBar() != null){
                    getSupportActionBar().setTitle("Menunya");
                }
                invalidateOptionsMenu();
            }

            public void onDrawerClosed(View view){
                super.onDrawerClosed(view);
                if(getSupportActionBar() != null){
                    getSupportActionBar().setTitle(mActivityTitle);
                }
                invalidateOptionsMenu();
            }
        };
    }

    private void addDrawerItems(){
        String[] osArray = {"Ayam Goreng", "Sate", "Rendang", "Bakso", "Gorengan"};
        mAdapter.set(new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, osArray));
        mDrawerList.setAdapter(mAdapter.get());
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();

        return
                id == R.id.action_settings
                        || mDrawerToggle.onOptionsItemSelected(item)
                        || super.onOptionsItemSelected(item);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }
}

#Android #NavigationDrawer