Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Material Button Toggle Group single selection

How can I force a MaterialButtonToggleGroup to act like a RadioGroup as in having at least one selected item always? Setting setSingleSelection(true) also adds the possibility to have nothing selected if you click twice on a Button in the group.

Here is my code:

<com.google.android.material.button.MaterialButtonToggleGroup
            android:id="@id/BottomSheetDialog_fromFragmentBottomSheetSort_Sort_ToggleButtonGroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:singleSelection="true"
            app:checkedButton="@+id/BottomSheetDialog_fromFragmentBottomSheetSort_Sort_ToggleButtonGroup_Ascending">

        <com.google.android.material.button.MaterialButton
                android:id="@id/BottomSheetDialog_fromFragmentBottomSheetSort_Sort_ToggleButtonGroup_Ascending"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/Fragment_BottomSheetDialog_Sort_ToggleButton_Ascending"
                app:backgroundTint="@color/custom_button_background_states"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"/>

        <com.google.android.material.button.MaterialButton
                android:id="@id/BottomSheetDialog_fromFragmentBottomSheetSort_Sort_ToggleButtonGroup_Descending"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/Fragment_BottomSheetDialog_Sort_ToggleButton_Descending"
                app:backgroundTint="@color/custom_button_background_states"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"/>
    </com.google.android.material.button.MaterialButtonToggleGroup>

As you can see, even while using app:singleSelection="true" if i click on an already checked button, it unchecks it leaving no button checked in the group.

like image 277
Mervin Hemaraju Avatar asked Jul 18 '19 08:07

Mervin Hemaraju


People also ask

How do you use the toggle group mat button?

By default, mat-button-toggle-group acts like a radio-button group- only one item can be selected. In this mode, the value of the mat-button-toggle-group will reflect the value of the selected button and ngModel is supported. Adding the multiple attribute allows multiple items to be selected (checkbox behavior).

What is toggle button How do you create it explain with example?

A toggle button allows the user to change a setting between two states. You can add a basic toggle button to your layout with the ToggleButton object. Android 4.0 (API level 14) introduces another kind of toggle button called a switch that provides a slider control, which you can add with a Switch object.

What is the use of toggle in angular?

The <mat-button-toggle>, an Angular Directive, is used to create a toggle or on/off button with material styling and animations. mat-button-toggle buttons can be configured to behave as radio buttons or checkboxes.


1 Answers

UPDATE :

app:selectionRequired="true" attribute is available as of version 1.2.0

Override the toggle() method of the MaterialButton class and use it instead of MaterialButton

import android.content.Context
import android.util.AttributeSet
import com.google.android.material.button.MaterialButton

class CustomMaterialToggleButton : MaterialButton {

    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 toggle() {
        if (!isChecked) {
            super.toggle()
        }
    }
}

This will make sure that already checked button is not unchecked on single selection.

like image 105
Saikrishna Rajaraman Avatar answered Oct 08 '22 09:10

Saikrishna Rajaraman