Android: Placing, Setting Text & Retrieving checked Radio Button is table/grid view (n x n) format

When I was working with one of my app I was came to a state where I need to use Radio buttons in 2 x 2 format. In Radio group I can set orientation either horizontal or vertical. I got into stuck how to do that. I start googling for the solution. In many solutions they stated using TableRow for each Radio Button rows, so for my case it will be 2 TableRows with 2 radio buttons in each row. I didn’t want to do it with TableRow so I used LinearLayout with 2 Radio Buttons in each LinearLayout, & my parent layout’s orientation was vertical.

Screen Shot 2017-12-04 at 1.03.05 PM
What I wanted

Hmmmm….. that solved my puzzle for placing radio buttons as 2×2. Let test the app then :). When app ran it was simply perfect placing, was happy for the solution. Now comes selecting and getting checked radio button. When I selected a radio button it was selected properly. Then I tried to select another radio button…….. oopsssss now both the radio buttons are showing as checked 😦 That is really heartbreaking 😥

 

So my next challenge is to fix the issue and get the checked radio option. Started googling again and got the solution. Need to modify a bit to fit my problem but the main idea was to use to separate Radio Group with two Radio Buttons each (with horizontal orientation), and put the Groups in a Layout with vertical orientation.

So in the layout.xml file it will look like:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <RadioGroup
        android:id="@+id/radioGrp1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rBtn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 1" />

        <RadioButton
            android:id="@+id/rBtn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 2" />

    </RadioGroup>

    <RadioGroup
        android:id="@+id/radioGrp2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rBtn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 3" />

        <RadioButton
            android:id="@+id/rBtn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Option 4" />

    </RadioGroup>

</LinearLayout>

For setting text for the radio buttons for both groups use the following code in your ?.java file:

rg1 = (RadioGroup) findViewById(R.id.radioGrp1);
rg2 = (RadioGroup) findViewById(R.id.radioGrp2);
rg1.clearCheck(); // clears checked state of any radio button
rg2.clearCheck();// clears checked state of any radio button

rg1.setOnCheckedChangeListener(listenerForRG1);//setting listener to take action for any checked state change
rg2.setOnCheckedChangeListener(listenerForRG2);//setting listener to take action for any checked state change

Here are the listener functions for both the groups:

private RadioGroup.OnCheckedChangeListener listenerForRG1 = new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        if (checkedId != -1) {
            rg2.setOnCheckedChangeListener(null); // remove the listener before clearing so we don't throw that stackoverflow exception
            rg2.clearCheck(); // clear the second radio group
            rg2.setOnCheckedChangeListener(listener2); //reset the listener
        }
    }
};

private RadioGroup.OnCheckedChangeListener listenerForRG2 = new RadioGroup.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        if (checkedId != -1) {
            rg1.setOnCheckedChangeListener(null);
            rg1.clearCheck();
            rg1.setOnCheckedChangeListener(listener1);
        }
    }
};

To get the checked radio button:

int chkId1 = rg1.getCheckedRadioButtonId(); //Get checked radio button id from radio group 1 (if any radio button is checked it will return id else will return -1)
int chkId2 = rg2.getCheckedRadioButtonId();//Get checked radio button id from radio group 2 (if any radio button is checked it will return id else will return -1)
int realCheck = chkId1 == -1 ? chkId2 : chkId1;//Get checked radio button id 
RadioButton rb = findViewById(realCheck); //Get the checked radio button
String radioText = rb.getText(); //Get the text of checked radio button

That’s it…. Now you can get the checked value from your radio groups and proceed with your goal 🙂

Hope this will help you.

🙂 Happy Coding 🙂

 

Acknowledgement: I got the solution from the following link and modified little to fit my problem.

https://stackoverflow.com/questions/10425569/radiogroup-with-two-columns-which-have-ten-radiobuttons
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: