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>

score 3 · Accepted Answer · answered Sep 08 '20 at 11:45

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);

score 2 · Answer 2 · answered Jan 19 '21 at 14:32

An alternative trick for future reference:

Provide your own custom class, let's name it CustomMaterialButtonToggleGroup, which extends MaterialButtonToogleGroup

example:

public class CustomMaterialButtonToggleGroup extends MaterialButtonToggleGroup {
    public CustomMaterialButtonToggleGroup(@NonNull Context context) {
        super(context);
    }

    public CustomMaterialButtonToggleGroup(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomMaterialButtonToggleGroup(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void addView(View child, int index, ViewGroup.LayoutParams params) {
        super.addView(child, index, params);
        if(child instanceof MaterialButton)
        {
            ((MaterialButton) child).setMaxLines(2);
        }
    }

This way we enforce via code the child views of the MaterialToggleGroup to implement maxLines!

Final the 2nd weird part is:

Go to your Activity/Fragment in which you define your button...and set it via code!

example:

SampleButton.setText("Hey\nI'm multiline"); // notice the escape character of newline-> \n

Afterwards extract it in the strings.xml as you would do normally!

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

2 Answers2

Linked