Title in expanded CollapsingToolbarLayout not displayed correctly

Question

So, I got a wierd problem with my CollapsingToolbarLayout in my project. After my activity starts this is how my toolbar title appears:

After collapsing the layout is like this:

The original title text in the example is: "UPC VONALKODOS TERMEK"

I think the title in the expanded state should be longer (there is enough room for it) than in collapsed state. This what my activity's xml looks like:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:theme="@style/PolarThemeNoActionBar">
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_below="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="142dp"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="20dp"
            app:expandedTitleTextAppearance="@style/ExpandedText">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>
            </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_below="@+id/toolbar"
            android:minHeight="?attr/actionBarSize"
            android:gravity="bottom"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:tabIndicatorColor="?attr/colorPrimaryDark"/>
        </android.support.design.widget.AppBarLayout>
    </android.support.design.widget.CoordinatorLayout>

My res/style/ExpandedText looks like:

<style name="ExpandedText" parent="android:TextAppearance">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textSize">20sp</item>
    </style>

Support library version: 25.1.1. Phone: Nexus 5 Android version: 6.0.1 (stock)

My question: Why the title have dots at the end in expanded state and not filling the space to show more from it?

[EDIT 1] Issue still remains with support library version 25.3.0

It looks like this behavior was introduced in a relatively recent library version. I thought it seemed odd, so I pulled an old project, and it behaves as you're expecting with version 23.4.0. I.e., the title shows fully in the expanded state, rather than being ellipsized based on the collapsed size and area, as I mentioned previously. I'm not sure which version brought the change, but looking at the source's git blame, it seems this was done middle of last year, to fix edge cases where the title would overlap icons and such. You could file an issue, and revert for now, if that's a possibility. — Mike M., Mar 18 '17 at 20:42
@Mike M. Thanks for your comment. I think you are right, in an older version of my app the `CollapsingToolbarLayout` title looks OK: I think you should post this comment as an answer. — zkminusck, Mar 21 '17 at 07:51

score 10 · Accepted Answer · answered Mar 21 '17 at 11:34

CollapsingToolbarLayout uses a helper class - CollapsingTextHelper - to draw and animate its title. At the time of writing, the recent versions of this class are restricting the available width for the expanded title to a size based on the width available in the collapsed state, scaled by the ratio of the states' text sizes.

Relevant source comments:

// If the scaled down size is larger than the actual collapsed width, we need to
// cap the available width so that when the expanded text scales down, it matches
// the collapsed width

This was apparently introduced to address some edge cases where the title would overlap other Toolbar stuff, as explained in the notes on the relevant commit.

Fix CollapsingToolbarLayout displaying over icons

CTL scales it title which works in most situations. There are edge cases though where the title can be drawn on the Toolbars contents, namely icons.

This CL fixes the edge cases where the collapsed and expanded text sizes are similar in size, which means that there is limited/no scaling happening while scrolling. In this instance we need to cap any available width when expanded, so that it 'scales' to match the collapsed width when collapsed.

Normally, I'm all about tearing into View classes to modify their behavior with reflection and other trickery, but in this case, the given setup is such that this would take some really heavy lifting. The helper class is not normally accessible outside the library package, its instance is private in the CollapsingToolbarLayout, and the sizing calculations are performed in a private, secondary method with mostly local variables.

If it's a possibility, the simplest solution would be to revert to a library version published before this fix. I've not determined the exact version that brought this change, and the support library revision history doesn't seem to mention it, unfortunately. However, that commit was made in the middle of last year (2016), so probably around version 24.0.0, or a little later. I can verify that the behavior is not present in 23.4.0.

You could certainly file a bug report for this, if you like, though no guarantees that they'd consider this a bug. I didn't find any previously filed issues regarding this specifically, other than this tangentially-related one complaining about the ellipsizing that was a side effect of that change.

Nick Cardoso · Answer 2 · 2017-03-17T13:29:33.863

0

You can turn off ellipsizing. Add this to your TextAppearance style:

<item name="android:ellipsize">none</item>

If it's necessary you can also manually change the width of the textview that is created by adding width to the style

<item name="android:width">300dp</item>

edited Mar 17 '17 at 13:29

answered Mar 17 '17 at 13:24

Nick Cardoso

20,807
14
73
124

Thanks for your answer, but it didn't worked. My `CollapsingToolbar` title looks the same. – zkminusck Mar 17 '17 at 14:01

saquib · Answer 3 · 2017-03-20T07:01:31.350

I edit your code see this may be you like this

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/tablayout"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            app:contentInsetLeft="0dp"
            app:contentInsetStart="0dp"
            app:contentInsetStartWithNavigation="0dp"
            app:layout_collapseMode="pin" />
    </android.support.design.widget.CollapsingToolbarLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:layout_below="@+id/toolbar"
        android:background="?attr/colorPrimary"
        android:gravity="bottom"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:tabIndicatorColor="?attr/colorPrimaryDark" />
</android.support.design.widget.AppBarLayout>

and this is Activity Class

public class MainActivity extends AppCompatActivity {

private Toolbar toolbar;
private CollapsingToolbarLayout collapsingToolbar;

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.answer2);

    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle("UPC VONALKODOS TERMEK");
    collapsingToolbar.setExpandedTitleTextAppearance(R.style.ExpandedAppBar);
    collapsingToolbar.setCollapsedTitleTextAppearance(R.style.CollapsedAppBar);
}

}

and this is res/style/:

<style name="CollapsedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textStyle">normal</item>
</style>
<style name="ExpandedAppBar" parent="@android:style/TextAppearance.Medium">
    <item name="android:textSize">20sp</item>
    <item name="android:textStyle">bold</item>
</style>

Title in expanded CollapsingToolbarLayout not displayed correctly

3 Answers3