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

by | Jun 29, 2020 | Android, Android for Beginners, Android UI/UX Tutorials, Basics, City Guide App, UI UX | 0 comments

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

}

}

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

COURSES

Android firebase app - android app 2022 - firebase android app - bulls rent app - coding with t app - android app
android complete login signup product by taimoor sikander free for any type of android app
Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design