Adding menu-item to custom action bar displaces text

Question

I am trying to create a custom action bar for my app. I want the app-name to appear in the center of the the action bar, on the left side I want to have a menu item, and on the right side I want to have a custom button. The problem is when I add the menu item, the app-name is displaced from the center towards right side as if something is pushing it there, how can I fix this issue, such that the app name will always remain in the center? Thank you!

Here is my action-bar layout xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorWhite">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/action_bar_text"
        android:gravity="center"
        android:layout_centerHorizontal="true"
        android:textColor="@color/colorBlack"
        android:textStyle="bold"
        android:textSize="16sp"
        android:text="@string/app_name"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:text="@string/customButton"/>

</RelativeLayout>

Here is my menu-item xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.example.rashish.myapplication.MainActivity">

    <item
        android:id="@+id/back_action"
        android:orderInCategory="100"
        android:title="@string/back"
        app:showAsAction="always"
       />

    <item
        android:id="@+id/app_icon"
        android:orderInCategory="100"
        android:title=""
        android:icon="@drawable/logo"
        app:showAsAction="always"
        android:enabled="false"
        />

</menu>

This is how I set the custom action bar:

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.colorWhite)));
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.action_bar_layout);

This is how I add the menu items:

public boolean onCreateOptionsMenu(Menu menu) {
        this.mMenu = menu;
        getMenuInflater().inflate(R.menu.menu_main, mMenu);

        MenuItem itemBack = mMenu.findItem(R.id.back_action);
        MenuItem appIconItem = mMenu.findItem(R.id.app_icon);


        itemBack.setVisible(false);
        appIconItem.setVisible(true);


        return true;
    }

UPDTAE

The new layout file using Mike M. suggested solution. The button is placed correctly however the text with the title is still displaced towards the button.

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="0dp"
    android:minHeight="?attr/actionBarSize"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <TextView
        android:id="@+id/action_bar_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorWhite"
        android:textSize="20sp"
        android:text="@string/app_name"
        android:layout_gravity="center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|center_vertical"
        android:text="click me"/>

</android.support.v7.widget.Toolbar>

UPDATE

This the screenshot of my result.

This is the result that I get, it seems to me that the App name is pushed towards the button rather then being centered, and it seems that the toolbar layout isn't full width.

It's probably easier if you use a `Toolbar`, set it as the support `ActionBar`, then do something similar to what is shown in [this post](https://stackoverflow.com/a/41962801), putting the `TextView` and `Button` directly in the `Toolbar`, and setting the appropriate `layout_gravity` attributes on them. — Mike M., Feb 10 '18 at 15:59
Thanks for the solution @MikeM. however it didn't solve my problem, my text is still appears to be shifted. — Keselme, Feb 11 '18 at 07:19
You need to have the `` directly in the ``, and set its `layout_gravity="center"`. No ``, or anything else wrapping it. Then, unless the `Toolbar` itself isn't full width and centered, the `TextView` should always be centered, no matter if there's a menu, or navigation button, or what have you. Double check all that, and if it's still not working, we can have a look at your current setup. — Mike M., Feb 11 '18 at 07:25
I just want to clarify, I should set the width of the toolbar to be either a hard coded number or wrap_content? — Keselme, Feb 11 '18 at 07:56
No, I meant that as long as your `Toolbar` is "normal" - i.e., `match_parent` width; it goes all the way across the top of the `Activity` - then the `TextView` should be centered, if setup correctly. — Mike M., Feb 11 '18 at 07:59
Unfortunately I'm still having problems with that, can you please look at my layout file? — Keselme, Feb 11 '18 at 08:17
This is what I get when I put your setup into an empty AppCompat project: https://i.stack.imgur.com/CmLnM.png. The magenta line is the center, and the title is centered right over that. Is that not what you're getting? Can you take a screenshot of your results? — Mike M., Feb 11 '18 at 08:40
Yes, I will post my screenshot to show my result, however what happens when you add a menu item to the left side of the toolbar, is the text still remains centered? — Keselme, Feb 11 '18 at 08:50
How exactly are you adding a menu to the left side? I thought that was a typo in your question. Menus generally appear on the `end`, which is the right side in left-to-right layouts. — Mike M., Feb 11 '18 at 08:51
OK, then, if I set RTL, my screenshot would just be a mirror image of that one. What's the custom button on the right side, and how are you adding it? It sounds like that might be your issue. — Mike M., Feb 11 '18 at 08:56
I posted the way I add the menu items in my question. The XML code and the JAVA code. It appears under the action_bar_layout. — Keselme, Feb 11 '18 at 08:58
Oh, yeah, hang on. I glossed over your menu, and thought those items were disabled/hidden. Gimme a second to rerun this. — Mike M., Feb 11 '18 at 09:05
OK, sorry about that. I was confusing things, 'cause I didn't read you code as closely as I should've. Anyhoo, here's the screenshot with the menu in RTL: https://i.stack.imgur.com/GQ70l.png. I used the default launcher icon, 'cause I don't have your `logo` drawable, but the title is still centered. — Mike M., Feb 11 '18 at 09:13
Got it. Let's move this to chat, before a mod has a conniption. — Mike M., Feb 11 '18 at 09:31
https://chat.stackoverflow.com/rooms/164907/discussion-between-mike-m-and-keselme — Mike M., Feb 11 '18 at 09:33

Adding menu-item to custom action bar displaces text

0 Answers0