How to create a button in ActionBar with icon and text?

Question

I want to create a button in ActionBar with text and icon. Something like on the screenshot below. enter image description here

I've tried this code. But it doesn't work. It displays only icon without text.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/create"
          android:title="@string/create"
          android:icon="@drawable/ic_apply"
          android:showAsAction="always|withText" />
</menu>

Have you seen my answer? – Jared Burrows Jul 14 '15 at 21:10 — Jared Burrows, Jul 14 '15 at 21:10
What is the status of this? – Jared Burrows Jul 22 '15 at 12:50 — Jared Burrows, Jul 22 '15 at 12:50

score 5 · Answer 1 · answered Jun 23 '15 at 18:34

Read up on Toolbar

Since Toolbar is basically a ViewGroup, you can add child views. An example :

<Toolbar
    android:id = "@+id/myToolbar"
    android:layout_height = "wrap_content"
    android:layout_width = "match_parent"
    android:minHeight = "?attr/actionBarSize"
    android:background = "?attr/colorPrimary" > 

    <Button
        android:layout_height = "wrap_content"
        android:layout_width = "match_parent"
        android:text = "My button"
        android:layout_gravity = "right" />
</Toolbar>

score 1 · Answer 2 · edited Jan 17 '20 at 07:06

<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Search, should appear as action button -->

<item android:id="@+id/action_search"
      android:icon="@drawable/ic_action_search"
      android:title="@string/action_search"
      android:showAsAction="ifRoom" />
</menu>

If you mentioned android:showAsAction="ifRoom" it is considered as Action bar button.

Inflating Menu:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu items for use in the action bar
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main_activity_actions, menu);
    return super.onCreateOptionsMenu(menu);
}

Handling Click event:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle presses on the action bar items
    switch (item.getItemId()) {
        case R.id.action_search:
            openSearch();
            return true;

        default:
            return super.onOptionsItemSelected(item);
    }
}

score 0 · Answer 3 · edited May 23 '17 at 12:10

Assuming you are using AppCompat:

Your question maybe similar to: https://stackoverflow.com/a/18262141/950427

Make sure you bringing in the correct namespace: xmlns:yourapp="http://schemas.android.com/apk/res-auto".

Here is the example from the docs:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:yourapp="http://schemas.android.com/apk/res-auto" >
    <item android:id="@+id/action_search"
          android:icon="@drawable/ic_action_search"
          android:title="@string/action_search"
          yourapp:showAsAction="ifRoom"  />

    ...
</menu>

Explanation from the docs:

Using XML attributes from the support library Notice that the showAsAction attribute above uses a custom namespace defined in the tag. This is necessary when using any XML attributes defined by the support library, because these attributes do not exist in the Android framework on older devices. So you must use your own namespace as a prefix for all attributes defined by the support library.

Documentation: http://developer.android.com/guide/topics/ui/actionbar.html#ActionItems

Please look at my answer. You need to use the correct namespace if you are using `AppCompat` Are you using `AppCompat`? — Jared Burrows, Jun 24 '15 at 15:44

score 0 · Answer 4 · edited Jan 16 '20 at 01:44

You can create different xml layout for actionbar and in that use buttons or text.
Example:

actionbar.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />

<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Enter Text"
android:textColor="#ffffff"
android:textStyle="bold"
android:textSize="@dimen/actionbar_title"/>
</LinearLayout>

use actionbar.xml in java file:

DisplayMetrics metrics = getResources().getDisplayMetrics();
ActionBar actionbar = getActionBar();

Drawable d=getResources().getDrawable(R.drawable.action2);  
getActionBar().setBackgroundDrawable(d);
getActionBar().setIcon(android.R.color.transparent);
TextView title;

getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM); 
getActionBar().setCustomView(R.layout.actiobar); 
title= (TextView)findViewById(R.id.title);
title.setText("BUSINESS");

How to create a button in ActionBar with icon and text?

4 Answers4