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.
 

ExpandableBottomBar in Android

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


 

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


 

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    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>

chevron_right


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

fragment_course.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?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>

chevron_right


 

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

fragment_profile.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

<?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>

chevron_right


 

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

activity_main.xml

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


 

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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()
            }
        }
  
  
    }
}

chevron_right


 

Output:
 

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




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.