Android Bottom Navigation Bar Example

By Arvind Rai, August 01, 2023
On this page we will learn to create bottom navigation bar in our Android application.
1. To create a bottom navigation bar, we use material BottomNavigationView that represents a standard bottom navigation bar for application.
2. We will use NavHostFragment that will provide an area within our layout for self-contained navigation to occur.
3. We will create a menu XML that will contain all items of navigation bar. Each item will have an icon and text.
4. We will create a navigation graph XML to associate fragment with respective layout.
5. In our demo application, for the click of menu items we have a layout that contains a TextView.

Here we will create a demo application for bottom navigation bar with 4 menu items. Find the print screen of the output.
Android Bottom Navigation Bar Example

1. Creating Main Activity

Find the xml for main activity.
res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:paddingTop="?attr/actionBarSize">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="@color/gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/bottom_nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/app_navigation" />

</androidx.constraintlayout.widget.ConstraintLayout> 
1. The XML contains BottomNavigationView and a fragment element of NavHostFragment type within ConstraintLayout element.
2. A ConstraintLayout helps us to position and size widgets in a flexible way. The BottomNavigationView is a material design bottom navigation that represents a standard bottom navigation bar for application.
3. We attach a menu to BottomNavigationView.
app:menu="@menu/bottom_nav_menu" 
4. Now this BottomNavigationView is attached to the fragment.
app:layout_constraintBottom_toTopOf="@id/bottom_nav_view" 
5. To create view hierarchy, fragment uses NavHostFragment class.
android:name="androidx.navigation.fragment.NavHostFragment" 
6. We associate a navigation graph to this fragment.
app:navGraph="@navigation/app_navigation" 
Now find the main activity Java class.
MainActivity.java
package com.cp.app;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;
import com.cp.app.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    private ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());
        AppBarConfiguration appBarConfiguration = new AppBarConfiguration.Builder(
                R.id.navigation_home, R.id.navigation_chat, R.id.navigation_settings, R.id.navigation_account)
                .build();
        NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
        NavigationUI.setupActionBarWithNavController(this, navController, appBarConfiguration);
        NavigationUI.setupWithNavController(binding.bottomNavView, navController);
    }
} 
ActivityMainBinding : Automatically generated class for activity_main.xml file.
AppBarConfiguration : Configuration options for NavigationUI methods.
NavController : Manages app navigation within a NavHost.
NavigationUI : Hooks up elements typically in the 'chrome' of our application.
Find the menu XML file used in bottom navigation bar.
res/menu/bottom_nav_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home_24"
        android:title="@string/title_home" />
    <item
        android:id="@+id/navigation_chat"
        android:icon="@drawable/ic_chat_24"
        android:title="@string/title_chat" />
    <item
        android:id="@+id/navigation_settings"
        android:icon="@drawable/ic_settings_24"
        android:title="@string/title_settings" />
    <item
        android:id="@+id/navigation_account"
        android:icon="@drawable/ic_account_24"
        android:title="@string/title_account" />
</menu> 
All the menu items have an icon and a title. Find the navigation graph XML.
res/navigation/app_navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<navigation 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"
    app:startDestination="@+id/navigation_home">
    <fragment
        android:id="@+id/navigation_home"
        android:name="com.cp.app.ui.home.HomeFragment"
        android:label="@string/title_home"
        tools:layout="@layout/fragment_home" />
    <fragment
        android:id="@+id/navigation_chat"
        android:name="com.cp.app.ui.chat.ChatFragment"
        android:label="@string/title_chat"
        tools:layout="@layout/fragment_chat" />
    <fragment
        android:id="@+id/navigation_settings"
        android:name="com.cp.app.ui.settings.SettingsFragment"
        android:label="@string/title_settings"
        tools:layout="@layout/fragment_settings" />
    <fragment
        android:id="@+id/navigation_account"
        android:name="com.cp.app.ui.account.AccountFragment"
        android:label="@string/title_account"
        tools:layout="@layout/fragment_account" />
</navigation> 

4. Navigation UI

In our demo application, we have 4 navigation UI.
1. Home :
HomeViewModel.java
package com.cp.app.ui.home;
import androidx.lifecycle.LiveData;
import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.ViewModel;

public class HomeViewModel extends ViewModel {
    private final MutableLiveData<String> mText;
    public HomeViewModel() {
        mText = new MutableLiveData<>();
        mText.setValue("You clicked on home.");
    }
    public LiveData<String> getText() {
        return mText;
    }
} 
ViewModel : Prepares and manages the data for an Activity or a Fragment. It also handles the communication of the Activity and Fragment with the rest of the application.
LiveData : A data holder class that can be observed within a given lifecycle.
MutableLiveData : LiveData which publicly exposes setValue(T) and postValue(T) method.

Now create a class extending Fragment. Here the view is created for Home navigation. We override onCreateView() and onDestroyView() method from Fragment class.
HomeFragment.java
package com.cp.app.ui.home;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;
import com.cp.app.databinding.FragmentHomeBinding;

public class HomeFragment extends Fragment {

    private FragmentHomeBinding binding;
    
    public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        HomeViewModel homeViewModel =
                new ViewModelProvider(this).get(HomeViewModel.class);

        binding = FragmentHomeBinding.inflate(inflater, container, false);
        View root = binding.getRoot();

        final TextView textView = binding.textHome;
        homeViewModel.getText().observe(getViewLifecycleOwner(), textView::setText);
        return root;
    }
    @Override
    public void onDestroyView() {
        super.onDestroyView();
        binding = null;
    }
} 
The FragmentHomeBinding is automatically generated class for fragment_home.xml file.
2. Chat :
ChatViewModel.java
package com.cp.app.ui.chat;
import androidx.lifecycle.LiveData;
import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.ViewModel;

public class ChatViewModel extends ViewModel {
    private final MutableLiveData<String> mText;
    public ChatViewModel() {
        mText = new MutableLiveData<>();
        mText.setValue("You clicked on chat.");
    }
    public LiveData<String> getText() {
        return mText;
    }
} 
ChatFragment.java
package com.cp.app.ui.chat;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;
import com.cp.app.databinding.FragmentChatBinding;

public class ChatFragment extends Fragment {

    private FragmentChatBinding binding;

    public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        ChatViewModel chatViewModel =
                new ViewModelProvider(this).get(ChatViewModel.class);

        binding = FragmentChatBinding.inflate(inflater, container, false);
        View root = binding.getRoot();

        final TextView textView = binding.textChat;
        chatViewModel.getText().observe(getViewLifecycleOwner(), textView::setText);
        return root;
    }
    @Override
    public void onDestroyView() {
        super.onDestroyView();
        binding = null;
    }
} 

3. Settings :
SettingsViewModel.java
package com.cp.app.ui.settings;
import androidx.lifecycle.LiveData;
import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.ViewModel;

public class SettingsViewModel extends ViewModel {
    private final MutableLiveData<String> mText;
    public SettingsViewModel() {
        mText = new MutableLiveData<>();
        mText.setValue("You clicked on settings.");
    }
    public LiveData<String> getText() {
        return mText;
    }
} 
SettingsFragment.java
package com.cp.app.ui.settings;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;
import com.cp.app.databinding.FragmentSettingsBinding;

public class SettingsFragment extends Fragment {

    private FragmentSettingsBinding binding;

    public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        SettingsViewModel dashboardViewModel =
                new ViewModelProvider(this).get(SettingsViewModel.class);

        binding = FragmentSettingsBinding.inflate(inflater, container, false);
        View root = binding.getRoot();

        final TextView textView = binding.textSettings;
        dashboardViewModel.getText().observe(getViewLifecycleOwner(), textView::setText);
        return root;
    }
    @Override
    public void onDestroyView() {
        super.onDestroyView();
        binding = null;
    }
} 

4. Account :
AccountViewModel.java
package com.cp.app.ui.account;
import androidx.lifecycle.LiveData;
import androidx.lifecycle.MutableLiveData;
import androidx.lifecycle.ViewModel;

public class AccountViewModel extends ViewModel {
    private final MutableLiveData<String> mText;
    public AccountViewModel() {
        mText = new MutableLiveData<>();
        mText.setValue("You clicked on account.");
    }
    public LiveData<String> getText() {
        return mText;
    }
} 
AccountFragment.java
package com.cp.app.ui.account;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.lifecycle.ViewModelProvider;
import com.cp.app.databinding.FragmentAccountBinding;

public class AccountFragment extends Fragment {

    private FragmentAccountBinding binding;

    public View onCreateView(@NonNull LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        AccountViewModel accountViewModel =
                new ViewModelProvider(this).get(AccountViewModel.class);

        binding = FragmentAccountBinding.inflate(inflater, container, false);
        View root = binding.getRoot();

        final TextView textView = binding.textAccount;
        accountViewModel.getText().observe(getViewLifecycleOwner(), textView::setText);
        return root;
    }
    @Override
    public void onDestroyView() {
        super.onDestroyView();
        binding = null;
    }
} 

5. Reference

6. Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI







©2024 concretepage.com | Privacy Policy | Contact Us