Add a top bar to a bottom navigation view item

Question

I want to put a bar in the top of each Bottom Navigation View Item's items when it is selected. As the image below, but i don't find the way to do it.

I dont have any idea how to do it

Answer 1

You can achieve it by adding a view on the bottom navigation, check the code below, you can also use this to add any view on the bottom navigation item, such as Badge, small icon, etc..

Layout xml for the bar

<?xml version="1.0" encoding="utf-8"?>
<View xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="2dp"
    android:layout_gravity="center_horizontal"
    android:background="@color/red"
    android:gravity="center"/>

Controller (show/hide)

class BottomNavigationHelper {

    fun showBadge(context: Context, bottomNavigationView: BottomNavigationView, @IdRes itemId: Int) {
        removeBadge(bottomNavigationView, itemId)
        val itemView = bottomNavigationView.findViewById<BottomNavigationItemView>(itemId)
        val badge = LayoutInflater.from(context).inflate(R.layout.layout_red_badge, bottomNavigationView, false)
        itemView.addView(badge)
    }

    fun removeBadge(bottomNavigationView: BottomNavigationView, @IdRes itemId: Int) {
        val itemView = bottomNavigationView.findViewById<BottomNavigationItemView>(itemId)
        if (itemView.childCount == 3) {
            itemView.removeViewAt(2)
        }
    }
}

sample call

BottomNavigationHelper().showBadge(mContext, bottomNavigationView, R.id.navigation_home)