Search code examples
androidandroid-layoutmaterial-designandroid-togglebutton

MaterialButtons in MaterialButtonToggleGroup can't do wrap_content


I have the following xml:

<LinearLayout
    android:id="@+id/ll_two_state"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:layout_marginStart="10dp"
    android:layout_marginEnd="10dp"
    app:cardCornerRadius="5dp"
    app:strokeWidth="1dp">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/filterA"
            style="@style/customToggleButtonStyle"
            app:cornerRadius="0dp"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="läkdsvksd"
            android:textSelectHandleLeft="@drawable/rounded_corner"
            android:ellipsize="none"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/filterB"
            style="@style/customToggleButtonStyle"
            app:cornerRadius="0dp"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:ellipsize="none"
            android:textSelectHandleRight="@drawable/rounded_corner"
            android:text="öskdjnvksjnbvsnfjknvlsnd fvlnsdkjnvsdklövölkjvndfökljnvljkdfnlvjknlvjkn" />
</LinearLayout>

which provides me with two buttons with equal height working as a toggle.

enter image description here

The problem is that I can't get the same result with MaterialButtonToggleGroup forcing the buttons to one line no matter adding the maxLine, line or minLine tags.

The reason to use MaterialButtonToggleGroup is cleaner code when handling the changes and also getting rounded corner.

Is there a fix for it or should I use a different kind of view?


Solution

  • I finally managed to get what I expected. There are two bugs in this problem:

    1. Button is not wrapping its content

    2. MaterialButtonToggleGroup overrides the maxLine

    So the fix I have for LinearLayout can be used for MaterialButtonToggleGroup as follows:

    <com.google.android.material.button.MaterialButtonToggleGroup
            android:id="@+id/toggle_group"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:gravity="center"
            app:cardCornerRadius="5dp"
            app:selectionRequired="true"
            app:singleSelection="true"
            app:strokeWidth="1dp">
    
            <com.google.android.material.button.MaterialButton
                android:id="@+id/filterA"
                style="@style/customToggleButtonStyle"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="State A" />
    
            <com.google.android.material.button.MaterialButton
                android:id="@+id/filterB"
                style="@style/customToggleButtonStyle"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:text="State B" />
    
        </com.google.android.material.button.MaterialButtonToggleGroup>
    

    And add the following lines into my code:

    binding.filterA.maxLines = 2
    binding.filterB.maxLines = 2
    

    And now it looks like this:

    enter image description here