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 :
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:
1
2
3
| 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 :
1
2
3
4
5
| <?xml version="1.0" encoding="utf-8"?> <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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <?xml version="1.0" encoding="utf-8"?> <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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <?xml version="1.0" encoding="utf-8"?> 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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| 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. 
Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 
Tidak ada komentar:
Posting Komentar