Bottom Navigation stays at the bottom of the screen providing navigation between activities/fragments easily. It makes the user aware of the different screens available in the app features. The user is able to check which screen are they on at the moment.
You can use it by adding material design dependency. This will be best if we use it for four to five levels of navigation level. From this tutorial, you will learn how to use bottom navigation?
Look at the demo
1- Open the Android Studio and create a new project
2- Go to the build.gradle.xml file and enable the DataBinding feature. If you’re not familiar with DataBinding click here to read.
buildFeatures{
dataBinding true
}Add the below dependencies to the build.gradle.xml file and sync the Gradle.
dependencies {
implementation 'androidx.appcompat:appcompat:1.4.0'
implementation 'com.google.android.material:material:1.4.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.2'
testImplementation 'junit:junit:4.+'
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}3- Go to res->values and open the colors.xml file and add the below code
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="dark_grey_200">#404040</color>
<color name="dark_grey_500">#2B2B2B</color>
<color name="dark_grey_700">#FF212121</color>
<color name="teal_200">#FF03DAC5</color>
<color name="teal_700">#FF018786</color>
<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>
</resources>4- Open the strings.xml file and add the below code
<resources>
<string name="app_name">BottomNavigationExample</string>
<!-- App Strings -->
<string name="str_nav_home">Home</string>
<string name="str_nav_fav">Favourite</string>
<string name="str_nav_jobs">Jobs</string>
<string name="str_nav_profile">Profile</string>
</resources>5- Go to res->layout->right-click and create a new resource file called fragment_container.xml and add the below code
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home"
android:textColor="@color/black"
android:textSize="22sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>6- Create a new Java class called FragmentContainer.java and add the below code
package com.example.bottomnavigationexample;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;
import com.example.bottomnavigationexample.databinding.FragmentContainerBinding;
public class FragmentContainer extends Fragment {
private FragmentContainerBinding binding;
private String title;
public static FragmentContainer newInstance(String title) {
Bundle args = new Bundle();
FragmentContainer fragment = new FragmentContainer();
fragment.setArguments(args);
fragment.title = title;
return fragment;
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
binding = DataBindingUtil.inflate(inflater, R.layout.fragment_container, container, false);
return binding.getRoot();
}
@Override
public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
binding.tvTitle.setText(title);
}
}
7- Go to res->menu and create a new menu resource file called menu_nav_bottom.xml and add the below code
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_page_home"
android:enabled="true"
android:icon="@drawable/ic_nav_home"
android:title="@string/str_nav_home" />
<item
android:id="@+id/nav_page_fav"
android:enabled="true"
android:icon="@drawable/ic_nav_fav"
android:title="@string/str_nav_fav" />
<item
android:id="@+id/nav_page_jobs"
android:enabled="true"
android:icon="@drawable/ic_nav_jobs"
android:title="@string/str_nav_jobs" />
<item
android:id="@+id/nav_page_profile"
android:enabled="true"
android:icon="@drawable/ic_nav_profile"
android:title="@string/str_nav_profile" />
</menu>8- Open the activity_main.xml file from the res->layout folder and add the below code. In this XML file, I added the component of BottomNavigationView.
<?xml version="1.0" encoding="utf-8"?>
<layout>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<FrameLayout
android:id="@+id/container"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/bottomNavigationView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigationView"
android:layout_width="0dp"
app:itemTextColor="@color/nav_item_selected"
app:itemIconTint="@color/nav_item_selected"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="@menu/menu_nav_bottom" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>- app:itemTextColor attribute use for change the color of title. If you want to set the color according to state, you have to create a state XML file in res->color folder like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/dark_grey_700" android:state_checked="true" />
<item android:color="@color/teal_200" />
</selector>- app:itemIconTint use for icon color. As like above XML file, you can create a color state file for icons.
- app:menu use for set the navigation menu. More attributes you can explore from here.
9- Open the MainActivity.java file and add the below code.
package com.example.bottomnavigationexample;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.databinding.DataBindingUtil;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;
import android.os.Bundle;
import android.view.MenuItem;
import android.widget.Toast;
import com.example.bottomnavigationexample.databinding.ActivityMainBinding;
import com.google.android.material.navigation.NavigationBarView;
public class MainActivity extends AppCompatActivity implements NavigationBarView.OnItemSelectedListener {
private ActivityMainBinding binding;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
initComponents();
}
/**
* init and initialize your components
* load default home fragment when activity will open
*/
private void initComponents() {
binding.bottomNavigationView.setOnItemSelectedListener(this);
loadFragment(FragmentContainer.newInstance(getString(R.string.str_nav_home)));
}
/**
*
* @param fragment fragment which is going to open by clicking on the bottom navigation item
*/
private void loadFragment(Fragment fragment) {
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.replace(R.id.container, fragment).commit();
}
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
if (item.getItemId() == R.id.nav_page_home) {
// TODO: 8/18/21 your code requirement
} else if (item.getItemId() == R.id.nav_page_fav) {
// TODO: 8/18/21 your code requirement
} else if (item.getItemId() == R.id.nav_page_jobs) {
// TODO: 8/18/21 your code requirement
} else if (item.getItemId() == R.id.nav_page_profile) {
// TODO: 8/18/21 your code requirement
}
loadFragment(FragmentContainer.newInstance(item.getTitle().toString()));
Toast.makeText(this, item.getTitle() + " clicked", Toast.LENGTH_SHORT).show();
return true;
}
}Thanks for reading the tutorial. Subscribe to my YouTube channel. Like and Share my Facebook page with your friends.