MaterialButtonToggleGroup child's MaterialButton layout_marginStart, layout_marginEnd not working

Question

If i am trying to add margin with layout_marginStart or layout_marginEnd but there is no effect on UI. I am not sure why layout_marginStart, layout_marginEnd not working with MaterialButton when i add them as the child of MaterialButtonToggleGroup

 <com.google.android.material.button.MaterialButtonToggleGroup
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="@dimen/ten_dp"
                            app:singleSelection="true">

                            <com.google.android.material.button.MaterialButton
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginStart="@dimen/twentY"
                                app:icon="@drawable/ic_directions_walk_black_24dp" />

                            <com.google.android.material.button.MaterialButton
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_marginStart="@dimen/ten_dp"

                                app:icon="@drawable/ic_directions_car_black_24dp" />

                            <com.google.android.material.button.MaterialButton
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"

                                android:layout_marginStart="@dimen/ten_dp"
                                app:icon="@drawable/ic_directions_bus_black_24dp" />
                        </com.google.android.material.button.MaterialButtonToggleGroup>

Lawanda

Answer 1

After hours straggling, I finally found clean solution for this. we can easily use android:insetRight or android:insetLeft to add spacing to the Material buttons.

Here is a code sample of 10dp (5dp + 5dp) space between each button:

<com.google.android.material.button.MaterialButtonToggleGroup
  android:id="@+id/toggleGroup"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <com.google.android.material.button.MaterialButton
    android:id="@+id/button1"
    android:insetRight="5dp"
    ... />

  <com.google.android.material.button.MaterialButton
    android:id="@+id/button2"
    android:insetRight="5dp"
    android:insetLeft="5dp"
    ... />

  <com.google.android.material.button.MaterialButton
    android:id="@+id/button3"
    android:insetLeft="5dp"
    ... />

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

Hope this helps you too :)

Eyeful

This did the job. Thanks – Lawanda

If someone uses orientation vertical then buttons gave auto spacing, to remove spaces between buttons use android:insetBottom="0dp" or android:insetTop="0dp". – Thais

Answer 2

In order to cohesively group multiple buttons together, MaterialButtonToggleGroup overrides the start and end margins of any children added to this layout such that child buttons are placed directly adjacent to one another.

Sorry, layout_marginStart and layout_marginEnd will not work here. Read official guideline about MaterialButtonToggleGroup.

You can try with ToggleButton.

                  <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center"
                    android:orientation="horizontal">

                        <ToggleButton
                            android:id="@+id/tJava"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textOff="JAVA"
                            android:textOn="JAVA" />

                       <ToggleButton
                            android:id="@+id/tKotlin"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:textOff="KOTLIN"
                            android:textOn="KOTLIN" />

                </LinearLayout>

Then Java class onCreate() section

    tJava=findViewById(R.id.tJava);
    tKotlin=findViewById(R.id.tKotlin);


    tJava.setOnCheckedChangeListener(changeChecker);
    tKotlin.setOnCheckedChangeListener(changeChecker);

Then changeChecker function outside of onCreate()

CompoundButton.OnCheckedChangeListener changeChecker = new CompoundButton.OnCheckedChangeListener() {

        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            if (isChecked){
                if (buttonView == tJava) {

                    tKotlin.setChecked(false);

                }
                if (buttonView == tKotlin) {

                    tJava.setChecked(false);

                }

        }
    };

Brinkmanship

The solution you have provided is not working as expected there should only one button active at a time but it's not happening if I am trying to put three toggle button into a radiogroup.@IntelliJ Amiya – Lawanda

@Lawanda Solved this yet ? – Brinkmanship

Answer 3

Currently (1.2.0-beta01 and 1.3.0-alpha01) you can't do it.
As pointed out by @IntelliJ Amiya's answer:

In order to cohesively group multiple buttons together, MaterialButtonToggleGroup overrides the start and end margins of any children added to this layout such that child buttons are placed directly adjacent to one another.

There is a workaround (not so nice, but it works):

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

   <com.google.android.material.button.MaterialButton
       style="?attr/materialButtonOutlinedStyle"
       app:strokeColor="@color/as_background"
       app:strokeWidth="2dp"
       android:textColor="@color/white"
       app:backgroundTint="@color/my_group_selector"
       ../>

Use a stroke in your MaterialButton with the same color of the activity background. The strokeWidth wokrs like a margin.
Finally use a selector with supports the checked state:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="1.00" android:color="?attr/colorPrimary" android:state_checked="true"/>
    <item android:alpha="0.30" android:color="?attr/colorPrimary" android:state_checked="false"/>
</selector>

Turntable