Tutorial Android : Pola 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 dipakai untuk menavigasi atau memindahkan user dari halaman satu ke halaman yang lain. Nah didalam android, salah satu navigasi yang sudah dalam paket Material Design yaitu BottomNavigation.

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

1. Buat Project

Buat project dengan nama sesuai keinginan. Pilih Empty Activity (sebenarnya menciptakan Bottom Navigation sudah ada secara built-in ketika pemilihan jenis activity yaitu Bottom Navigation activity, tapi disini kita ingin coba menciptakan 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 dibentuk 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 anggun daripada kita harus hardcoding. Tambahkan baris berikut dalam file res>values>color.xml.

Juga kita tambahkan string untuk string hidangan 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.

Layout

Karena kita menggunakan fragment sebagai halaman navigasi nya, maka kita buat layout untuk fragment. Kita buat 4 layout fragment dengan ketentuan berikut :

Nama Fragment	Atribut
fragment_home.xml	android:id="@+id/tv_home" android:text="@string/home"
fragment_search.xml	android:id="@+id/tv_search" android:text="@string/search"
fragment_favorite.xml	android:id="@+id/tv_favorite" android:text="@string/favorite"
fragment_account.xml	android:id="@+id/tv_account" android:text="@string/account"

Setiap layout file diganti dengan ketentuan tersebut

3. Memulai Logic Coding

Buat Fragment

Kita buat 4 class Fragment dengan nama masing-masing : HomeFragment, SearchFragment, FavoriteFragment, AccountFragment, dan masukkan instruksi berikut :

Ganti dan sesuaikan R.layout.nama_fragment masing-masing di tiap -tiap kelas fragment.

Load Fragment

Masukkan instruksi berikut di dalam method onCreate() di MainActivity.j4va

// kita set default nya Home Fragment         loadFragment(new HomeFragment());          // inisialisasi BottomNavigaionView         BottomNavigationView bottomNavigationView = findViewById(R.id.bn_main);         // beri listener pada ketika item/menu bottomnavigation terpilih         bottomNavigationView.setOnNavigationItemSelectedListener(this);

Pada instruksi diatas kita load default untuk fragment yang pertama kali tampil yaitu Home Fragment
Inisialisasi Objek BottomNavigation
Memberi listener untuk BottomNavigation

Jika terdapat error pada kata this, maka letakkan kursor di kata this lalu tekan Alt+Enter, atau tambahkan implement pada activity menyerupai 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 budi 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 budi diatas, ketika item/menu diklik maka akan diarahkan sesuai dengan fragment nya.

Nah itu beliau cara pembuatan BottomNavigation. Semoga tutorial ini bermanfaat. Jika ada yang ingin saran tambahan, pertanyaan atau lainnya silahkan berdiskusi di kolom komentar ya ?!.

Happy Coding.!

Sumber http://easyandroidindonesia.blogspot.com