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

you may create separate layout which let you ignore the toolbar itself and align freely and include it after toolbar layout. remove title by getSupportActionBar().setDisplayShowTitleEnabled(false);.(this is offcurse a drawer activity and fragments but you can ignore )

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="@color/splashback"
    android:id="@+id/drawer_layout"
    android:layoutDirection="rtl"
    >

    <!-- your main fragment content layout -->
    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/content_main"/>

    <!-- your action bar (customised) layout -->
    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/drawer_toolbar"/>

    <!-- GO TO CENTER MORON LOGO layout -->
    <include
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        layout="@layout/toolbarlogo"/>

    <!-- drawer -->
    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/drawer_menu"
        app:headerLayout="@layout/drawer_head"
        android:fitsSystemWindows="true"

        />


</androidx.drawerlayout.widget.DrawerLayout>

drawer_toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize">

    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimaryDark"
        android:id="@+id/toolbarx"
        android:layoutDirection="rtl"
        android:theme="@style/ThemeOverlay.AppCompat.Dark"
        />

</LinearLayout>

toolbarlogo.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize" android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:src="@drawable/logotoolbar"
        android:layout_gravity="center"
        />

</LinearLayout>

Answer 2

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~