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

you can create a selector and add the line in yoour selected drawable — Payam Kokabi, Jul 23 '19 at 09:34
You have to create custom drawable and use tab indicator as a bacground — Piyush, Jul 23 '19 at 09:38
A not-so-correct answer: what you want to achieve looks like an upside-down TabLayout. Place the TabLayout at the bottom of your screen with this attribute `app:tabIndicatorGravity="top"`. — Zun, Jul 23 '19 at 10:11

score 4 · Answer 1 · answered Jul 23 '19 at 09:58

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)

score 1 · Answer 2 · answered Sep 22 '21 at 12:47

To fix issue with removing badge with Farouq Afghani's answer.

class BottomNavigationHelper {

companion object {
    var previousItemId: Int = 0
}

fun showBadge(
    context: Context,
    bottomNavigationView: BottomNavigationView,
    @IdRes itemId: Int
) {
    if (previousItemId != 0) {
        removeBadge(bottomNavigationView, previousItemId)
    }
    previousItemId = itemId
    val itemView = bottomNavigationView.findViewById<BottomNavigationItemView>(itemId)
    val badge = LayoutInflater.from(context)
        .inflate(R.layout.layout_nav_top_line, 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)
    }
  }
}

Chrisvin Jem · Answer 3 · 2019-07-23T10:05:35.737

0

As suggested by Payam Kokabi, you could use a selector to determine the background drawable to show. Something along the following lines should work,

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bottom_item_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/bottom_item" android:state_checked="false"/>
</selector>

P.S - You can set the selector as the item background using,

app:itemBackground="@drawable/bottom_item_selector"

edited Jul 23 '19 at 10:05

answered Jul 23 '19 at 09:57

Chrisvin Jem

3,940
1
8
24

can you please elaborate on "@drawable/bottom_item_selected", please. In my bottom navigation bar items will be in grey color when not selected and orange when selected and i also need that extra stroke on top like Amanda asked in question. – Sumukha Aithal K Jun 22 '20 at 06:55

Add a top bar to a bottom navigation view item

3 Answers3

Linked