Material-components-android: [MaterialButton] Long button text gets cut off when using maxlines=2 and ellipsize=end

Created on 19 Dec 2019  路  6Comments  路  Source: material-components/material-components-android

Description: When using a MaterialButton with fixed width and fixed number of text lines, I tried to find a way to deal with dynamic button text that could be too long for the button size. When the text is too long for the button the words that don't fit will simply not be displayed by default, thus not indicating that there are words missing. When setting "ellipsize" to "end" the three dots get displayed, but the beginning of the text will be cut off in some situations.

Steps to reproduce: Check out and run this sample project: https://github.com/geworfener/MaterialButtonEllipsizeBug

Alternatively:

  1. Create a new Android project with a single activity.
  2. Add material lib and set material theme.
  3. Use the following activity layout:
    ```
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
<com.google.android.material.button.MaterialButton
    android:layout_width="128dp"
    android:layout_height="wrap_content"
    android:maxLines="2"
    android:ellipsize="end"
    android:text="Hello world, this is a long text!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


```

Actual behavior:

The first letter of the second text line gets cut off.

image

Expected behavior: All words of the text are displayed fully.

Android API version: 28

Material Library version: 1.1.0-beta02, 1.2.0-alpha02

Device: Pixel 3a XL

bug

All 6 comments

+1

It happens also using android:maxLines="1":

    <com.google.android.material.button.MaterialButton
        android:layout_width="128dp"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:ellipsize="end"
        android:text="Hello world, this is a long text!"
         />

Schermata 2020-08-02 alle 19 45 05

It doesn't happen with an AppCompatButton:

Schermata 2020-08-02 alle 19 45 59

It still occurs in 1.2.0.
This is a serios functionality bug, wherefore we cant use the MaterialButton in our project.
Is there a time plan when this is getting fixed?

I faced same with material text view. Is there any update on this?

It is still not fixed in 1.2.1

need a fix soon.

Was this page helpful?
0 / 5 - 0 ratings