Android Adding a button with multiline text inside MaterialButtonToggleGroup doesn't work

Question

I am trying to show a multiline button inside a MaterialButtonToggleGroup but it always shows me ... at the newline but it works fine outside the MaterialButtonToggleGroup

I have tried

• using \n and 

• using <br/> HTML tag with Html.form method
  
  As shown in the image below the first button is outside the MaterialButtonToggleGroup but the second is inside it.

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

    </data>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:context=".conversation.ui.conversations.AddNewConversationFragment">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_margin="20dp"
            android:background="@drawable/register_field_background"
            android:orientation="vertical"
            android:padding="10dp">


            <ImageView
                android:id="@+id/img_close"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_baseline_close_24"
                android:tint="@android:color/darker_gray"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:ignore="ContentDescription" />

            <com.google.android.material.button.MaterialButton
                android:id="@+id/add_anyone"
                android:singleLine="false"
                android:maxLines="2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:backgroundTint="@color/gray100"
                android:text="This is Multi Line Text &#10;Line2"
                android:textAllCaps="false"
                android:textColor="@color/gray700"
                app:iconTint="@color/gray700"
                />
            <com.google.android.material.button.MaterialButtonToggleGroup
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="30dp"
                android:layout_marginBottom="10dp"
                android:orientation="vertical"
                app:checkedButton="@+id/button_add_native"
                app:layout_constraintBottom_toTopOf="@+id/tv_select_address"
                app:layout_constraintTop_toBottomOf="@+id/textView"
                app:selectionRequired="true"
                app:singleSelection="true">

                <com.google.android.material.button.MaterialButton
                    android:id="@+id/add_anyone"
                    android:singleLine="false"
                    android:maxLines="2"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:backgroundTint="@color/gray100"
                    android:text="This is Multi Line Text &#10;Line2"
                    android:textAllCaps="false"
                    android:textColor="@color/gray700"
                    app:iconTint="@color/gray700"
                    />

            </com.google.android.material.button.MaterialButtonToggleGroup>


            <TextView
                android:id="@+id/textView"
                style="@style/bottomSheetDialogHeader"
                android:layout_marginStart="16dp"
                android:letterSpacing="0.1"
                android:text="@string/add_conversation_dialog_title"
                android:textAllCaps="true"
                app:layout_constraintBottom_toBottomOf="@+id/img_close"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="@+id/img_close" />


            <com.google.android.material.button.MaterialButton
                android:id="@+id/tv_select_address"
                style="@style/LinguisticMainLayoutOrangeButton"
                android:paddingBottom="10dp"
                android:text="@string/start_chatting"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>

    </RelativeLayout>
</layout>

Answer 1

It is an expected result.You can check the source code below where the multiline is overridden.

You can set it programmatically. Something like:

    val button : MaterialButton = findViewById(R.id.add_anyone)
    button.maxLines = 2

Source code:

https://github.com/material-components/material-components-android/blob/e944d1b2a6ee5d9d5a338de0c0061f7b02790f77/lib/java/com/google/android/material/button/MaterialButtonToggleGroup.java#L751-L754

  private void setupButtonChild(@NonNull MaterialButton buttonChild) {
    buttonChild.setMaxLines(1);
    buttonChild.setEllipsize(TruncateAt.END);
    buttonChild.setCheckable(true);