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
in the build.gradle app file add the chip navigation dependency. For a project without Kotlin, we need also to add the Kotlin library 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
in the res, folder adds a menu resource directory and add a new menu drawable file for the chip bottom navigation bar.
<?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
now add three different fragments (/package/New/Fragment/Blank Fragment) for the menu items. Here the fragments are Home, Book, and User 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
now in the main XML file add our chip navigation ba and also add the menu resource file in the chip navigation bar.
<?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
now in the main java file add the functionality of the chip navigation bar also add the fragments.
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
