Bottom Navigation Bar in Android Studio – City Guide – Part 20

by | Android, Android for Beginners, Android UI/UX Tutorials, Basics, City Guide App, UI UX

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.

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!

 

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

 

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();
}
});

}

}

Join Us

Videos are always a better source for in-depth knowledge so, join us at YouTube and get notified on each new upload.

Android Studio Complete Project Bulls rent- Splash Screen- Login Screen with validation- Signup Screen- User profile- Phone number verification OTP- Google verification

Join Our Mailing List

Join our mailing list to receive the latest, Free Courses, Video Tutorials, free codes and updates regarding Tutorials and services. You will also start getting coupons on the related services.

You have Successfully Subscribed!

FLUTTER APP

Learn Flutter App development from scratch. Create LOGIN APP that can be used with any application which requires Login Sign Up functionality.

You can watch it on YouTube or read and get source code from Blog Post.

You have Successfully Subscribed!