Cara Membuat Aplikasi Android

Cara Membuat Android Navigation Drawer, Side Navigasi Menu

Membuat Android Navigation Drawer – Kali ini kita akan mencoba membuat navigation drawer pada aplikasi berbasis android. Navigation drawer adalah sebuah menu yang biasanya ditempatkan pada sisi kiri layar aplikasi (side menu navigation), hampir setiap aplikasi memiliki komponen ini sebagai navigasi pada tampilan antar muka nya, maka dari itu saya mencoba untuk menjabarkan bagaimana cara membuat android navigation drawer secara sederhana.

Goals – Mampu Membuat Android Navigation Drawer

Tujuan dari pembahasan ini adalah mampu dan pahamnya kita dalam pembuatan navigation browser pada android, kita akan membahasnya langkah demi langkah guna memudahkan kita untuk memahami bagaimana cara kerja dari navigation browser ini. Dan berikut ini adalah contoh hasil dari navigation browser yang kita buat :

Membuat Android Navigation Drawer
Navigation Browser

Materi Pembahasan

Untuk dapat menggunakan navigation drawer, kita akan memanfaatkan widget DrawerLayout sebagai layout utama, cara menggunakannya mudah tinggal kita tambahkan saja widget ini pada layout utama yang kita miliki (dalam case ini, acticity_main.xml adalah layout yang saya gunakan sebagai layout utama). Ubah activity_main menjadi seperti ini :

<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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:id="@+id/container_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <include
                android:id="@+id/toolbar"
                layout="@layout/toolbar" />

        </LinearLayout>

        <FrameLayout
            android:id="@+id/content_frame"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="220dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#ffffff"
        android:choiceMode="singleChoice"
        android:divider="@android:color/darker_gray"
        android:dividerHeight="1dp" />

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

Lalu berikutnya kita akan memanfaatkan Toolbar sebagai wadah untuk menempatkan elemen navigasi atau menu, buatlah sebuah layout dengan nama toolbar.xml, isi dari toolbar.xml seperti :

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    local:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    local:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Dikarenakan menu navigasi yang akan kita buat ditaruh pada komponen listView, maka kita juga perlu membuat layout untuk menampung masing-masing item pada menu navigasi. Buatlah layout list_view_item_row.xml dan isikan code berikut ini :

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/activatedBackgroundIndicator"
    android:minHeight="?android:attr/listPreferredItemHeightSmall"
    android:padding="10dp">

    <ImageView
        android:id="@+id/imageViewIcon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:paddingRight="10dp" />

    <TextView
        android:id="@+id/textViewName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/imageViewIcon"
        android:paddingRight="10dp"
        android:text="Item Name"
        android:textColor="@android:color/black"
        android:textAppearance="?android:attr/textAppearanceListItemSmall" />

</RelativeLayout>

Lalu untuk masing-masing nama menu akan kita taruh dalam file values/strings.xml, tambahkan code berikut ini :

<string-array name="navigation_drawer_items_array">
        <item>Barang</item>
        <item>Transaksi</item>
        <item>User</item>
</string-array>

Kita juga akan membuat model untuk men-definisikan masing-masing item pada list navigasi, buatlah sebuah class dengan nama SideMenu dan isikan code berikut ini :

package com.soft_gain.myinventory.Model;

public class SideMenu {
    public int icon;
    public String name;

    public SideMenu(int icon, String name) {
        this.icon = icon;
        this.name = name;
    }
}

Dikarenakan kita menggunakan model, kita juga membutuhkan adapter yang membantu kita mengelola data dari model dan men-presentasikan-nya pada listview. Buatlah sebuah class baru dengan nama SideMenuAdapter, lalu isikan code berikut ini :

package com.soft_gain.myinventory;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.soft_gain.myinventory.Model.SideMenu;

public class SideMenuAdapter extends ArrayAdapter<SideMenu> {
    Context mContext;
    int layoutResourceId;
    SideMenu data[] = null;

    public SideMenuAdapter(Context mContext, int layoutResourceId, SideMenu[] data) {
        super(mContext, layoutResourceId, data);
        this.layoutResourceId = layoutResourceId;
        this.mContext = mContext;
        this.data = data;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View listItem = convertView;

        LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
        listItem = inflater.inflate(layoutResourceId, parent, false);

        ImageView imageViewIcon = (ImageView) listItem.findViewById(R.id.imageViewIcon);
        TextView textViewName = (TextView) listItem.findViewById(R.id.textViewName);

        SideMenu folder = data[position];


        imageViewIcon.setImageResource(folder.icon);
        textViewName.setText(folder.name);

        return listItem;
    }
}

Berikutnya kita akan melakukan sedikit modifikasi pada MainActivity.java, pertama-tama deklarasi-kan attribute berikut pada class MainActivity :

private String[] mNavigationDrawerItemTitles;
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
Toolbar toolbar;
private CharSequence mDrawerTitle;
private CharSequence mTitle;
android.support.v7.app.ActionBarDrawerToggle mDrawerToggle;

Berikutnya lakukan modifikasi pada bagian onCreate :

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTitle = mDrawerTitle = getTitle();
        mNavigationDrawerItemTitles= getResources().getStringArray(R.array.navigation_drawer_items_array);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);

        setupToolbar();

        DataModel[] drawerItem = new DataModel[3];

        drawerItem[0] = new DataModel(R.drawable.connect, "Barang");
        drawerItem[1] = new DataModel(R.drawable.fixtures, "Transaksi");
        drawerItem[2] = new DataModel(R.drawable.table, "User");
        getSupportActionBar().setDisplayHomeAsUpEnabled(false);
        getSupportActionBar().setHomeButtonEnabled(true);

        DrawerItemCustomAdapter adapter = new DrawerItemCustomAdapter(this, R.layout.list_view_item_row, drawerItem);
        mDrawerList.setAdapter(adapter);
        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerLayout.setDrawerListener(mDrawerToggle);
        setupDrawerToggle();
}

Lalu tambahkan juga metode-metode berikut ini pada class MainActivity :

    private class DrawerItemClickListener implements ListView.OnItemClickListener {

        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItem(position);
        }

    }

    private void selectItem(int position) {

        switch (position) {
            case 0:
                Toast.makeText(getApplicationContext() ,"Barang  diclick",Toast.LENGTH_SHORT).show();
                break;
            case 1:
                Toast.makeText(getApplicationContext() ,"Transaksi diclick",Toast.LENGTH_SHORT).show();
                break;
            case 2:
                Toast.makeText(getApplicationContext() ,"User diclick",Toast.LENGTH_SHORT).show();
                break;

            default:
                break;
        }
    }    

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {

        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    public void setTitle(CharSequence title) {
        mTitle = title;
        getSupportActionBar().setTitle(mTitle);
    }

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

    void setupToolbar(){
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayShowHomeEnabled(true);
    }

    void setupDrawerToggle(){
        mDrawerToggle = new android.support.v7.app.ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.app_name, R.string.app_name);
        mDrawerToggle.syncState();
    }

Bagian yang menurut saya paling penting adalah pada metode selectItem, dimana didalamnya terdapat switch statement yang kita gunakan untuk men-execute event berdasarkan menu navigasi mana yang user pilih, untuk contoh diatas kita hanya akan menampilkan informasi berupa popup menggunakan Toast, ke depannya bisa di-kombinasi-kan dengan pemanggilan sebuah activity baru atau pun fragment yang mengantarkan user pada tampilan interface yang berbeda (contoh menggunakan fragment bisa dilihat disini : https://soft-gain.com/2020/06/23/contoh-sederhana-recyclerview-cardview-dengan-implementasi-retrofit/).

Penutup

Demikianlah contoh pembuatan navigation browser pada aplikasi berbasis android, menurut saya konsep pembuatan navigasi seperti ini cukup penting untuk dapat dikuasai dan dipahami mengingat pentingnya komponen ini untuk pengembangan sebuah asplikasi, seperti biasa silahkan ambil source utuhnya pada repo saya (https://github.com/ImmanuelJL/myinventory.git), terima kasih.

Leave a Reply

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