如何更改底部导航指示器的宽度

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

如何更改指标宽度？

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

Answer 1

您可以通过在可绘制对象中指定所需的宽度来解决此问题，并在 top 之外使用 center 或 center_horizontal 重力：

对于 API 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>

更新：

上面的缺点是 android:width 在 API 级别 23 可用。但是你可以在 <size> 标签内使用它以在任何 API级，结果相同：

<?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>

预览：

如何更改底部导航指示器的宽度

How to change the bottom navigation indicator width

android

android-layout

material-design

android-drawable

bottomnavigationview