Membuat Bottom Navigation Android

Tambahkan library dependencies berikut

build.gradle
implementation 'com.google.android.material:material:1.4.0'

paste code pada file activity_main.xml

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >

<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:background="@color/purple_700"
app:popupTheme="@style/ToolbarTheme"
app:title="@string/app_name"
app:titleTextColor="@color/white" />

<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottomMenu"
android:layout_below="@+id/toolbar"
android:background="#f7f9f8" />

<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@color/white"
app:labelVisibilityMode="labeled"
app:menu="@menu/bottomNav" />

</RelativeLayout>

Selanjutnya kita perlu menambahkan icon terlebih dahulu untuk di gunakan pada Bottom Navigationnya. klik kanan pada folder res/New/Image Asset

Tambahkan 3 icon bernama 

selector_home 

selector_favorite 

selector_profile 

Setelah menambahkan icon selanjutnya kita perlu membuat folder bernama menu dan buat file bernama bottomNav.xml.

lalu copy code ini

<menu
xmlns:android="http://schemas.android.com/apk/res/android">
<item 
android:id="@+id/homeNav" 
android:icon="@drawable/selector_home" 
android:title="Home"/>

<item
android:id="@+id/favoriteNav"
android:icon="@drawable/selector_favorite" 
android:title="Favorite"/>

<item
android:id="@+id/profileNav"
android:icon="@drawable/selector_profile" 
android:title="Profile"/>

</menu>

Pada Tahap Selanjutnya kita buat 3 buah fragment untuk berpindah halaman saat menu bottom navigation di klik 

fragment_home.xml

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home"
android:layout_centerInParent="true"/>

</RelativeLayout>

fragment_favorite.xml

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Favorite"
android:layout_centerInParent="true"/>

</RelativeLayout>

fragment_profile.xml

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Profile"
android:layout_centerInParent="true"/>

</RelativeLayout>

Selanjutnya buat juga 3 buah file java untuk masing masing fragment 

 FragmentHome.java

		public class FragmentHome extends Fragment {
		@Override
		public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment_home,container,false);
		return view;
		}
	}

FragmentFavorite.java

		public class FragmentFavorite extends Fragment {
		@Override
		public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment_favorite,container,false);
		return view;
		}
	}

FragmentProfile.java

		public class FragmentProfile extends Fragment {
		@Override
		public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		View view = inflater.inflate(R.layout.fragment_profile,container,false);
		return view;
		}
	}

Langkah terakhir buka MainActivity.java dan copy source code berikut

public class MainActivity extends AppCompatActivity {

Toolbar toolbar;
BottomNavigationView bottomNavigationView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

bottomNavigationView = findViewById(R.id.bottomMenu);

// Method fragment yang akan pertama kali dimuat
getSupportFragmentManager().beginTransaction().replace(R.id.container, new FragmentHome()).commit();


bottomNavigationView
.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {

@Override
public boolean onNavigationItemSelected(MenuItem item) {
Fragment pilihFragment = null;
switch (item.getItemId()) {
case R.id.homeNav:
toolbar.setTitle("Home");
Toast.makeText(MainActivity.this, "Home", Toast.LENGTH_SHORT).show();
pilihFragment = new FragmentHome();
break;
case R.id.favoriteNav:
toolbar.setTitle("Favorite");
Toast.makeText(MainActivity.this, "Favorite", Toast.LENGTH_SHORT).show();
pilihFragment = new FragmentFavorite();
break;
case R.id.profileNav:
toolbar.setTitle("Profile");
Toast.makeText(MainActivity.this, "Profile", Toast.LENGTH_SHORT).show();
pilihFragment = new FragmentProfile();
break;
}
getSupportFragmentManager().beginTransaction().replace(R.id.container, pilihFragment).commit();
return true;
}

});

}

}

Menambahkan badge pada icon bottom navigation.

letakan dibawah findViewById (R.id.bottomMenu)

BadgeDrawable badgeDrawable = bottomNavigationView.getOrCreateBadge(R.id.favoriteNav);
badgeDrawable.setVisible(true); badgeDrawable.setNumber(1);

Selesai. Demo