Android - Center image on Toolbar with menu inflated

Question

I'm trying to center the text on Toolbar taking in consideration the menu that is being inflated on Activity. I find many solutions on SO, but didn't find anything that covers the case where a menu is also inflated.

If I only inflate an ImageView without inflating the menu, everything is ok. If I inflate the ImageView and the menu then the image doesn't get displayed in the center of Toolbar, but center on its own space (between hamburger and menu)

Conclusion:

I need to center ImageView on Toolbar, no matter if something later is inflated or not. The menu i am inflating at the moment only has one item (a switch, always visible)

Here is my current code:

 <android.support.design.widget.AppBarLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                app:elevation="0dp">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/colorPrimary"
                    app:contentInsetLeft="0dp"
                    app:contentInsetStartWithNavigation="0dp"
                    app:theme="@style/ToolbarTheme">

                    <ImageView
                        android:id="@+id/toolbar_logo"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_horizontal"
                        android:src="@drawable/app_logo" />

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

            </android.support.design.widget.AppBarLayout>

Activity:

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

How can I center the ImageView even after a menu is inflated?

Answer 1

If I inflate the imageView and the menu then the image doesn't get displayed in the center of toolbar, but center on its own space (between hamburger and menu).

This is happening because, you have added ImageView inside Toolbar and as your Toolbar is using as ActionBar, so it uses some left spaces for back or drawer icon and right space for option menu.

Toolbar = "Back arrow" + "Middle area(Title/Image)" + "Option menu"

SOLUTION:

1. Add a RelativeLayout as a direct child of AppBarLayout.

2. Put Toolbar and ImageView inside RelativeLayout.

3. Add attribute android:layout_centerInParent="true" to imageView to show at center of Toolbar.

Here is the working code:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mainCoordinatorLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        app:elevation="0dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:contentInsetLeft="0dp"
                app:contentInsetStartWithNavigation="0dp"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

            <ImageView
                android:id="@+id/toolbar_logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/ic_launcher" />
        </RelativeLayout>

    </android.support.design.widget.AppBarLayout>

    <!-- Your Content here -->

</android.support.design.widget.CoordinatorLayout>

In your activity, add below lines:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

setSupportActionBar(toolbar);
getSupportActionBar().setTitle(""); // hide title
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

OUTPUT:

Hope this will help~