How to write a multiline text on a Material button?

Question

I need to make a multiline text material button. I have followed this question's answers, but it turns out that material buttons work differently.

<com.google.android.material.button.MaterialButtonToggleGroup
    android:id="@+id/toggle_parent_child"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginEnd="16dp"
    android:theme="@style/Theme.MaterialComponents"
    android:visibility="gone"
    app:checkedButton="@id/button_parent"
    app:singleSelection="true">

    <com.google.android.material.button.MaterialButton
        android:id="@+id/button_parent"
        style="@style/Login.Button.ToggleButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Parent\n Device" />

    <com.google.android.material.button.MaterialButton
        android:id="@+id/button_child"
        style="@style/Login.Button.ToggleButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Child \n Device" />

I'm getting this:

but I need every word to be in a different line like this:

score 6 · Accepted Answer · answered Oct 17 '20 at 12:24

It might be late but here is my implementation to fix it

class MonsterButtonToggleGroup : MaterialButtonToggleGroup {

    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)


    override fun addView(child: View?, index: Int, params: ViewGroup.LayoutParams?) {
        super.addView(child, index, params)
        if (child is MaterialButton)
            child.maxLines = 2
    }

}

score 1 · Answer 2 · answered Mar 10 '20 at 09:33

1

you can use replace to make it a multiline string in you MaterialButton like this -

val singleLine = getString(R.string.hello_blank_activity)
demoText.text = singleLine

val multiLine = singleLine.replace(" ", "\n")
demoTextMulti.text = multiLine

Here is the screenshot of the output -

answered Mar 10 '20 at 09:33

sunnat629

131
6

thank you for your answer, but isn't it the same as setting the original text to include \n?i tried your solution anyway and sadly it didn't work out. im using kotlin: `val singleLine:String = button_parent.text.toString()` `val multiLine = singleLine.replace(" ", "\n")` `button_parent.text = multiLine` – Hila Grossbard Mar 10 '20 at 09:50
1

Ahh, got it. The problem is not in the `MaterialButton` it's happening because of `MaterialButtonToggleGroup`. So, if I am not wrong, `MaterialButtonToggleGroup` doesn't support multiple lines. It supports either single-line text and/or image. You can check this out, [LINK](https://developer.android.com/reference/com/google/android/material/button/MaterialButtonToggleGroup) and from [Material.io](https://material.io/develop/android/components/buttons/) – sunnat629 Mar 10 '20 at 10:50

How to write a multiline text on a Material button?

2 Answers2