How to center the title of a CollapsingToolbarLayout?

Question

I tried setExpandTitleTextAppearance, but it didn't work. I want to center the expanded title text.

Answer 1

@Javed, correct me if I wrong, you want to have the title centered in the Toolbar, then CollapsingToolbarLayout is collapsed and your layout is something like this, right?

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        android:fitsSystemWindows="true">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"/>

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

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

Then you can do this trick ( i do it in onCreate of the Activity):

    try {
        Field declaredField = toolbar.getClass().getDeclaredField("mTitleTextView");
        declaredField.setAccessible(true);
        TextView titleTextView = (TextView) declaredField.get(toolbar);
        ViewGroup.LayoutParams layoutParams = titleTextView.getLayoutParams();
        layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;
        titleTextView.setLayoutParams(layoutParams);
        titleTextView.setGravity(Gravity.CENTER_HORIZONTAL);
    } catch (Exception e) {
        //"Error!"
    }

The key is that TextView within Toolbar has width property "Wrap Content", so we need to change it to "Match Parent". (See more about this reflection here)

Tested on Android 5.1.1 and Android 4.3 (should work pretty much everywhere)

Answer 2

As Nguyễn Hoàng Anh said above, set app:titleEnabled to false worked like a charm.

With that option enabled, after some digging with the layout inspector, suspicious unnamed-view is always added in front of TextView inside of Toolbar, just after 'Up' button(if it is enabled).

So even though layout gravity is working correctly, some suspicious view takes over all extra spaces inside of the Toolbar.

Answer 3

include this in collapsing toolbar xml for collapsed : app:collapsedTitleGravity="center_vertical|center_horizontal"

for expanded app:expandedTitleGravity="center_vertical|center_horizontal"

Answer 4

you can arrange the position of the tittle in both the collapsed and expanded state in the following ways

in expanded state,

app:expandedTitleGravity="center" 

in collapsed state,

app:collapsedTitleGravity="center"

i think this may help you

Answer 5

In my use case, I set app:titleEnabled to false, I didn't need it anyway. After that, my gravity was respected properly inside the Toolbar layout.

Answer 6

In case you are trying to centre the title in the collapsed state you can use

android:paddingEnd="70dp"
android:paddingRight="70dp"

like this:

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingEnd="70dp"
            android:paddingRight="70dp"
            app:collapsedTitleGravity="center_horizontal"        
            app:expandedTitleGravity="start"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin">

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

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

Answer 7

There is an attribute expandedTitleGravity that you can use with the CollapsingToolbarLayout to center the expanded title text. Add this to your CollapsingToolbarLayout:

app:expandedTitleGravity="bottom|center_horizontal"