Tutorial Android : Contoh Penggunaan BottomNavigation Sebagai Navigasi View

Bismillaah,

Tutorial Belajar Membuat Aplikasi Android - Cara Membuat Aplikasi Android Dengan Android Studio. Dalam sebuah aplikasi skala menengah atau besar, tentu fitur navigasi merupakan hal yang sangat penting. Navigasi biasanya digunakan untuk menavigasi atau memindahkan user dari halaman satu ke halaman yang lain. Nah didalam android, salah satu navigasi yang sudah dalam paket Material Design ialah BottomNavigation.

Dalam contoh ini kita akan mencoba memakai BottomNavigation dengan menggunakan fragment sebagai container halamannya.

1. Buat Project

Buat project dengan nama sesuai keinginan. Pilih Empty Activity (sebenarnya membuat Bottom Navigation sudah ada secara built-in saat pemilihan jenis activity yaitu Bottom Navigation activity, tapi disini kita ingin coba membuat nya secara manual, maka itu kita pilih empty activity).

Tambahkan dependencies berikut dan Sync Now:

implementation 'com.android.support:design:27.0.2'

Project ini dibuat dengan compileSdkVersion 27. Jika ada error (garis merah di dependencies), maka sesuaikan versi nya dengan compileSdkVersion !

 

2. Persiapan Resource

String dan Color

Pertama kita buat resource string dan color, kita tempatkan string dan color aplikasi di dalam resource. Teknik sangat bagus daripada kita harus hardcoding. Tambahkan baris berikut dalam file res>values>color.xml.

Juga kita tambahkan string untuk string menu di res>values>strings.xml

Drawable

Kita tambahkan icon untuk tiap-tiap menu. Klik kanan res -> New -> Vector Asset. Kemudian cari icon dengan nama home, search, favorite, account.

Buatlah dengan nama file masing-masing : ic_home, ic_search, ic_favorite, ic_account.

Menu

Kita buat menu untuk Bottom Navigation. Klik kanan pada folder res -> New -> Android resource file. Buat nama file bottomnavigation_menu.xml dan ubah Resource type nya menjadi Menu. Setelah itu masukkan kode berikut :

State Enabled/Disabled

Disini kita tambahkan state selector untuk memberikan efek perubahan warna saat salah satu menu di bottomnavigationview di pilih :

Atribut android:state_checked=”true” berguna untuk menandai object menu yang terpilih dan disitu kita ubah warna menu (icon & text nya) menjadi warna putih.

Layout 

Menambahkan BottomNavigationView
Kita tambahkan komponen BottomNavigationView dan FrameLayout sebagai container fragment nya di activity_main :

Karena kita akan memakai fragment sebagai halaman navigasinya, maka kita membuat layout untuk fragment. Disini kita buat 4 layout : fragment_home, fragment_search, fragment_favorite, dan fragment_account :

3. Memulai Logic Coding

Buat Fragment  

Kita buat 4 class Fragment dengan nama masing-masing : HomeFragment, SearchFragment, FavoriteFragment, AccountFragment, dan masukkan kode berikut :
Pastikan import fragment yang digunakan ialah android.support.v4.app.Fragment

Load Fragment

Masukkan kode berikut di dalam method onCreate() di MainActivity.java

// kita set default nya Home Fragment
        loadFragment(new HomeFragment());

        // inisialisasi BottomNavigaionView
        BottomNavigationView bottomNavigationView = findViewById(R.id.bn_main);
        // beri listener pada saat item/menu bottomnavigation terpilih
        bottomNavigationView.setOnNavigationItemSelectedListener(this);

1. Pada kode diatas kita load default untuk fragment yang pertama kali tampil yaitu Home Fragment 
2. Inisialisasi Objek BottomNavigation 
3. Memberi listener untuk BottomNavigation 

Jika terdapat error pada kata this, maka letakkan kursor di kata this kemudian tekan Alt+Enter, atau tambahkan implement pada activity seperti berikut :

public class MainActivity extends AppCompatActivity 
implements BottomNavigationView.OnNavigationItemSelectedListener {

Tambahkan method loadFragment() dibawah onCreate():

// method untuk load fragment yang sesuai
    private boolean loadFragment(Fragment fragment) {
        if (fragment != null){
            getSupportFragmentManager().beginTransaction()
                    .replace(R.id.fl_container, fragment)
                    .commit();
            return true;
        }
        return false;
    }

 Tambahkan method dibawah ini dibawah loadFragment() :

// method listener untuk logika pemilihan
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        Fragment fragment = null;

        switch (item.getItemId()){
            case R.id.home_menu:
                fragment = new HomeFragment();
                break;
            case R.id.search_menu:
                fragment = new SearchFragment();
                break;
            case R.id.favorite_menu:
                fragment = new FavoriteFragment();
                break;
            case R.id.account_menu:
                fragment = new AccountFragment();
                break;
        }

        return loadFragment(fragment);
    }

Intinya pada logika diatas, saat item/menu diklik maka akan diarahkan sesuai dengan fragment nya.

Jika ada yang butuh source code-nya, silahkan kunjungi repo berikut : https://github.com/dimasvm/BottomNavigationView
Nah itu dia cara pembuatan BottomNavigation. Semoga tutorial ini bermanfaat. Jika ada yang ingin saran tambahan, pertanyaan atau lainnya silahkan berdiskusi di kolom komentar ya ?!.

Happy Coding.!