Chip Bottom Navigation Bar in Android with Kotlin
Last Updated :
28 Apr, 2025
We all know various apps that have a Bottom Navigation Bar. Some famous examples include Snapchat, Linkedin, Gmail, etc. In this article, let’s learn how to implement Chip Navigation Bottom Bar in Android apps using Kotlin. This Chip navigation is a mix of Bottom Navigation with Chip components. Also, you can create basic Bottom navigation from Bottom Navigation Bar in Android. And if you are using Java to implement Chip Navigation Bottom Bar, you can prefer this GFG article into Easy Stylish Chip Button in Bottom Navigation Bar in Android. A sample video is given below to get an idea about what we are going to do in this article.
Step-by-Step Implementation
Step 1: Create a New Project
Open Android Studio and create a new Android project there. Then set the project name and project language as Kotlin. And if you need any help regarding create a new project, prefer this How to create project in Android Studio using Kotlin.
Step 2: Adding the dependency to the build.gradle(:app) file
implementation 'com.github.ismaeldivita:chip-navigation-bar:1.4.0'
Step 3: Working with the activity_main.xml file to change the layout
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
XML
<?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="#F4FAFF"
tools:context=".MainActivity">
<LinearLayout
android:id="@+id/frag_container_nav"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/bottom_nav_bar"
android:orientation="horizontal">
</LinearLayout>
<com.ismaeldivita.chipnavigation.ChipNavigationBar
android:id="@+id/bottom_nav_bar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#fff"
android:backgroundTint="#282828"
android:fadingEdge="horizontal"
app:cnb_menuResource="@menu/menu"
app:cnb_unselectedColor="@android:color/white"/>
</RelativeLayout>
Step 4: Create a menu for the Chip Navigation Bar at menu.xml
Navigate to the app > res > menu > menu.xml (The first time you need to create this) and add the below code to that file. Below is the code for the menu.xml file.
XML
<?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/nav_home"
android:title="Home"
android:icon="@drawable/baseline_home_24"
app:cnb_iconColor="#FFFFFF"/>
<item
android:id="@+id/nav_comare"
android:title="Compare"
android:icon="@drawable/baseline_compare_24"
app:cnb_iconColor="#FFFFFF"/>
<item
android:id="@+id/nav_ranking"
android:icon="@drawable/baseline_leaderboard_24"
android:title="Leaderboard"
app:cnb_iconColor="#FFFFFF"/>
<item
android:id="@+id/nav_settings"
android:title="About"
android:icon="@drawable/baseline_settings_24"
app:cnb_iconColor="#FFFFFF"/>
</menu>
Step 5: Create the Blank Fragment
Then, we need to create 4 Blank Fragments for view purposes. There in the XML Part, we can modify it as we want. For the dummy purpose, we are creating 4 Fragments called HomeFragment, RankFragment, CompareFragment, and SettingFragment. In the Fragment XML part add this code, below provided.
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=".Compare.CompareFragment">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textSize="40sp"
android:text="Fragment Name Text" />
</FrameLayout>
Step 6: Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Here by default, the HomeFragment will open at first. Then, you can navigate to different Fragments. You can also change the default Fragment at your convenience.
Kotlin
package com.example.codinghelper
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.ismaeldivita.chipnavigation.ChipNavigationBar
import com.example.codinghelper.Compare.CompareFragment
import com.example.codinghelper.Home.HomeFragment
import com.example.codinghelper.Ranklist.RankFragment
import com.example.codinghelper.Settings.SettingFragment
class MainActivity : AppCompatActivity() {
// By Default
val fragment = HomeFragment()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
openMainFragment()
supportActionBar?.hide()
var menu_bottom = findViewById<ChipNavigationBar>(R.id.bottom_nav_bar)
menu_bottom.setItemSelected(R.id.nav_home)
menu_bottom.setOnItemSelectedListener {
when (it) {
R.id.nav_home -> {
openMainFragment()
}
R.id.nav_comare -> {
val favoriteFragment = CompareFragment()
supportFragmentManager.beginTransaction()
.replace(R.id.frag_container_nav, favoriteFragment).commit()
}
R.id.nav_ranking -> {
val profileFragment = RankFragment()
supportFragmentManager.beginTransaction()
.replace(R.id.frag_container_nav, profileFragment).commit()
}
R.id.nav_settings -> {
val profileFragment = SettingFragment()
supportFragmentManager.beginTransaction()
.replace(R.id.frag_container_nav, profileFragment).commit()
}
}
}
}
private fun openMainFragment() {
val transaction = supportFragmentManager.beginTransaction()
transaction.replace(R.id.frag_container_nav, fragment)
transaction.commit()
}
}
Output:
Similar Reads
Android Architecture Android architecture contains a different number of components to support any Android device's needs. Android software contains an open-source Linux Kernel having a collection of a number of C/C++ libraries which are exposed through application framework services. Among all the components Linux Kern
5 min read
Kotlin Tutorial This Kotlin tutorial is designed for beginners as well as professional, which covers basic and advanced concepts of Kotlin programming language. In this Kotlin tutorial, you'll learn various important Kotlin topics, including data types, control flow, functions, object-oriented programming, collecti
4 min read
Android UI Layouts Layouts in Android define the user interface and hold UI controls or widgets that appear on the screen of an application. Every Android application consists of View and ViewGroup elements. Since an application contains multiple activities—each representing a separate screen—every activity has multip
5 min read
MVVM (Model View ViewModel) Architecture Pattern in Android Developers always prefer clean and structured code for projects. Organizing the codes according to a design pattern helps in the maintenance of the software. By having knowledge of all crucial logic parts of the android application, it is easier to add and remove app features. Further, design patter
8 min read
Kotlin Android Tutorial Kotlin is a cross-platform programming language that may be used as an alternative to Java for Android App Development. Kotlin is an easy language so that you can create powerful applications immediately. Kotlin is much simpler for beginners to try as compared to Java, and this Kotlin Android Tutori
6 min read
Android Project folder Structure Android Studio is the official IDE (Integrated Development Environment) developed by the JetBrains community which is freely provided by Google for android app development. After completing the setup of Android Architecture we can create an android application in the studio. We need to create a new
3 min read
How to Install and Set up Android Studio on Windows | Step by Step Guide If you are starting your Android learning journey, Andriod Studio is the first thing you will install to write code on your system. This article will guide you on how to install and set up Android Studio on Windows 10, and 11 and what the actual Android Studio system requirements are. Quick Brief of
4 min read
Shared Preferences in Android with Example One of the most Interesting Data Storage options Android provides its users is Shared Preferences. Shared Preferences is the way in which one can store and retrieve small amounts of primitive data as key/value pairs to a file on the device storage such as String, int, float, Boolean that make up you
7 min read
Bottom Navigation Bar in Android We all have come across apps that have a Bottom Navigation Bar. Some popular examples include Instagram, WhatsApp, etc. In this article, let's learn how to implement such a functional Bottom Navigation Bar in the Android app. Why do we need a Bottom Navigation Bar? It allows the user to switch to di
6 min read
Implicit and Explicit Intents in Android with Examples Pre-requisites: Android App Development Fundamentals for Beginners Guide to Install and Set up Android Studio Android | Starting with the first app/android project Android | Running your first Android app This article aims to tell about the Implicit and Explicit intents and how to use them in an and
6 min read