unable to arrange bottom app bar icon properly

Question

I am using the bottom app bar from material design io website for my android studio project. However, the icons in my bottom app bar unable to arrange properly and equally. it looks like this (as shown in the picture), please advise.

I use bottomAppBar.replacemenu to load the icons onto the app bar

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

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

bottom app bar:

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