Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Title in expanded CollapsingToolbarLayout not displayed correctly

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

the expanded title has dots at the end

After collapsing the layout is like this:

collapsed title with dots at the end

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

like image 351
zkminusck Avatar asked Mar 10 '17 13:03

zkminusck


1 Answers

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.

like image 51
Mike M. Avatar answered Nov 03 '22 17:11

Mike M.