Center Toolbar Title in custom toolbar with icons and navigation drawer toggle button

Question

I'm trying to implement a toolbar in an app with navigation drawer. Now I'm trying to center the title of my Toolbar for all fragments. My Problem is, that I sometimes have an icon to the right of the hamburger icon from the navigation drawer and i have an app icon on the left side of the toolbar. To make these extra icons visible i have to use a Relative Layout, otherwise the app icon on the left would be missing.

The XML of my Activity with the toolbar looks like this:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context="app.activities.HomeActivity">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:id="@+id/home_toolbar"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/white"
        app:contentInsetStartWithNavigation="0dp">

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

            <ImageView
                android:id="@+id/search_toolbar_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="8dp"
                android:paddingRight="8dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:src="@drawable/icon_search_hightlighted" />

            <ImageView
                android:id="@+id/refresh_toolbar_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:paddingLeft="8dp"
                android:paddingRight="8dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_centerVertical="true"
                android:src="@drawable/icon_refresh"
                android:visibility="gone"/>

            <TextView
                android:id="@+id/actionbar_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="@string/action_bar_title_home"
                android:gravity="center"
                android:textColor="@color/black"
                android:textSize="18sp" />

            <ImageView
                android:id="@+id/logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:scaleType="centerCrop"
                android:layout_alignParentRight="true"
                android:src="@drawable/app_logo" />

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


<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
</LinearLayout>

<fragment
    android:id="@+id/navigation_drawer"
    android:name="app.fragments.NavigationDrawerFragment"
    android:layout_width="@dimen/navigation_drawer_width"
    android:layout_marginTop="?attr/actionBarSize"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    tools:layout="@layout/fragment_navigation_drawer" />

</android.support.v4.widget.DrawerLayout>

I set the visibility of the toolbar icons on the left to gone or visible depending of the chosen fragment. Does anyone know how it would be possible to center the toolbar title and still have my ImageViews visible in my toolbar?

Thanks in advance.

EDIT

My Toolbar Title isn't centered at the moment. It's positioned like in this question: ToolBar title doesn't center

I've already read that it would be possible to center it if the the relative Layout would be gone and set the layout gravity of the TextView to center_horizontal but this doesn't work for me because my ImageView of the App wouldn't appear on the right of the toolbar.

score 0 · Answer 1 · answered Sep 04 '17 at 11:57

0

I haven't got enough reputation to comment.

Your question is a bit unclear to me. If I understand correctly, you have already managed to center the title, but when you set the imageViews' visibility to gone, the title is no longer centered?

If that is correctly understood, have you tried setting the imageViews' visibility to invisible instead of gone? When doing so, the imageView will still take up the same space in the layout, but will not be visible to the user.

answered Sep 04 '17 at 11:57

I edited the question and added a link to another question which kinda shows how my title is positioned. It's a bit to the right of the center. – Distra Sep 04 '17 at 12:07
Have you tried using a FrameLayout for it instead? Maybe that will give you the control you need using the approach where you mentioned that you had it working but the image to the right disappeared. – Sep 04 '17 at 14:56

score 0 · Answer 2 · answered Sep 04 '17 at 12:20

0

try the following property for toolbar.

<android.support.v7.widget.Toolbar
    xmlns:app="schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/primaryColor"
    android:contentInsetLeft="0dp"
    android:contentInsetStart="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    android:contentInsetRight="0dp"
    android:contentInsetEnd="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetEnd="0dp" />

answered Sep 04 '17 at 12:20

Mehul Kabaria

6,404
4
25
50

when i add this code my relative layout matches the whole toolbar (what it didn't before), and the title looks centered in the preview but it doesn't in the app. – Distra Sep 04 '17 at 12:40
you mean that have not seen changes in app? – Mehul Kabaria Sep 04 '17 at 12:46

score 0 · Accepted Answer · answered Feb 26 '18 at 10:40

I solved it like that now:

<android.support.v7.widget.Toolbar
    android:id="@+id/home_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_gravity="center"
    android:background="@color/white"
    app:contentInsetEnd="0dp"
    app:contentInsetLeft="0dp"
    app:contentInsetRight="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp">

    <ImageView
        android:id="@+id/search_toolbar_icon"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:src="@drawable/icon_search_hightlighted" />

    <TextView
        android:id="@+id/actionbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/action_bar_title_home"
        android:textColor="@color/black"
        android:textSize="18sp" />

    <ImageView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        android:src="@drawable/nav_icon"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp" />

    <ImageView
        android:id="@+id/refresh_toolbar_icon"
        android:layout_width="36dp"
        android:layout_height="36dp"
        android:padding="8dp"
        android:src="@drawable/icon_refresh"
        android:visibility="gone"
        tools:visibility="visible" />

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

Center Toolbar Title in custom toolbar with icons and navigation drawer toggle button

3 Answers3