Chip Bottom Navigation Bar in Android with Kotlin
Last Updated :
28 Aug, 2023
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
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"?>
<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"?>
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() {
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:
Share your thoughts in the comments
Please Login to comment...