Bottom Navigation Bar in Android Studio - City Guide

After creating professional login-signup screens with forget password, sessions (Shared preferences) and firebase series. From now onwards, after successful login sigup we will allow the user to enter in their dashboard of City Guide App we are creating which is Retailer Module. In today’s tutorial, we will create a bottom navigation bar or chip navigation bar in android studio.

Get Complete Code

Resources + Dependencies

So, before going to start coding, we should have to understand the flow and basics we need to get started with today’s android tutorial!

Download Icons used in the project.

We have to add dependencies in the case to run bottom navigation drawer chip design in android studio using Java language! To add these dependencies Goto->app->Gradle Scripts->build.gradle(Module: app) from the left project menu and paste these dependencies inside dependencies {}.

How to update existing dependencies?

//Chip Navigation
implementation 'com.ismaeldivita.chipnavigation:chip-navigation-bar:1.3.2'
implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.3.72'

Watch Youtube tutorial

Subscribe

Complete Code

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/lightWhite"
    tools:context=".LocationOwner.RetailerDashboard"
    android:id="@+id/fragment_container">
    <com.ismaeldivita.chipnavigation.ChipNavigationBar
        android:id="@+id/bottom_nav_menu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cnb_menuResource="@menu/bottom_nav_menu"
        android:layout_alignParentBottom="true"
        android:background="@drawable/round_corners"
        app:cnb_unselectedColor="@color/black"
        app:cnb_radius="8dp"
        app:cnb_orientationMode="horizontal"
        android:layout_margin="30dp"
        android:elevation="8dp"
        />
</RelativeLayout>

package com.taimoorsikander.cityguide.LocationOwner;
import android.os.Bundle;
import android.view.WindowManager;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import com.ismaeldivita.chipnavigation.ChipNavigationBar;
import com.taimoorsikander.cityguide.R;
public class RetailerDashboard extends AppCompatActivity {
    ChipNavigationBar chipNavigationBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_retailer_dashboard);
        chipNavigationBar = findViewById(R.id.bottom_nav_menu);
        chipNavigationBar.setItemSelected(R.id.bottom_nav_dashboard,true);
        getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,new RetailerDashboardFragment()).commit();
        bottomMenu();
    }
    private void bottomMenu() {
        chipNavigationBar.setOnItemSelectedListener(new ChipNavigationBar.OnItemSelectedListener() {
            @Override
            public void onItemSelected(int i) {
                Fragment fragment = null;
                switch (i) {
                    case R.id.bottom_nav_dashboard:
                        fragment = new RetailerDashboardFragment();
                        break;
                    case R.id.bottom_nav_manage:
                        fragment = new RetailerManageFragment();
                        break;
                    case R.id.bottom_nav_profile:
                        fragment = new RetailerProfileFragment();
                        break;
                }
                getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,fragment).commit();
            }
        });
    }
}