Toolbar align title in center with back button

Question

I'm adding the Toolbar inside my app but seems I have a issue. In the app I should have a button that is on the right of the screen, and the title in center. But when I go deeper in the app I should display the back arrow on the left, by doing getSupportActionBar().setDisplayHomeAsUpEnabled(). And this is working fine but when I add the back button the text moves to the right so the back button can have some space I guess. Can someone tell me how can I have my button on the right and the title always in the center, no mather if the back button is displayed or not?

Here is my toolbar xml layout code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:padding="5dp"
    tools:ignore="MissingPrefix">

    <RelativeLayout
        android:id="@+id/toolbar_info_holder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:gravity="center"
            android:textColor="@color/actionbar_title_color" />

        <ImageView
            android:id="@+id/toolbar_image"
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true" />

        <TextView
            android:id="@+id/toolbar_count"
            android:layout_width="13dp"
            android:layout_height="13dp"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:background="@drawable/red_circle"
            android:gravity="center"
            android:text="4"
            android:textColor="@color/white"
            android:textSize="9sp" />
    </RelativeLayout>

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

Basaltware

Just some workaround, but a short and word expensive Idea would be to add the back arrow in your layout, hiding, showing and controlling the behaviour by yourself. – Siam

@Amy yes but, is that a good practice. Im looking for a solution that should be good so I can use it in the future and it will help others as well – Basaltware

If there is no other possibility, it may be a good pratice. Otherwise, this was just an idea for a fast fix. :) – Siam

@RaguSwaminathan still no – Basaltware

Any chance of including a few screenshots showing exactly what the issue is? – Perfunctory

Answer 1

What worked for me is to set :

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"

to the child view of the Toolbar, which is a LinearLayout for me (and a RelativeLayout for you). It sounded weird to me first but it's working so I won't complain.

Hild

Definitely not the answer for this problem – Heideheidegger

Answer 2

First of all, a few general tips. This is the exact purpose behind the Android Hierarchical view. Use that to figure out what the container object of the back button is, how everything fits together, etc.

I suspect you can resolve your issue to some extend by changing some of the wrap_content to match_parent. Specifically, I suspect that changing it in your RelativeLayout for the layout_width will do the trick. But even if that doesn't, use the Hierarchical view to get a better understanding of exactly what happens when you are playing around, and it should help point you in the right direction.

Perfunctory

Answer 3

You may have an activity title set, wich would prevent the logo from being centered on the action bar.

Try:

getActionBar().setDisplayShowTitleEnabled(false);

For v.7:

getSupportActionBar().setDisplayShowTitleEnabled(false);

This comes from this question and answer. Credit to @Fillipo Mazza.

Hope it helps.

Bombycid

Answer 4

Little late on this post, but will explain how it can work.

You can use custom view for your toolbar using following code.

    supportActionBar?.setCustomView(R.layout.app_bar_title)
    supportActionBar?.displayOptions = ActionBar.DISPLAY_SHOW_CUSTOM

What basically happens is, app_bar_layout is added as custom view inside Toolbar. So let's say the need is to show title in the center along with back key or action buttons on right side. We can create layout like this.

<?xml version="1.0" encoding="utf-8"?>
<TextView 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"
    android:id="@+id/app_bar_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_gravity="center"
    tools:text="HOME" />

This textview will attach inside Toolbar layout and align itself in center of the Toolbar layout. Even if you add back key or action menu, it shall remain in the center.

Cranio

I've tried this approach and it did not work for me (it's aligned left). – Excogitate