Tutorial Membuat Bottom Navigation View di Android (Material Design)

Last Updated on 7 years by Mas Herdi

Halo semuanya, melanjutkan tutorial series saya tentang Android Material Design. Tampaknya Google terus-menerus meluncurkan elemen baru untuk melengkapi view-view yang sudah ada di Material Design spec. Salah satu view yang baru-baru ini diluncurkan adalah Bottom Navigation View. Bottom Navigation View berfungsi untuk memberikan kemudahan navigasi dengan menaruh menu tambahan pada bagian bawah aplikasi. Bentuk menunya tabbed mirip seperti TabLayout. Dan di tutorial ini kita akan belajar membuat Bottom Navigation View  di Android menggunakan Android Studio.

Belajar Membuat Material Design Bottom Navigation View Menggunakan Android Studio

Sebelum lanjut, ada baiknya kalian membaca-baca dahulu tutorial-tutorial di bawah ini :

Pre-requisites :

• Membuat Tema/Style pada Android Material Design
• Tutorial Lengkap Android Material Design

Jika sudah, kita akan mulai dengan membuat sebuah project Android baru di Android Studio terlebih dahulu.

Setelah itu tambahkan dependency Material Design ke dalam file build.gradle pada project aplikasi Android kalian:

dependencies {
    compile 'com.android.support:design:25.1.1'
}

Kemudian kita akan buat color selector pada folder drawable, selector ini berfungsi untuk menandakan mana state aktif dan tidak aktif dari Bottom Navigation View. Buat file state_list.xml dan masukkan kode di bawah ini :

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/white" android:state_checked="true" />
    <item android:color="@color/color_primary_dark"/>
</selector>

Untuk pendefinisian resource color di material design, kalian bisa mengikuti tutorial ini.

Tahap selanjutnya adalah mendefine menu resource yang akan dipakai oleh Bottom Navigation View, cara kerjanya mirip seperti pada Navigation Drawer. Buka folder res/menu/ dan buat file xml menu baru bernama menu_bottom_nav_view.xml. Setelah itu copy pastekan kode berikut :

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_home"
        android:enabled="true"
        android:icon="@drawable/ic_home"
        android:title="Home"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_money"
        android:enabled="true"
        android:icon="@drawable/ic_money"
        android:title="Bank"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_star"
        android:enabled="true"
        android:icon="@drawable/ic_star"
        android:title="Star"
        app:showAsAction="ifRoom" />
</menu>

Untuk icon pada menu, kalian bisa ganti atau sesuaikan sendiri. 🙂

Jika sudah dilakukan semua, selanjutnya buka file activity_main.xml, dan tambahkan view BottomNavigationView seperti di bawah ini :

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/btm_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/twoh_primary"
        app:itemIconTint="@drawable/state_list"
        app:itemTextColor="@drawable/state_list"
        app:menu="@menu/menu_bottom_nav_view" />

</RelativeLayout>

Kemudian untuk kelas Activity-nya, kalian bisa buka file MainActivity.java dan copy pastekan kode berikut ini :

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.widget.Toast;

/**
 * Created by Hafizh Herdi on 3/5/2017.
 */

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView bottomNavigationView;

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

        bottomNavigationView = (BottomNavigationView) findViewById(R.id.btm_nav);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                switch (item.getItemId()){
                    case R.id.action_home :
                        Toast.makeText(BottomNavigationViewActivity.this, "Home clicked", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_star :
                        Toast.makeText(BottomNavigationViewActivity.this, "Star clicked", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_money :
                        Toast.makeText(BottomNavigationViewActivity.this, "Money clicked", Toast.LENGTH_SHORT).show();
                        break;
                }

                return true;
            }
        });

        super.onCreate(savedInstanceState);
    }

}

Pada MainActivity di atas, kita hanya akan memanggil elemen BottomNavigationView seperti yang sudah kita buat di layout. Dan kemudian mengeset listener pada menunya, sehingga apabila diklik akan memunculkan Toast berisi nama menu yang sedang diklik.

Demo

Oke, beginilah tampilan aplikasi ketika kita jalankan.

Bottom Navigation View

Kemudian apabila kita klik menu yang lain, akan muncul Toast seperti tampilan di bawah ini :

Bottom Navigation View ketika diklik

That’s all ! Semoga membantu! Source code nya bisa kalian download dan jalankan sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. 🙂 Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 😀