Bottom App Bar Not Showing Menu Items

Question

I am using the new Material Components that were just shown at I/O a while ago. I was able to create a bottom appbar, but the menu does not show the icon for Search. Instead, it only shows it in the Overflow Menu. What could I be doing wrong?

 <com.google.android.material.bottomappbar.BottomAppBar
        style="@style/Widget.MaterialComponents.BottomAppBar"
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        app:elevation="5dp"
        android:elevation="5dp"
        app:fabAttached="true"
        app:fabCradleDiameter="0dp"
        app:navigationIcon="@drawable/ic_bottom_bar_hamburger"
        app:backgroundTint="@color/colorPrimary"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:fabAlignmentMode="center"/>

  <item
    android:id="@+id/action_settings"
    android:orderInCategory="100"
    android:title="@string/action_settings"
    android:showAsAction="never" />
<item
android:title="@string/search"
android:id="@+id/search"
android:orderInCategory="100"
android:icon="@drawable/ic_search_black_24dp"
android:showAsAction="always" />

Answer 1

1. Create a menu resource directory if you haven't already. Right click res>>new>>android resource directory>>select menu in resource type
2. Create new menu file. Right click the newly created menu directory New Menu Resource file name it bottom_bar_menu
3. Put your items into bottom_bar_menu
4. Use app:menu="@menu/bottom_bar_menu" in your BottomBar in the xml.

So your final xmls would like like:

<com.google.android.material.bottomappbar.BottomAppBar
    style="@style/Widget.MaterialComponents.BottomAppBar"
    android:id="@+id/bar"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_gravity="bottom"
    app:elevation="5dp"
    android:elevation="5dp"
    app:fabAttached="true"
    app:fabCradleDiameter="0dp"
    app:navigationIcon="@drawable/ic_bottom_bar_hamburger"
    app:backgroundTint="@color/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:fabAlignmentMode="center"
    app:menu="@menu/bottom_bar_menu"/>

And in res>menu>bottom_bar_menu, change showAsAction to always or ifRoom, put an icon for action_settings and remove orderInCategory

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:showAsAction="always"
        android:icon="" />
    <item
        android:title="@string/search"
        android:id="@+id/search"
        android:icon="@drawable/ic_search_black_24dp"
        android:showAsAction="always" />
</menu>