无法正确安排底部的应用栏图标

Question

我正在使用Material Design io网站上的底部应用栏用于我的android studio项目。但是，我底部应用程序栏中的图标无法正确且均等地排列。看起来像这样（如图所示），请告知。

我使用bottomAppBar.replacemenu将图标加载到应用栏上

    private void initialiseComponents(){
    myBottomAppBar.replaceMenu(R.menu.mainmenu);
}

我的mailmenu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/main_book"
        android:icon="@drawable/home_48"
        android:enabled="true"
        android:title="@string/home"
        app:showAsAction="always"/>

    <item
        android:id="@+id/main_board"
        android:icon="@drawable/board_48"
        android:enabled="true"
        app:showAsAction="always"
        android:title="@string/board"
        />

    <item
        android:id="@+id/main_feeds"
        android:icon="@drawable/feed_48"
        android:enabled="true"
        app:showAsAction="always"
        android:title="@string/feeds" />

    <item
        android:id="@+id/main_settings"
        android:icon="@drawable/settings_48"
        android:enabled="true"
        app:showAsAction="always"
        android:title="@string/settings" />
</menu>

底部应用栏：

    <android.support.design.bottomappbar.BottomAppBar
        android:id="@+id/bottomBar"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:backgroundTint="@color/colorPrimary"
        app:elevation="5dp"
        app:menu="@menu/mainmenu"
        app:fabAlignmentMode="center"
        android:elevation="5dp"
        >
    </android.support.design.bottomappbar.BottomAppBar>