Chip Navigation Bar in Android using Java

In this article, we are going to learn how to create chip Navigation Bar in Android using java on Empty Activity.

In the below image you can see that what are we going to build.

Hope so you are interested to know how to make the above beautiful Chip Navigation Bar in Android using Java, so now without wasting much time let’s start.

You can also refer our video tutorial for same.

So let’s start with this tutorial :

Chip Navigation Bar in Android using Java

1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and provide a name to your project. choose Empty activity. By default activity name is MainActivity.java.

2. Now to In order to implement chip navigation in our App, we need a third party library which is kotlin supported. So open build.gradle file and add the below dependencies.

implementation 'com.ismaeldivita.chipnavigation:chip-navigation-bar:1.3.3'

3. As this dependency is kotlin supported and we make our app using Java, so to make the compatibility we should add the kotlin version dependency in build.gradle file.

implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.3.70'

4. Now create a new drawable res file by navigating res => drawable => New => Drawable resource file =>round.xml and put the below lines of code to make the round background for navigation bar.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#F8D41D"></solid>
    <corners
        android:topRightRadius="24dp"
        android:topLeftRadius="24dp">
</corners>
</shape>

5. Now to apply custom font, create a new resource directory by navigating res => New => Android Resource Directory and give the directory name as “menu” and select “menu” from resource type.

6. Now open res => menu => bottommenu.xml file and put the below lines of code to create menu items for 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/home"
        android:title="Home"
        android:icon="@drawable/home"
        app:cnb_textColor="#000"
        app:cnb_iconColor="#000"
        app:cnb_backgroundColor="#fff"
        />
    <item
        android:id="@+id/video"
        android:title="Video"
        android:icon="@drawable/videolibrary"
        app:cnb_textColor="#000"
        app:cnb_iconColor="#000"
        app:cnb_backgroundColor="#fff"
        />
    <item
        android:id="@+id/account"
        android:title="Account"
        android:icon="@drawable/account"
        app:cnb_textColor="#000"
        app:cnb_iconColor="#000"
        app:cnb_backgroundColor="#fff"
        />
</menu>

7. Now go to your activity_main.xml file and paste the below lines of code to make Drawer Layout.

<?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">
    <com.ismaeldivita.chipnavigation.ChipNavigationBar
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:id="@+id/bottomNav"
        android:layout_alignParentBottom="true"
        android:background="@drawable/roundback"
        android:elevation="18dp"
        android:padding="8dp"
        app:cnb_menuResource="@menu/bottommenu"
        app:cnb_unselectedColor="#000"
        />
</RelativeLayout>

8. Finally, run the app and you will get the output as shown in the demo image.

If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.

Thank you 🙂 Keep Learning !

Chip Navigation Bar in Android using Java

Chip Navigation Bar in Android using Java

1 thought on “Chip Navigation Bar in Android using Java”

Leave a Comment Cancel Reply