Android: How to create a button like radio button in a group?

Question

Is it possible to create a button like radio button without using images? Would like to have a pressed state upon selection. Then back to normal state when I click other options.

Answer 1

Yes you can do it by using states for the button in drawable such as (I have drawable for states you can have colors too.) This is the file button_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:drawable="@drawable/dark_silver_filled_square" />
    <item android:drawable="@drawable/light_silver_filled_square"/>
</selector>

And place this drawable file as background to your button as background like this:

 <Button
            android:id="@+id/allBtn"
            android:layout_width="@dimen/_80sdp"
            android:layout_height="@dimen/_22sdp"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:background="@drawable/button_selector"
            android:text="All"
            android:textAllCaps="false"
            app:layout_constraintBottom_toTopOf="@+id/btnTest"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0" />

And programmatically create an ArrayList of buttons like this in your class

    private var btnList = ArrayList<Button>()

Add your buttons in XML to the list like this:

        btnList.add(allBtn)

Then set OnTouchListener for maintaining the selected color in the button like this:

  binding.allBtn.setOnTouchListener { v, event ->
        buttonStatePreserver(allBtn)
        true
    }

And pass it to a method to preserve selection for that particular button and make other remaining buttons unselected:

fun buttonStatePreserver(button: Button) {
        for(btn in btnList) {
                if(btn == button) {
                    btn.isPressed = true
                } else {
                    btn.isPressed = false
                }
            }
    }

Answer 2

simply include the respective drawables of the radio button in different states (i.e. focused, pressed, checked, or normal). Include these in a selector.xml to specify the looks of the button for the respective states, and include that xml in the android:background attribute of your button. That should do it all...! :)

Check this link to understand the method better: Change how a CheckBox looks (it is given for a CheckBox, but similar stuff will work for button as a radio button as well).

Edit:

Define round_button.xml as below:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:state_focused="true"
        android:drawable="@drawable/roundbutton_on_background_focus_yellow" />

    <item android:state_checked="false" android:state_focused="true"
        android:drawable="@drawable/roundbutton_off_background_focus_yellow" />

    <item android:state_checked="false" 
        android:drawable="@drawable/roundbutton_off_background" />

    <item android:state_checked="true"
        android:drawable="@drawable/roundbutton_on_background" />
</selector>

Then, wherever you need to include that button, just add the following:

<Button android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/round_button"
    android:checked="true"/>

[P.S.: Don't forget to include the drawables for a round button, you'll have to search them yourself, or get from the default files (.android), which is given in the link]