How to Add custom menu to Bottom App Bar?

Question

I am using new Material Bottom app bar in android. I have implemented it successfully but I don't know how to add custom menu items to the bar. Whenever I add the menu items they shows up as 3 dots only even if I provide the option android:showAsAction="always".

I want specific icons like the screenshot below. But instead I get result like this.

Here is the layout code.

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottom_app_bar"
    style="@style/Widget.MaterialComponents.BottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimaryDark"
    app:fabCradleMargin="5dp"
    app:fabAlignmentMode="center"/>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_anchor="@id/bottom_app_bar" />

And here is the java code.

BottomAppBar bottomAppBar = (BottomAppBar) findViewById(R.id.bottom_app_bar);
setSupportActionBar(bottomAppBar);

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.navigation, menu);
    return true;
}

Menu code.

<item
    android:id="@+id/navigation_explore"
    android:icon="@drawable/explore"
    android:title="Explore"
    android:showAsAction="always"/>

<item
    android:id="@+id/navigation_profile"
    android:icon="@drawable/profile"
    android:title="Profile"
    android:showAsAction="always"/>

Answer 1

After so much research I finally found the solution to the problem. Just by changing namespace of 'showAsAction' from 'android' to 'app' make things work.

<item
    android:id="@+id/navigation_explore"
    android:icon="@drawable/ic_search"
    android:title="Explore"
    app:showAsAction="always" />