ExpandableBottomBar in Android

In this article, ExpandableBottomBar is added in android using Kotlin. It is the substitute for BottomNavigationView. BottomNavigationView makes it easy for users to explore and switch between top-level views in a single tap. They should be used when an application has three to five top-level destinations. ExpandableBottomBar also has different options but they expand when clicked. So it can accommodate more options and gives users a better experience. Suppose the developer wants to create a music player app and add album, songs, singer, and playlist options in the app. In this situation, it can be used.

Advantages:

• It is Top-level destinations that can be accessed from anywhere in the app.
• It is an extension of Material Design Component(BottomNavigationView).
• Easy to use.

Disadvantages:

• It is used only when only three to five Destinations are there.
• Can only be used with Mobile and Tablets.
• The length of Text Labels should be less.
• It should be used when the user will spend more than 90% of the time in an app in the same window.

Approach: 

Step 1: Add the support library in build.gradle file and add the dependency in the dependencies section.  It allows the developers to directly use ExpandableBottomBar directly in XML files.

XML

dependencies {
        implementation 'com.github.st235:expandablebottombar:1.1.8'
}

Step 2: Now add the following code in the string.xml file. In this file, add all the names of the fields that are to be shown in the ExpandableBottomBar.

XML

<resources>
    <string name="algo">Algorithm</string>
    <string name="course">Course</string>
    <string name="profile">Profile</string>
</resources>

Step 3: Create an AlgorithmFragment by right click on java package, select new -> Fragment(Blank).

Step 4: Follow the above step for CourseFragment and LoginFragment.

Step 5: Now add the following code in the fragment_algorithm.xml file. Here a TextView is added in the layout. 

fragment_algorithm.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"
    android:id="@+id/fragment_algo"
    tools:context=".AlgorithmFragment">

    <TextView
        android:textSize="30sp"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Algorithm" />

</FrameLayout>

Step 6: Now add the following code in fragment_course.xml file. Here a TextView is added in the layout. 

fragment_course.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"
    android:id="@+id/fragment_course"
    tools:context=".CourseFragment">

    <TextView
        android:textSize="30sp"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Course" />

</FrameLayout>

Step 7: Now add the following code in fragment_profile.xml file. Here a TextView is added in the layout. 

fragment_profile.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"
    android:id="@+id/fragment_profile"
    tools:context=".ProfileFragment">

    <TextView
        android:textSize="30sp"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Profile" />

</FrameLayout>

Step 8: Now add the following code in the activity_main.xml file. In this file, add ExpandableBottomBar to our layout. 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/layout"/>

    <github.com.st235.lib_expandablebottombar.ExpandableBottomBar
        android:id="@+id/expandable_bottom_bar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:exb_backgroundColor="#2e2e2e"
        app:exb_backgroundCornerRadius="25dp"
        app:exb_itemInactiveColor="#fff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.991" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 9: Now add the following code in MainActivity.kt file. In this file, add onItemSelectedListener that helps to navigate between the fragments. It will switch the fragment when the user taps on the icon. Here addItem method is used explicitly to add items to ExpandableBottomBar but it can also be done by adding items in the menu folder. 

MainActivity.kt

package org.geeksforgeeks.expandablebottombar

import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import github.com.st235.lib_expandablebottomba
                            .ExpandableBottomBar
import github.com.st235.lib_expandablebottombar
                            .ExpandableBottomBarMenuItem

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val bottomBar: ExpandableBottomBar =
                       findViewById(R.id.expandable_bottom_bar)

        //set up the base fragment
        supportFragmentManager.beginTransaction()
                              .add(R.id.layout, AlgorithmFragment())
                              .commit()

        //addItem function is used to set items in ExpandableBottomBar
        bottomBar.addItems(
            ExpandableBottomBarMenuItem.Builder(context = this)
                .addItem(R.id.fragment_algo, R.drawable.ic_algorithm,
                         R.string.algo, Color.GREEN)
                .addItem(R.id.fragment_course, R.drawable.ic_course,
                         R.string.course, Color.YELLOW)
                .addItem(R.id.fragment_profile, R.drawable.ic_account,
                         R.string.profile, Color.MAGENTA)
                .build()
        )

        //It will help the user to switch between different fragment.
        bottomBar.onItemSelectedListener = { view, menuItem ->
            when(menuItem.itemId){
                R.id.fragment_algo ->
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.layout, AlgorithmFragment())
                        .commit()
                R.id.fragment_course ->
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.layout, CourseFragment())
                        .commit()
                R.id.fragment_profile ->
                    supportFragmentManager.beginTransaction()
                        .replace(R.id.layout, ProfileFragment())
                        .commit()
            }
        }


    }
}

Output:

Reference Link: https://github.com/st235/ExpandableBottomBar