Search code examples
javaandroidandroid-layoutbuttonmaterial-components

how to fit buttons size in Button Toggle Group


My design contains a button group which choices, example:
enter image description here
I want to achieve this buttons being stretched equally to the width of a Button Toggle Group like here on the photo:
enter image description here
I tried to add ConstraintLayout inside Button Toggle Group, but it didn't work, I have no any ideas left. Help me with this, here is the code:

<com.google.android.material.button.MaterialButtonToggleGroup
            android:id="@+id/button_group"
            android:layout_width="380dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="15dp"
            android:layout_marginEnd="15dp"
            android:gravity="center">

            <Button
                android:id="@+id/button_one"
                style="?attr/materialButtonOutlinedStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Bachelor" />

            <Button
                android:id="@+id/button_center"
                style="?attr/materialButtonOutlinedStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Master" />

            <Button
                android:id="@+id/button_three"
                style="?attr/materialButtonOutlinedStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Doctoral" />

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

Solution

  • You can solve this using the android:layout_weight attribute on all the buttons, and a width of 0dp to apply the weight:

    <Button
        ....
        android:layout_width="0dp"
        android:layout_weight="1" />
    

    Apply the same to the rest of buttons.

    Before:

    enter image description here

    After:

    enter image description here