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

score 8 · Accepted Answer · answered Aug 21 '18 at 04:24

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

score 1 · Answer 2 · answered Aug 20 '18 at 22:42

1

use android:showAsAction="ifRoom"

I got it to work with the new Material Bottom App Bar to show icons.

https://developer.android.com/guide/topics/resources/menu-resource

answered Aug 20 '18 at 22:42

rampency

65
1
8

I already tried that before yet again tried it and its not working. – Zankrut Parmar Aug 21 '18 at 04:20

pooja majoka · Answer 3 · 2018-07-18T12:17:14.920

You can use Popup Menu for that. Place an menu image and on click of image open the Popup Menu of android it is same like menu.

  PopupMenu popup = new PopupMenu(MainActivity.this, button);  
            //Inflating the Popup using xml file  
            popup.getMenuInflater().inflate(R.menu.popup_menu, popup.getMenu());  

            //registering popup with OnMenuItemClickListener  
            popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {  
                public boolean onMenuItemClick(MenuItem item) {  
                    Toast.makeText(MainActivity.this,"You Clicked : " + item.getTitle(), Toast.LENGTH_SHORT).show();  
                    return true;  
                }  
            });  

            popup.show();

You can follow below link: https://www.javatpoint.com/android-popup-menu-example

This is absolutely opposite of which I want to do. I want specific icons for my menu items not a pop up like in screenshot a uploaded. Read the question properly. — Zankrut Parmar, Jul 18 '18 at 13:42

score 0 · Answer 4 · answered Jul 18 '18 at 12:06

0

Try to set the fabCradleDiameter to 0db in the BottomAppBar like: app:fabCradleDiameter="0dp"

answered Jul 18 '18 at 12:06

underflowed

69
1
9

Not sure if this answers the question asked. Can you post code and, if possible, screenshots as part of your answer? – kilokahn Aug 03 '18 at 01:35

How to Add custom menu to Bottom App Bar?

4 Answers4