How Can I add line(view) below each of the item name in bottom navigation view?

Question

I want to add a line below each name of the items. How can I do this with bottom navigation view? The image has an orange line below the item name. So It should be visible for the selected item only. I have done with the Linear layout. I need to do with the bottom navigation view.

Please check with this image. I did with selector functions for this

attribute app:itemBackground="@drawable/selector"

Answer 1

For do this:

1. Create 2 drawables, 1 whit and 1 without the under line

• Whit line:

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle">
                <solid android:color="#FFFFFF" />
            </shape>
        </item>
        <item
            android:right="20dp"
            android:left="20dp">
            <shape>
                <stroke
                    android:width="4dp"
                    android:color="@color/bottom_sheet_divider" />
                <solid android:color="@color/transparent" />
            </shape>
        </item>
        <item
            android:bottom="4dp">
            <shape>
                <solid android:color="@android:color/white" />
            </shape>
    
        </item>
    </layer-list>

• without line:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#FFFFFF" />
        </shape>
    </item>
    <item android:top="-41dp" android:right="-41dp" android:left="-41dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="4dp"
                android:color="#FFFFFF" />
        </shape>
    </item>
</layer-list>

2. Create a drawable whit drawable checked state

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

3. Add this drawable on the BottomNavigationView

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
--->    app:itemBackground="@drawable/item_line"
        app:menu="@menu/bottom_navigation_menu" />