How to change the bottom navigation indicator width

Question

activity_main_tab_background

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
    <layer-list>
        <item android:gravity="top">
            <shape android:shape="rectangle">
                <size android:height="@dimen/_5fdp"/>
                <solid android:color="@color/red"/>
                <corners android:bottomLeftRadius="@dimen/_3fdp"
                    android:bottomRightRadius="@dimen/_3fdp"/>
            </shape>
        </item>
    </layer-list>
</item>
</selector>

bottom navigation in main activity

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/main_bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@drawable/activity_main_tab_background"
        app:labelVisibilityMode="unlabeled"
        app:menu="@menu/home_bottom_nav" />

My output

expected output

How can I change the indicator width?

<size android:height="@dimen/_5fdp" android:width="@dimen/_10fdp"/> // tried and not working

Answer 1

You can tackle this by designating the desired width in your drawable and use a center or center_horizontal gravity besides the top:

For API Level 23+:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item android:width="50dp" android:gravity="top|center_horizontal">
                <shape android:shape="rectangle">
                    <size android:height="@dimen/_5fdp" />
                    <solid android:color="@color/red" />
                    <corners android:bottomLeftRadius="@dimen/_3fdp" android:bottomRightRadius="@dimen/_3fdp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

UPDATE:

The down side of the above is that the android:width is available at API level 23. But you can use it within the <size> tag to be available on any API level, and the result is the same:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item android:gravity="top|center_horizontal">
                <shape android:shape="rectangle">
                    <size android:width="50dp" android:height="@dimen/_5fdp" />
                    <solid android:color="@color/red" />
                    <corners android:bottomLeftRadius="@dimen/_3fdp" android:bottomRightRadius="@dimen/_3fdp" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

Preview: