Belajar Cara Membuat Bottom Navigation View di Android Material Design

Oleh Wildan M Athoillah 21.26

Assalamualaikum Warahmatullahi Wabarakatuh.

Hallo semuanya, pada postingan ini saya akan menjelaskan tutorial mengenai cara membuat Bottom Navigation View menggunakan Android Studio. Bottom Navigation View adalah salah satu view Material Design yang di luncurkan oleh Google, view ini sangat berguna sekali untuk pengembangan aplikasi android.

Salah satu contoh aplikasi yang menggunakan Bottom Navigation yaitu Instagram, pada Instagram. user dapat dengan mudah untuk berpindah dari satu halaman ke halaman lainnya. Pada Bottom Navigation, kita dapat menambahkan teks dan juga icon.

Materi lainnya yang direkomendasikan:

Sebelum kita memulai tutorial ini, disarankan kalian sudah paham mengenai penggunaan Fragment, karena disini kita akan menggunakan Fragment sebagai wadah untuk konten yang akan diamasukan kedalam aplikasi.

Belajar Cara Membuat Bottom Navigation View di Android Material Design

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Pertama-tama kita masukan library berikut ini pada dependencies didalam file build.gradle (app level).

implementation 'com.android.support:appcompat-v7:27.0.2'
implementation 'com.android.support:design:27.0.2'

3) Berikutnya kita buat file baru pada folder drawable, bernama "color_selector", ini digunakan untuk menandakan state yang sedang aktif dan tidak aktif, contohnya saat user mengklik salah satu menu pada Bottom Navigation, maka menu icon/teks tersebut akan berubah warna.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:color="@android:color/holo_red_dark"/>
    <item android:color="@android:color/darker_gray"/>

</selector>

4) Sebelum membuat menu resource, kita perlu membuat iconnya terlebih dahulu, karena kita akan menggunakan icon beserta teks untuk menu Botton Navigationnya. Klik kalan pada folder res > New > Image Asset.

Buat 3 buah icon seperti home, person dan notifications.

5) Selanjutnya kita perlu membuat menu resource pada direktori res / menu. caranya klik kanan pada folder res > New > Android resurce file. Ubah Resource typenya menjadi Menu, lalu berinama file tersebut, misalnya "bottom_menu" setelah itu klik OK.

Buka file tersebut, buat 3 menu icon beserta teksnya seperti berikut ini.

<?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/home"
          android:icon="@drawable/ic_action_home"
          android:title="Home" />

    <item android:id="@+id/person"
          android:icon="@drawable/ic_action_person"
          android:title="Profile" />

    <item android:id="@+id/notidications"
          android:icon="@drawable/ic_action_notifications"
          android:title="Notification" />

</menu>

6) Tahap selanjutnya kita buat 3 buah fragment untuk masing-masing halaman menu Bottom Navigation. Didalam fragment tersebut kita hanya akan menambahkan TextView saja.

1. fragment_home.xml :

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.materialdesignexample.Home">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Home Page"
        android:textSize="20sp"
        android:textStyle="bold" />
    
</RelativeLayout>

Home.java :

package android.cianjur.developer.net.materialdesignexample;

import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Home extends Fragment {
    
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
}

2. fragment_profile.xml :

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.materialdesignexample.Profile">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Profile Page"
        android:textSize="20sp"
        android:textStyle="bold" />

</RelativeLayout>

Profile.java :

package android.cianjur.developer.net.materialdesignexample;

import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Profile extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_profile, container, false);
    }
}

3. fragment_notification.xml :

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.materialdesignexample.Notification">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Notification Page"
        android:textSize="20sp"
        android:textStyle="bold" />

</RelativeLayout>

Notification.java :

package android.cianjur.developer.net.materialdesignexample;

import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Notification extends Fragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_notification, container, false);
    }
}

7) Buka file activity_main.xml kalian, disini kita implementasikan FrameLayout yaitu sebagai wadah untuk Fragment yang sudah kita buat sebelumnya beserta BottomNavigationView.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.materialdesignexample.MainActivity">

    <FrameLayout
        android:id="@+id/page_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottomNavigationView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

    </FrameLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemIconTint="@drawable/color_selector"
        app:itemTextColor="@drawable/color_selector"
        android:background="@android:color/white"
        app:menu="@menu/bottom_menu" />

</RelativeLayout>

Berikut ini adalah fungsi dari beberapa atribut BottomNavigationView yang telah kita terapkan:

app:itemIconTint : untuk mendefinisikan warna icon pada menu.
app:itemTextColor : untuk mendefinisikan warna teks pada menu.
android:background : untuk mendefinisikan warna latar belakang.
app:menu : untuk mendefinisikan menu yang akan ditampilkan.

8) Berikutnya buka MainActivity.java, masukan source code berikut ini beserta penjelasannya.

package android.cianjur.developer.net.materialdesignexample;

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

public class MainActivity extends AppCompatActivity {

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

        //Menampilkan halaman Fragment yang pertama kali muncul
        getFragmentPage(new Home());

        /*Inisialisasi BottomNavigationView beserta listenernya untuk
         *menangkap setiap kejadian saat salah satu menu item diklik
         */
        BottomNavigationView bottomNavigation = findViewById(R.id.bottomNavigationView);
        bottomNavigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                Fragment fragment = null;

                //Menantukan halaman Fragment yang akan tampil
                switch (item.getItemId()){
                    case R.id.home:
                        fragment = new Home();
                        break;

                    case R.id.person:
                        fragment = new Profile();
                        break;

                    case R.id.notidications:
                        fragment = new Notification();
                        break;
                }
                return getFragmentPage(fragment);
            }
        });
    }

    //Menampilkan halaman Fragment
    private boolean getFragmentPage(Fragment fragment){
        if (fragment != null){
            getSupportFragmentManager()
                    .beginTransaction()
                    .replace(R.id.page_container, fragment)
                    .commit();
            return true;
        }
        return false;
    }
}

Demo:

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.