Search code examples
androidandroid-fragmentsnavigation-drawerandroid-toolbar

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


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.


Solution

  • 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>