How to center ImageView in a toolbar?

Question

Been trying to center a logo inside my toolbar. When i navigate to the next activity, the "up affordance" icon is present, and it will push my logo slightly to the right. How can I keep my logo at the center of the toolbar, without removing the up affordance icon?

This is my toolbar tag

<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/primaryColor"
android:paddingTop="@dimen/app_bar_top_padding"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
app:theme="@style/CustomToolBarTheme">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_android_logo"
    android:layout_gravity="center"
    android:paddingBottom="3dp"/>
 </android.support.v7.widget.Toolbar>

score 15 · Answer 1 · edited Nov 12 '19 at 05:47

You can do it as following it works for me :

<androidx.appcompat.widget.Toolbar
        android:id="@+id/mainToolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="@dimen/abc_action_bar_default_height_material">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/headerLogo"
                android:contentDescription="@string/app_name" />
            </RelativeLayout>

    </androidx.appcompat.widget.Toolbar>

pretty sure this won't work if you add menu items to the toolbar since that shortens the width of the RelativeLayout. — Slickelito, Mar 15 '17 at 15:28

score 9 · Answer 2 · answered May 23 '18 at 15:42

You need to use the AppBarLayout widget with the Toolbar widget and setting the contentInsetStart to 0dp. Otherwise the Toolbar will about 8dp of padding at the start (to insert the navigation buttons if needed)

Here's the working code:

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:fitsSystemWindows="false"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:contentInsetStart="0dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:adjustViewBounds="true"
            android:scaleType="centerInside"
            android:src="@drawable/company_logo" />

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


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

Also, make sure you use ?attr/actionBarSize as the height for the toolbar as this is the default actionBar height and will adjust to all the different screen sizes.

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

In javadoc, it says:

One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.

It means you cannot do it unless you create a custom toolbar or remove the icon.

score 4 · Answer 4 · answered Jan 27 '17 at 06:49

You can do programmatically, that is the only way I've managed to fully center a logo in the toolbar.

Add to you activity:

@Override
public void onWindowFocusChanged(boolean hasFocus){

    // set toolbar logo to center programmatically
    Toolbar toolbar = (Toolbar) findViewById(R.id.main_toolbar);
    ImageView logo = (ImageView) findViewById(R.id.logo);
    int offset = (toolbar.getWidth() / 2) - (logo.getWidth() / 2);
    // set
    logo.setX(offset);

}

and your toolbar_main.xml:

<?xml version="1.0" encoding="utf-8"?>

<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/main_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/bg_yellow"
    android:elevation="4dp"
    android:fontFamily="@string/font_family_thin"
    app:contentInsetStartWithNavigation="0dp"
    android:layout_gravity="center_horizontal">

    <TextView
        android:id="@+id/title_toolbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="@string/font_family_light"
        android:textColor="@color/text_dark_xxx"
        android:textSize="@dimen/text_default"
        android:layout_centerVertical="true"
        />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@drawable/logo"
        android:id="@+id/logo"
        android:paddingTop="5dp" />



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

i think this should be the accepted answer, nothing works but this ! — AymAn AbuOmar, Mar 03 '18 at 03:26
this should be accepted answer, when app bar is having only menu icon. Thanks for solution. — shyam.y, Oct 05 '18 at 03:14
[@McGuile](https://stackoverflow.com/users/1900721/mcguile) from the example above you can see that currently there's only a TextView and an ImageView, so if you are inflating a menu you'd probably have to measure the icons as well! Hint, maybe you could go into ***Tools > Layout Inspector*** to see what's really happening. — Rodrigo Queiroz, Oct 17 '18 at 19:41

score 3 · Answer 5 · answered Jul 07 '17 at 13:10

I am bit late to answer this , but have wonderful solution

 <android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">
<FrameLayout
    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"
        app:contentInsetStart="0dp"
        app:contentInsetEnd="0dp"
        app:popupTheme="@style/AppTheme.PopupOverlay">



    </android.support.v7.widget.Toolbar>
    <RelativeLayout
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="wrap_content">


        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="?attr/actionBarSize"
            android:contentDescription="@string/app_name"
            android:id="@+id/logoImageView"
            android:layout_centerInParent="true"
            android:adjustViewBounds="true"
            android:src="@drawable/toolbar_background" />
    </RelativeLayout>
</FrameLayout>


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

and here is my toolbar_background.xml drawable

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="@color/colorPrimary" />
    </shape>
</item>
<item>
    <bitmap
        android:src="@drawable/splash" android:gravity="center"
        />
</item>

score 2 · Answer 6 · answered Aug 07 '15 at 18:56

2

Set the image as a background of the toolbar, not as a child view.

<android.support.v7.widget.Toolbar
    android:id="@+id/detail_toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/listPreferredItemHeight"
    android:background="@drawable/my_image"
    app:theme="@style/CustomToolBarTheme">

answered Aug 07 '15 at 18:56

Jesus Almaral - Hackaprende

2,246
1
24
32

With LayerList drawable http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList you can also set the background color by setting the logo as bitmap and putting a colored solid underneath it (on top on xml). That is if it's not set on the toolbar theme. – Timo Albert Aug 25 '15 at 07:02

Rana Ranvijay Singh · Answer 7 · 2017-11-19T07:09:21.790

For the devs who are using vector drawable or SVG images.
This can be your background for toolbar, drawable_toolbar_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/primary"/>
        </shape>
    </item>
    <item
        android:width="@dimen/toolbar_app_icon_width"
        android:height="@dimen/toolbar_app_icon_height"
        android:drawable="@drawable/ic_app_logo"
        android:gravity="center"/>
</layer-list>

and Yes, you have to fix the width and height of item inside drawable, although the vector drawable is already having fixed size.
This is your toolbar view,

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/drawable_toolbar_background"
    android:minHeight="?attr/actionBarSize"
    android:theme="?attr/actionBarTheme"/>

Somehow your solution does not work for me. The icon gets stretched to fit the width of the toolbar. Did you ever experienced that behaviour? This was the closed I found so far for vector drawables ... — Dominikus K., Nov 17 '17 at 13:21
@DominikusK. Yes, I did had this issue. That's why you have to fix the width and height of your item inside drawable_toolbar_background. I will highlight it. — Rana Ranvijay Singh, Nov 19 '17 at 07:08

Ali Kazi · Answer 8 · 2019-01-07T02:50:40.333

The easiest solution that works even with menu actions present is this:

 <android.support.design.widget.AppBarLayout
    android:id="@+id/apbMain"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/tlbMain"
        android:layout_width="match_parent"
        android:layout_height="?android:actionBarSize"
        app:navigationContentDescription="@null"
        app:title="@null"
        app:subtitle="@null"
        app:popupTheme="@style/AppTheme.PopupOverlay">

            <ImageButton
                android:id="@+id/btnBack"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingTop="12dp"
                android:paddingBottom="12dp"
                android:scaleType="centerInside"
                android:background="@null"
                android:onClick="onBackClickListener"
                android:src="@drawable/ic_navigation_back"
                android:visibility="@{showBackBtn ? View.VISIBLE : View.INVISIBLE}" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_gravity="center"
                android:src="@drawable/toolbar_icon" />

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

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

score 0 · Answer 9 · edited Mar 22 '21 at 19:19

0

Put the attribute android:contentInsetStart with 0dp in the Toolbar.

<android.support.v7.widget.Toolbar
    ...
    ...
    android:contentInsetStart="0dp">

edited Mar 22 '21 at 19:19

Kunal Kukreja

737
4
18

answered Mar 20 '21 at 03:16

Alejandro Ibague

141
1
5

score 0 · Answer 10 · answered Oct 26 '22 at 17:13

Like Kenan Begic, but i costumize it hehe.. Thanks to him. If you have a Menu in yout toolbar, You need to add app:contentInsetStart="50dp" on your Toolbar.

Actually it doesn't have to be 50dp, but so far I'm using 50dp.

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:contentInsetStart="50dp"
    app:layout_collapseMode="pin"
    app:menu="@menu/menu_main"
    app:popupTheme="@style/Theme.Travemates.PopupOverlay" >

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

        <ImageView
            android:layout_width="100dp"
            android:layout_height="25dp"
            android:layout_centerInParent="true"
            android:src="@drawable/ic_travemates" />

    </RelativeLayout>

</androidx.appcompat.widget.Toolbar>

Example:

How to center ImageView in a toolbar?

10 Answers10

Linked