Chip navigation bottom bar in android studio | Java

Chip navigation bottom bar in android studio | Java

In this tutorial, we’re going to see how to add a custom bottom navigation bar in android studio. Here we will use the chip navigation bottom bar library for our app.

Before going to create it, let’s see what you’re going to create

Now, let’s create it.

Step 1: add the dependency

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

Step 2: create a menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item android:id="@+id/bottom_nav_home"
android:title="Home"
android:icon="@drawable/home"
app:cnb_backgroundColor="@color/colorPrimary"/>
<item android:id="@+id/bottom_nav_book"
android:title="Book"
android:icon="@drawable/book"
app:cnb_backgroundColor="@color/colorPrimary"/>
<item android:id="@+id/bottom_nav_user"
android:title="User"
android:icon="@drawable/user"
app:cnb_backgroundColor="@color/colorPrimary"/>
</menu>

Here I add three items, for these items we need to add three fragments.

Step 3: import the fragments

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HomeFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Home Fragment"
android:gravity="center"
android:textSize="25sp"/>
</FrameLayout>

fragment_book.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".BookFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Book Fragment"
android:gravity="center"
android:textSize="25sp"/>
</FrameLayout>

fragment_user.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".UserFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="User Fragment"
android:gravity="center"
android:textSize="25sp"/>
</FrameLayout>

Step 4: add the chip navigation bar in the main XML file

<?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"
tools:context=".MainActivity"
android:id="@+id/fragment_container">
<com.ismaeldivita.chipnavigation.ChipNavigationBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/bottom_nav_bar"
app:cnb_menuResource="@menu/bottom_navbar_chip"
android:layout_alignParentBottom="true"
android:background="@drawable/round_corners"
app:cnb_unselectedColor="@android:color/black"
app:cnb_radius="4dp"
app:cnb_iconSize="20dp"
app:cnb_orientationMode="horizontal"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:layout_marginStart="20dp"
android:layout_marginBottom="20dp"
android:elevation="8dp"/>
</RelativeLayout>

Here I used a custom background for the chip navigation bar named round_corners.

for that go to the drawable folder and create a new drawable file and add the below lines of code.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/white"/>
<corners android:radius="8dp"/>
</shape>

Step 5: add the functionality

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import android.os.Bundle;import com.ismaeldivita.chipnavigation.ChipNavigationBar;public class MainActivity extends AppCompatActivity { ChipNavigationBar chipNavigationBar; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
chipNavigationBar = findViewById(R.id.bottom_nav_bar);
chipNavigationBar.setItemSelected(R.id.bottom_nav_home,
true);
getSupportFragmentManager().beginTransaction()
.replace(R.id.fragment_container,
new HomeFragment()).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_home:
fragment = new HomeFragment();
break;
case R.id.bottom_nav_book:
fragment = new BookFragment();
break;
case R.id.bottom_nav_user:
fragment = new UserFragment();
break;
}
getSupportFragmentManager().beginTransaction()
.replace(R.id.fragment_container,
fragment).commit();
}
});
}
}
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
chipNavigationBar = findViewById(R.id.bottom_nav_bar);
chipNavigationBar.setItemSelected(R.id.bottom_nav_home,
true);
getSupportFragmentManager().beginTransaction()
.replace(R.id.fragment_container,
new HomeFragment()).commit();
bottomMenu();}

in onCreate() method, we simply typecast our chip navigation bar and set the home fragment as the default selected fragment. And initialize a function named bottomMenu() for the navigation item selected.

private void bottomMenu() {
chipNavigationBar.setOnItemSelectedListener
(new ChipNavigationBar.OnItemSelectedListener() {
@Override
public void onItemSelected(int i) {
Fragment fragment = null;
switch (i){
case R.id.bottom_nav_home:
fragment = new HomeFragment();
break;
case R.id.bottom_nav_book:
fragment = new BookFragment();
break;
case R.id.bottom_nav_user:
fragment = new UserFragment();
break;
}
getSupportFragmentManager().beginTransaction()
.replace(R.id.fragment_container,
fragment).commit();
}
});
}

here I used a switch case to perform item selection and replace the selected fragment with the main container.

Output

You can follow me on YouTube:

Also, visit my website for more content like this

Follow me on Instagram

Follow me on Facebook

Hi everyone, myself Golap an Android app developer with UI/UX designer.