How to get a label in the Android action bar

Question

As the title suggests, I want to put some text in the action bar. Firstly, here's a mockup (in Paint!) of what I'm imagining:

I'm really struggling with this. In my activity I put:

@Override
public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.main_screen, menu);
  return true;
}

And in the menu folder I put main_screen.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >

  <item android:id="@+id/user_level"
    android:title="Administrator"
    android:showAsAction="withText" />

</menu>

So I have 2 questions:

Question 1

Why at the very least the solution above doesn't show the text Administrator

Question 2

Once it's showing the text, how do I make it appear like a label (with the grey background and the rounded corners, etc)?

Thank you for your help.

Try android:showAsAction="always|withText" in your menu item. And try adding android:orderInCategory="50". 50 is just a random number. — ישו אוהב אותך, Jul 14 '16 at 04:18
Are you using a Toolbar (the new material design way) or an ActionBar? — OneCricketeer, Jul 14 '16 at 04:20
@comeback4you can you please provide code as answers, not comments? — OneCricketeer, Jul 14 '16 at 04:23
For a Toolbar example, you can see this post on centering a text. You can easily change that to be on the right. http://stackoverflow.com/questions/31640629/android-how-to-center-a-title-textview-in-a-toolbar — OneCricketeer, Jul 14 '16 at 04:24
@isnotmenow - thanks. That fixed the text appearing. Do you have any ideas on how to do the styling? — b85411, Jul 14 '16 at 04:24

score 1 · Answer 1 · answered Jul 14 '16 at 04:33

You can try adding below code in your menu item:

android:showAsAction="always|withText"
android:orderInCategory="50"

50 is just a random number.

You can configure the ActionBar styles and properties by creating ActionBar theme styles.
Read more at: Custom ActionBar Styles

score 1 · Accepted Answer · edited May 23 '17 at 11:44

1

custom menu item is what you need for your second question.

first you need to make custom layout for your menu item.

cust_menu.xml

<TextView
    android:id="@+id/admin"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:text="Administrator"
    android:textColor="#fff"
    android:background="@drawable/my_shape";
    android:textStyle="bold" />

for making rounded grey square background you need to make custom shape file and set it to your TextView background.

my_shape.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <corners android:radius="3dp" />

    <solid android:color="#e3e3e3" />

</shape>

now your menu item will go like this.

main.xml

<item
    android:id="@+id/admin"
    android:actionLayout="@layout/cust_menu"
    app:showAsAction="always">
</item>

and in java class simply do this.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

let me know if any doubts.

for more information visit this

EDIT :

you can access your TextView this way.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater = getSupportMenuInflater();
    inflater.inflate(R.menu.main, menu);

    View view = menu.findItem(R.id.admin).getActionView();
    TextView textView = (TextView) view.findViewById(R.id.textID);

    // do your stuff

    return super.onCreateOptionsMenu(menu);
}

happy coding.

edited May 23 '17 at 11:44

Community

1
1

answered Jul 14 '16 at 04:33

V-rund Puro-hit

5,518
9
31
50

This is very cool, thank you. One question; how can I set the right margin of the label to a few px? At the moment it is right up against the right edge of the screen. – b85411 Jul 14 '16 at 05:03
it is custom layout you can play with it. set marging to textview or wrap that textview inside linearlayout or relativelayout and give padding to it. – V-rund Puro-hit Jul 14 '16 at 05:06
I tried adding `android:layout_marginRight="5dp"` to the textview and it made no difference? – b85411 Jul 14 '16 at 05:08
then try second way. wrap it inside one of the layout and add `android:paddingRight` to it. i'm sure it will work. – V-rund Puro-hit Jul 14 '16 at 05:10
Thank you - that worked. One final question, how do I make the background of the label change colour to black when a user taps it? – b85411 Jul 14 '16 at 05:30
you need to make a selector for that. [this](http://stackoverflow.com/questions/18386035/custom-selector-for-list-background) will help you out. – V-rund Puro-hit Jul 14 '16 at 05:39
So I would be using a selector with `TextView` inside it instead of `Item`? – b85411 Jul 14 '16 at 05:41
`android:background="@drawable/my_shape"` instead of this `android:background="@drawable/my_selector"` and you need to make two separate drawable shape file for normal state and selected state. as shown in that answer from the link. – V-rund Puro-hit Jul 14 '16 at 05:47
Ah okay, thanks. Is it possible for me to access `R.id.admin` from `onCreateOptionsMenu()` in the java class? When I do a normal findViewById (after I've called the getMenuInflater) it comes back as null. Am I missing a step? – b85411 Jul 14 '16 at 07:00

score 0 · Answer 3 · answered Jul 14 '16 at 04:26

Question 1

You have to use the app namespace.

<?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/user_level"
  android:title="Administrator"
  app:showAsAction="withText" />
</menu>

Question 2

You cannot use menu to do that. What you can do is to use AppBarLayout.

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center_vertical|end"
                android:paddingEnd="15dp"
                android:paddingLeft="15dp"
                android:paddingRight="15dp"
                android:paddingStart="15dp"/>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <!--Your normal content-->
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

*You cannot use menu*... Why not? Isn't that what `android:actionLayout` is for? — OneCricketeer, Jul 14 '16 at 04:37

How to get a label in the Android action bar

Question 1

Question 2

3 Answers3

Linked