Halo sahabat pembaca.., sudah 2 tahun kurang lebih tidak update tutorial. Kangen rasanya berbagi ilmu dengan kalian semua. Pada kesempatan kali ini admin akan membahas tentang Tutorial Membuat Bottom Navigation di Android Studio.
Ayo… kita perlu tau dulu apa sih Boton Navigation itu. Jadi… Bottom Navigation adalah sebuah tombol yang berada di bagian bawah layar interface dari sebuah aplikasi yang terdiri dari beberapa tombol yang berfungsi untuk menyediakan navigasi tertentu pada sebuah aplikasi. Implementasi bottom navigation sudah banyak di jumpai pada aplikasi-aplikasi populer katakan saja GOJEK, TRAVELOKA dan lain-lain.
Berikut akan di jelaskan Cara membuat Buttom Navigation di aplikasi android.
Menyiapkan Project
- Membuat project
Silakan buat project baru di Android Studio. Berikan nama projectnya BOTTOM NAVIGATION
- Pastikan project tidak ada error
Pastikan project yang kalian buat tidak bermasalah dan jika di jalankan aplikasi akan berjalan dengan normal. Minimal muncul “Hello World”
Menyiapkan LAYOUT
- Tambah icon home, history dan profile pada folder res/drawable. Kalian bisa menambahkan dengan cara klik kanan pada folder res/drawable –> New –> Vector Asset. Kemudian cari icon sesuai dengan keinginan. pada tutorial kali ini adalah sperti di bawah ini
- Fokus ke direktori res/menu jika belum ada tambahkan saja dengan cara Klik Kanan pada directory res selanjutnya New –> Directory kemudian ketik menu
- Tambah file xml pada folder menu dengan nama menu_bottom_navigation_basic.xml dan ketikkan kode di bawah ini
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_recent"
android:icon="@drawable/ic_home"
android:title="Home" />
<item
android:id="@+id/navigation_favorites"
android:icon="@drawable/ic_history"
android:title="History" />
<item
android:id="@+id/navigation_nearby"
android:icon="@drawable/ic_profile"
android:title="Profile" />
</menu>
- Selanjutnya fokus ke folder res/drawable tambahkan file xml dengan nama color_state_white_1.xml. Codenya adalah sebagai berikut
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@android:color/white" android:state_checked="true" />
<item android:color="#999999" android:state_checked="false" />
</selector>
- Tahap selanjutnya buat file pada res/layout dengan nama toolbar.xml. codenya adalah sebagai berikut
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:contentInsetStartWithNavigation="0dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
- Buka file activity_main.xml pada res/layout kemudian lakukan modifikasi seperti kode di bawah ini
<?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"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/grey_5">
<!--
Create by ANDROIDDEV.ID
* www.androiddev.id
* p: +6283129588828
* e: [email protected]
-->
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="@layout/toolbar" />
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#666666"
app:itemIconTint="@drawable/color_state_white_1"
app:itemTextColor="@drawable/color_state_white_1"
app:menu="@menu/menu_bottom_navigation_basic" />
</RelativeLayout>
- Kemudian buka file MainActivity.java lakukan perubahan sesuai dengan kode di bawah ini
Catatan
Lakukan penyesuan seperlunya. Pastikan kalian tidak copy paste semua karena bisa saja nama package project berbeda. jadi cukup copas di dalam kode di bawah ini ya
public class MainActivity extends AppCompatActivity {
// yang bisa di copas langsung
}
package id.androiddev.buttonnavigation.activity;
import android.app.Activity;
import android.os.Build;
import android.support.design.widget.BottomNavigationView;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.Window;
import android.view.WindowManager;
import id.androiddev.buttonnavigation.R;
/*
Create by ANDROIDDEV.ID
* www.androiddev.id
* p: +6283129588828
* e: [email protected]
*/
public class MainActivity extends AppCompatActivity {
private BottomNavigationView navigation;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initToolbar("Bottom Navigation");
}
private void initToolbar(String value) {
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back);
setSupportActionBar(toolbar);
getSupportActionBar().setTitle(value);
setSystemBarColor(this);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_setting, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == android.R.id.home) {
finish();
}
return super.onOptionsItemSelected(item);
}
public static void setSystemBarColor(Activity act) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = act.getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.setStatusBarColor(act.getResources().getColor(R.color.colorPrimaryDark));
}
}
}
- Maka struktur filenya adalah sebagai berikut. Jika ada perbedaan bisa nanti langsung download project agar langsung import 🙂
- Terakhir adalah jalankan project!
Tutorial Advance Bottom Navigation dan kaya fitur
Tutorial diatas merupakan versi basic. dan di bawah ini merupakan contoh screenshoot dan video demo untuk versi advance.
Try and call me!
Setelah mencoba versi Advance, dan tertarik untuk memiliki source codenya caranya sangat mudah. Chat saya melalui whatsapp, telegram atau fitur chat online yang sudah tersedia pada web ini. 3 Fitur chat tersebut yang fast respon!