How to create Chip Navigation Bar in Android | Radio Streaming app UI | JAVA | Part 1

In this tutorial, we’re going to create a chip navigation bar in android using the chip navigation library. Chip navigation is a navigation bar widget inspired by Google Bottom Navigation mixed with Chips component. Here we are not going to see what the Chip navigation bar is or its components. If you want to know more about it than click here.

Overview

Before going to create first let’s see what we are going to create

Now, let’s start to create it

Part 1: install the chip navigation library

Gradle setup

dependencies {

….
implementation ‘com.ismaeldivita.chipnavigation:chip-navigation-bar:1.3.3’
implementation “org.jetbrains.kotlin:kotlin-stdlib:1.3.70”
}

Part 2: create the bottom menu for the chip navigation bar

Create a new Android Resource Directory “menu” inside the res folder and inside the menu create a new Drawable Resource File bottom_menu.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/homeBn”
android:icon=”@drawable/home”
android:title=”Home”
app:cnb_iconColor=”@color/white”/>
<item
android:id=”@+id/settingsBn”
android:icon=”@drawable/settings”
android:title=”Settings”
app:cnb_iconColor=”@color/white”/>

</menu>

You can add as many items you want but don’t use more than 4 items. Here we used two items.

Part 3: set the chip navigation bar in the main layout file

Set the chip navigation bar in the layout file and also add the bottom menu.

<?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=”@color/colorPrimary”
tools:context=”.MainActivity”>

<com.ismaeldivita.chipnavigation.ChipNavigationBar
android:layout_width=”match_parent”
android:layout_height=”60dp”
android:id=”@+id/bottom_nav”
android:layout_alignParentBottom=”true”
android:elevation=”10dp”
android:background=”@drawable/nav_background”
app:cnb_menuResource=”@menu/bottom_menu”/>

</RelativeLayout>

Part 4: create fragments

Now create two fragments for the bottom nav bar because we add two items inside the bottom navbar. So we need to create two blank fragments inside the java package. Right-click on the java package > New > Fragment > Blank Fragment. Here we add HomeFragment and SettingsFragment.

Part 5: create a frame layout

Now inside the main layout file add a FrameLayout for the fragment.

<?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=”@color/colorPrimary”
tools:context=”.MainActivity”>

<FrameLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”@+id/fragment_container”/>

<com.ismaeldivita.chipnavigation.ChipNavigationBar
android:layout_width=”match_parent”
android:layout_height=”60dp”
android:id=”@+id/bottom_nav”
android:layout_alignParentBottom=”true”
android:elevation=”10dp”
android:background=”@drawable/nav_background”
app:cnb_menuResource=”@menu/bottom_menu”/>

</RelativeLayout>

Part 6: define everything inside the main java file

Now in the main java file define our chip navigation bar and Fragment manager to handle the fragments.

package com.codewithgolap.radioapp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import android.os.Bundle;
import com.ismaeldivita.chipnavigation.ChipNavigationBar;

public class MainActivity extends AppCompatActivity {

ChipNavigationBar chipNavigationBar;
FragmentManager fragmentManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

chipNavigationBar = findViewById(R.id.bottom_nav);

//autometically select the home fragment
if (savedInstanceState == null)
{
chipNavigationBar.setItemSelected(R.id.homeBn, true);
fragmentManager = getSupportFragmentManager();
HomeFragment homeFragment = new HomeFragment();
fragmentManager.beginTransaction()
.replace(R.id.fragment_container, homeFragment)
.commit();
}

// item selection part
chipNavigationBar.setOnItemSelectedListener(new ChipNavigationBar.OnItemSelectedListener() {
@Override
public void onItemSelected(int i) {
Fragment fragment = null;
switch (i)
{
case R.id.homeBn:
fragment = new HomeFragment();
break;
case R.id.settingsBn:
fragment = new SettingsFragment();
break;
}
if (fragment != null)
{
fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction()
.replace(R.id.fragment_container, fragment)
.commit();
}
}
});
}
}

Stay tuned for the next parts.

If you need any help regarding Android UI design and Android App Development then you can drop a mail at barmangolap15@gmail.com

HAPPY CODING!!!!