28

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

Floern
  • 33,559
  • 24
  • 104
  • 119
Javed Khatri
  • 719
  • 2
  • 7
  • 9

7 Answers7

79

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"
androholic
  • 3,633
  • 3
  • 22
  • 23
22

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.

Sender
  • 6,660
  • 12
  • 47
  • 66
Nguyễn Hoàng Anh
  • 221
  • 2
  • 2
  • I wanted my custom toolbar to show title in the center. by setting up this property in CollapsingToolbarLayout helped me with my requirement. Thanks a lot. – Jigar Aug 04 '16 at 05:41
9

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

Sharon Joshi
  • 498
  • 7
  • 19
  • 4
    the problem is, in `collapsed` state, the title is improperly horizontally centered. there's a padding/margin from the left. *Edit*: turns out, you can fix it by adding `android:paddingEnd:24dp` to `CollapsingToolbarLayout` – Ace Jul 27 '20 at 14:33
  • @Ace `app:contentInsetStart="0dp"` is better: https://stackoverflow.com/questions/35765551/collapsingtoolbarlayout-center-textview-in-toolbar – Sam Chen Jun 09 '21 at 15:28
4

@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)

Community
  • 1
  • 1
Konstantin Loginov
  • 15,802
  • 5
  • 58
  • 95
  • 1
    I happen to be working on the same issue. Centering a custom title `TextView` in a `Toolbar` seems like it should work, but for some reason `layout_gravity="center"` does not center the text in this scenario. The `TextView`'s text gets right-aligned instead. Potentially a bug. – Ryan Aug 12 '15 at 02:03
  • @Ryan great catch, love it! Fixed my answer and tested it on android 5.1.1 and android 4.3. Thanks for notice! – Konstantin Loginov Aug 12 '15 at 07:56
  • your updated answer looks like it should work, but I hate to have to resort to using reflection. Too bad there isn't a more streamlined approach to this issue. – Ryan Aug 12 '15 at 19:53
1

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.

bskim45
  • 71
  • 1
  • 5
1

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>
Bogdan Ustyak
  • 5,639
  • 2
  • 21
  • 16
0

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

for expanded app:expandedTitleGravity="center_vertical|center_horizontal"

Leo Johny Thayyil
  • 137
  • 1
  • 9