Bottomnavigationview With Fragments Android Studio Tutorial

Cara Membuat BottomNavigation Material Design dengan Android Support Library

Image taken from easyandroidindonesia.blogspot.com

Bismillaah,

T
utorial Berlatih Membuat Aplikasi Android — Cara Membuat Aplikasi Android Dengan Android Bengkel seni. Privat sebuah aplikasi rasio menengah atau raksasa, tentu fitur navigasi merupakan situasi yang adv amat penting. Navigasi biasanya digunakan untuk mengincarkan atau memindahkan user berusul halaman satu ke pelataran yang lain.
Nah,
didalam android sendiri, salah satu navigasi yang sudah suka-suka dalam paket Material Design ialah

BottomNavigation
.

GIF taken from easyandroidindonesia.blogspot.com

Dalam karangan saya kali ini, kita akan mengepas menggunakan navigasi
BottomNavigation
dengan memperalat fragment misal container halamannya.

Bikin Project

Ancang pertama nan terbiasa dilakukan ialah tentu saja membentuk sebuah
project
dengan nama sesuai keinginan kita. Detik mengerjakan
settingan project
baru pilihlah
Empty Activity. Sepantasnya
BottomNavigation
sudah ada secara
built-in
saat penyaringan keberagaman
activity
nan mau dipakai, ialah
BottomNavigation
Activity, tapi disini kita akan mencoba membuatnya secara manual, maka bersumber itu kita memilih
Empty Activity.

Selanjutnya, tambahkan
dependencies
berikut dan lakukan
Sync Now
plong
project
tersebut.

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

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

Persiapan Resource

String dan Color

Langkah selanjutnya ialah buatlah
resource
maujud
string
dan
color.
Tempatkan kedua
resource
tersebut pada
package resource. Teknik ini sangat bagus daripada kita harus mengerjakan
hardcoding
di aplikasi kita nantinya. Selain itu ini membuat sebuah
resource
yang pasti saja
reusable.
Tambahkan baris berikut dalam
resource color
nan kita bakal sebelumnya, yaitu di
res>values>color.xml.

Terlampau tambahkan juga puas
resource string
yang sebelumnya lakukan
string
menu di
res>values>strings.xml

Drawable

Untuk penggunan
icon
kita menggunakan
vector.
Tambahkan icon lakukan setiap menu. Klik kanan
res -> New -> Vector Asset. Kemudian cari icon dengan nama
home, search, favorite, account.
Buatlah nama file tiap-tiap:
ic_home, ic_search, ic_favorite, ic_account.

Menu

Sangat masa ini kita akan menambahkan 4 item menu untuk Bottom Navigation. Klik kanan sreg folder
res -> New -> Android
resource
file. Buat nama file
bottomnavigation_menu.xml
dan ubah
resource type-nya menjadi
Menu.
Sesudah itu masukkan kode berikut :

State Enabled/Disabled

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

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

Layout

Menambahkan BottomNavigationView

Kita tambahkan suku cadang
BottomNavigationView
dan
Frame Layout
sebagai
container
berpunca
fragment
di layout
activity_main :

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

Memulai Logic Coding

Untuk Fragment

Langkah selanjutnya ialah pembuatan
fragment. Mari kita buat 4
class
Fragment
dengan label masing-masing :
HomeFragment, SearchFragment, FavoriteFragment, AccountFragment
dan masukkan kode berikut :

Pastikan
import fragment
nan digunakan ialah
android.support.v4.app.Fragment

Load Fragment

Cak bagi menampilkan
Fragment, tambahkan 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 plong saat item/menu bottomnavigation terpilih
bottomNavigationView.setOnNavigationItemSelectedListener(this);
  • Pada kode diatas kita tampilkan default buat fragment yang mula-mula kali tampil yaitu Home Fragment
  • Selanjutnya inisialisasi Target BottomNavigation
  • Habis berikan listener lakukan BottomNavigation

Jikalau terdapat error pada kata
this,
maka letakkan kursor di kata this kemudian tekan

Alt+Enter
, maupun tambahkan implement pada activity seperti berikut :

        public class MainActivity extends AppCompatActivity
          
implements BottomNavigationView.OnNavigationItemSelectedListener {

Tambahkan method

loadFragment()

dibawah

onCreate()
.
Method ini berfungsi untuk meload/replace fragment yang sesuai dengan menu yang dipilih di BottomNavigation:

        // method bagi 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 ini memberikan fragment yang sesuai dengan item menu yang dipilih, kemudian fragment di passing ke parameter loadFragmet()
:

        // method listener cak bagi akal sehat penyortiran
@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, detik item/menu diklik maka akan diarahkan sesuai dengan fragment nya.

Jika ada nan butuh source code-nya, silahkan kunjungi repo berikut :

Padalah itu anda cara pembuatan menu dengan BottomNavigationView. Agar tutorial ini bermakna. Seandainya ada nan cak hendak saran tambahan, pertanyaan atau lainnya silahkan berkomentar ya !!.

Kata sandang ini di tulis makanya

Dimas Maulana

beliau kerap menulis artikel tentang Software Engineering dan Programming. Ikuti profilnya untuk mendapatkan update-an terbaru artikel-artikel dia

Jika anda merasa artikel ini menarik dan bermanfaat, bagikan ke lingkaran pertemanan dia, seharusnya mereka dapat membaca artikel ini.
Maupun jikalau beliau terpikat cak bagi membagikan cerita dia pada publikasi ini, engkau boleh mengangkut cerita anda ataupun mengikuti persiapan-ancang yang ada


disini

.

Source: https://medium.easyread.co/contoh-penggunaan-bottomnavigation-sebagai-navigasi-view-f05d3608c1fd