[CollapsingToolbarLayout] MultiLine (maxLines) not applying correct gravity to text

[saantiaguilera]

Description: When using maxLines in alpha06 with expandedTitleGravity set to center. Text isn't centered.

Expected behavior: The expanded title should be centered (or the desired gravity should be applied)

Source code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:background="@color/white"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/ui_fullscreenmodal_appbarlayout_height"
        android:stateListAnimator="@animator/appbar_elevation_zero"
        android:fitsSystemWindows="true" >

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:expandedTitleGravity="center"
            app:contentScrim="@color/white"
            app:expandedTitleTextAppearance="@style/CollapsingToolbarStyle.Expanded"
            app:collapsedTitleTextAppearance="@style/CollapsingToolbarStyle.Collapsed"
            app:title="long enough text to use 2 lines"
            app:maxLines="2"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:gravity="center"
                app:layout_collapseMode="none" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/terms_and_conditions"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:gravity="center"
            android:clickable="true"
            android:text="some large text"/>

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Android API version: Android 7.0 (api 24)

Material Library version: 1.2.0-alpha06

Device: Samsung SM-G925I

To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.

[saantiaguilera]

Making a clone of the CollapsingToolbarLayout and using in the helper ALIGN_CENTER seems to fix the issue. As soon as I finish my sprint I will try to come up with a PullRequest fixing it here (if it's not already done).

If someone can iterate this faster than me, the line is this one

Cheers guys :)

[saantiaguilera]

I found other issues (which I might try to fix also, if not at least I document them):

• Fonts through textAppearance using fontFamily are not working for me. Exactly the same example as before using

  <style name="CollapsingToolbarStyle.Expanded">
      <item name="fontFamily">@font/proxima_nova_light</item>
      <item name="android:fontFamily">@font/proxima_nova_light</item>
  </...>

  It somehow doesn't load. I did some debugging but I couldn't reach to anything in concrete besides the problem being in the initialization phase. Using a manual approach (setTypeface(Typeface)) works fine so I'm using this as workaround.

• After collapsing and expanding a few times, the blending starts to fail and the first line of the expanded area is shown "blurred". This is because you are doing 2 writings of the same text (once for the expanded, the other one for the cross-section). I couldn't find where the offset is created between the cross-section and the expanded, so I ended up fixing it by adding an if (expandedTextBlend != 1) { before drawing the cross-section area.

Code for more visibility:

  // In CollapsingTextHelper.
  private void drawMultinlineTransition(
      @NonNull Canvas canvas, float currentExpandedX, float x, float y, float ascent) {
    int originalAlpha = textPaint.getAlpha();
    // positon expanded text appropriately
    canvas.translate(currentExpandedX, y);
    // Expanded text
    textPaint.setAlpha((int) (expandedTextBlend * originalAlpha));
    textLayout.draw(canvas);

    if (expandedTextBlend != 1) { // --> This is how I avoided the blurry first expanded line.
      // position the overlays
      canvas.translate(x - currentExpandedX, 0);

      // Collapsed text
      textPaint.setAlpha((int) (collapsedTextBlend * originalAlpha));
      canvas.drawText(
              textToDrawCollapsed, 0, textToDrawCollapsed.length(), 0, -ascent / scale, textPaint);

      // Remove ellipsis for Cross-section animation
      String tmp = textToDrawCollapsed.toString().trim();
      if (tmp.endsWith(ELLIPSIS_NORMAL)) {
        tmp = tmp.substring(0, tmp.length() - 1);
      }
      // Cross-section between both texts (should stay at original alpha)
      textPaint.setAlpha(originalAlpha);
      canvas.drawText(
              tmp, 0, Math.min(textLayout.getLineEnd(0), tmp.length()), 0, -ascent / scale, textPaint);
    }
  }

[Entreco]

We have the same issue, using version 1.2.0! We want 2 lines and gravity to be centered. Let me know if you have found more details, otherwise I will try to find time to investigate myself.

[damirasol]

Can confirm bug still happens on version 1.2.1

[foodpoison]

from what I can tell the last version of the library that didn't have this issue was 1.2.0-beta01

I ended up taking a hackish approach, changing maxLine to be larger than one if the length of the title is larger than a certain number.

[PedroMoniz]

Bug still exists in 1.3.0-alpha03, I currently have a need for this feature as it breaks the UI.

[gookman]

👍

[PineapplePie]

I'm facing the same issue in 1.4.0-beta01

[AlexandreGorobets]

Why thet cannot apply pull request fix, or chage StaticLayout.setAlignment(Alignment.ALIGN_NORMAL) to setAlignment(Alignment.ALIGN_CENTER) if expandedTextGravity == center|center_horizontal ?

[omiwrench]

Bug still exists in 1.5.0-alpha01.