Search code examples
androidkotlinbottomnavigationview

Add a line below each item selected in bottom navigation view

I want to put a ligne below 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 create a shape line, line.xml as the following :

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke android:width="6dp" android:height="2dp" android:color="@color/honey"/>
    <corners android:radius="5dp"/>
</shape>

and I create a selector checked_uncheked.xml as the following code :

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

I added "app:itemBackground="@drawable/line" below the bottomNavigation and still have no result

enter image description here

Solution

  • Use this line.xml:

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="32dp"
        android:right="32dp"
        android:top="32dp">
        <shape android:shape="line">
            <stroke android:width="6dp" android:height="2dp" android:color="@color/honey"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

    Adjust the margins according to your layout.