Toolbar Title and Icon in Center

Question

I am trying to use custom toolbar. I want icon and title in center of my toolbar. I have tried lot for set it in center but I am unable to do it. My XML is like below

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="?actionBarSize"
        android:layout_width="match_parent"
        android:background="@color/colorPrimary">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_horizontal"
            android:orientation="horizontal">

            <ImageView
                android:padding="5dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_launcher"/>

            <TextView
                android:id="@+id/toolbar_title"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_alignParentTop="true"
                android:gravity="center"
                android:text="MyApplication"
                android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"
                android:textColor="@color/colorWhite" />

        </RelativeLayout>


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

But its not display perfect as per my need. I want first logo and than title in center of toolbar but its look like this

Look

Let me know if someone can help me for do it. I am really sorry if its very simple. I am learning yet. Thanks

https://stackoverflow.com/questions/29443604/android-how-to-center-title-in-toolbar — saber, Mar 29 '18 at 21:25

score 4 · Accepted Answer · answered Mar 29 '18 at 21:25

Try this instead:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_height="?actionBarSize"
    android:layout_width="match_parent"
    android:paddingRight="16dp"
    android:background="@color/colorPrimary">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="horizontal">

        <ImageView
            android:padding="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_launcher"/>

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MyApplication"
            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"
            android:textColor="@color/colorWhite" />

    </LinearLayout>

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

Using LinearLayout will allow you to easily make sure the views don't overlap. I also added 16dp of padding to the right side to compensate for the 16dp margin android automatically adds to the left side.

score 1 · Answer 2 · answered Mar 29 '18 at 21:35

Try giving layout margin for the image view and Align the textview center horizontal which will give you your desired output.

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_height="?actionBarSize"
    android:layout_width="match_parent"
    android:background="@color/colorPrimary">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="300dp"
            android:padding="5dp"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:gravity="center"
            android:text="MyApplication"
            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title"
            android:textColor="@color/colorWhite" />

    </RelativeLayout>


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

score 0 · Answer 3 · answered Mar 29 '18 at 21:25

Try this! A little bit easier to just use a LinearLayout with a horizontal orientation imo. Change the imageview source and title text as needed:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_height="?actionBarSize"
    android:layout_width="match_parent"
    android:background="@color/colorPrimary">

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center_horizontal">
    <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:src="@drawable/ic_launcher_background"/>
    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="My Title"/>
    </LinearLayout>

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

Toolbar Title and Icon in Center

3 Answers3