Making a group of buttons act like a Radio Buttons

Hi guys,

Everybody wants a change. So, People tend to use different styles in their projects. I have seen a lot of projects where buttons are used in place of radio buttons to make it look good. (Yeah. So? :P)

I am writing this article because, I have seen a lot of guys doing mistakes in this process. One thing we have to notice in this process is, when the user clicks on a button, the button has to be highlighted and other button’s background should change so as to make the user understand which button has been clicked.

The mistake I have seen in lot of the projects is that, Developers change the background of the buttons programmatically. This is bad. (I mean, aren’t you tired changing the background?). Then? what other way?. Don’t worry guys!. “Selectors” are for the rescue.

Let’s take an example:

Let’s say you are creating a reminder application. You have 3 buttons to denote the priority of the reminder. i.e, High, Medium, and Low. Now, You want the user to select any one of those. When the user selects “High” priority button, that button has to be highlighted and other buttons have to change their background. How do you achieve this?. I will explain it in detail.

At the first place, Create a “selector” by the name “btn_priority_background.xml” in the “drawable” folder like below.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/button_round_corner_yellow"
        android:state_selected="true"/>

    <item android:drawable="@drawable/button_round_corner_yellow"
        android:state_pressed="true"/>

    <item android:drawable="@drawable/button_round_corner_gray"/>

</selector>

What next?. Simple.

Make all your button’s background property pointing to “btn_priority_background.xml” file.

<Button
    android:id="@+id/btn_priority_high"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/btn_priority_background"
    android:text="@string/high" />

Now what?. Will this work?. No!. Not yet!. One more thing pending.

In the “OnClickListener()” method of each of the buttons, do this.

@Override
public void onClick(View view) {

    switch (view.getId()) {
      case R.id.btn_priority_high:
        btnPriorityHigh.setSelected(true);
        btnPriorityMedium.setSelected(false);
        btnPriorityLow.setSelected(false);
        break;
      case R.id.btn_priority_medium:
        btnPriorityHigh.setSelected(false);
        btnPriorityMedium.setSelected(true);
        btnPriorityLow.setSelected(false);
        break;
      case R.id.btn_priority_low:
        btnPriorityHigh.setSelected(false);
        btnPriorityMedium.setSelected(false);
        btnPriorityLow.setSelected(true);
        break;
     }
}

In the above snippet of code, btnPriorityHigh, btnPriorityMedium, and btnPriorityLow are the buttons in the group denoting High, Medium, and Low priority for the reminders.

Is it done? Will it work now? .

Yes!!!. Try it for yourself. Let me know, if you are facing any issues achieving this in the comment section below. And, If you like this article, Please give me a round of applause(Hit the clap icon below(as many times as you want :P)).

Happy Coding!!!.