RadioGroup with only one selected Item

Question

I am trying to make a RadioGroup as in the image. I want that only one RadioButton should be checked at a time.

This is what I did to achive this.

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

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/radio1" />

        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/radio2" />
    </RadioGroup>

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/radio3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/radio3" />

        <RadioButton
            android:id="@+id/radio4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/radio4" />
    </RadioGroup>
</RadioGroup>

Here is the Image

What I want

But by using this I can select any one from each row, i.e. 2 items can be selected. Like this:

enter image description here

Please help me...

See my answer here: https://stackoverflow.com/questions/37313559/how-to-set-only-one-radiobutton-can-be-selected-at-the-time-in-radiogroup/54467859#54467859 — Levon Petrosyan, Jan 31 '19 at 19:35

melvynkim · Accepted Answer · 2013-05-29T11:48:56.173

10

enter image description here

UPDATED

You can dynamically unselect the RadioButton when other RadioButton is clicked. To do so, I had to play with adding View to ViewGroup, which is determined by getting its desired index of the TableRow.

As shown from the above picture, it should be arranged in grid-like layout with only one radio button selected at any given time. Refer to the codes below:

.xml:

<?xml version="1.0" encoding="utf-8"?>
<com.example.test.RadioButtonWithTableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <TableRow>

        <RadioButton
            android:id="@+id/radio1"
            android:text="Radio 1" />

        <RadioButton
            android:id="@+id/radio3"
            android:text="Radio 3" />
    </TableRow>

    <TableRow>

        <RadioButton
            android:id="@+id/radio2"
            android:text="Radio 2" />

        <RadioButton
            android:id="@+id/radio4"
            android:text="Radio 4" >
        </RadioButton>
    </TableRow>

</com.example.test.RadioButtonWithTableLayout>

.java:

public class RadioButtonWithTableLayout extends TableLayout implements
        OnClickListener {

    private RadioButton mBtnCurrentRadio;

    public RadioButtonWithTableLayout(Context context) {
        super(context);
    }

    public RadioButtonWithTableLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    public void onClick(View v) {
        final RadioButton mBtnRadio = (RadioButton) v;

        // select only one radio button at any given time
        if (mBtnCurrentRadio != null) {
            mBtnCurrentRadio.setChecked(false);
        }
        mBtnRadio.setChecked(true);
        mBtnCurrentRadio = mBtnRadio;
    }

    @Override
    public void addView(View child, int index,
            android.view.ViewGroup.LayoutParams params) {
        super.addView(child, index, params);
        setChildrenOnClickListener((TableRow) child);
    }

    @Override
    public void addView(View child, android.view.ViewGroup.LayoutParams params) {
        super.addView(child, params);
        setChildrenOnClickListener((TableRow) child);
    }

    private void setChildrenOnClickListener(TableRow tr) {
        final int c = tr.getChildCount();
        for (int i = 0; i < c; i++) {
            final View v = tr.getChildAt(i);
            if (v instanceof RadioButton) {
                v.setOnClickListener(this);
            }
        }
    }
}

Source: http://developer.android.com/reference/android/widget/RadioGroup.html http://developer.android.com/reference/android/widget/TableRow.html

edited May 29 '13 at 11:48

answered May 29 '13 at 10:30

melvynkim

1,655
3
25
38

Thanks for the answer. But by doing this, all the `RadioButton`s will be `vertically` aligned. So the requirement which I have asked that I want to make a group as in the Image is not fulfilled. – AnujMathur_07 May 29 '13 at 10:40
@AnujMathur_07 Try setting parent layout of `RadioGroup` as `RelativeLayout` and playing with `android=alignParentBottom=true` or `android=alignParentRight=true` etc. for each `RadioButton`s until you get desired layout. – melvynkim May 29 '13 at 10:43
The `RadioButton`s parent is the `RadioGroup`, so none of those attributes are available. – AnujMathur_07 May 29 '13 at 10:46
@AnujMathur_07 Updated the example in the answer. Please try them, and tell me if you still have problems! – melvynkim May 29 '13 at 10:59
sorry melvkim. It still shows the `RadioButton`s alligned vertically. – AnujMathur_07 May 29 '13 at 11:03
Now for your updated answer. The view is fine, it is how I wanted, but now I can select all the buttons. – AnujMathur_07 May 29 '13 at 11:12
i think you should programatically uncheck all radio buttons if one will be select: button.setChecked(false) & on refresh buttons.clearCheck(); – Deepanker Chaudhary May 29 '13 at 11:43
@AnujMathur_07 Thanks for your wait. I've updated my answer again with `.java` file. I realized you can dynamically inactivate the checked `RadioButton`. – melvynkim May 29 '13 at 11:50
Thanks for the answer, now its working fine, I just want to know that can't this be done in the xml file? – AnujMathur_07 May 30 '13 at 13:25
@AnujMathur_07 I don't think so, and here's the reason. `android.view.ViewGroup`'s subclass (e.g. `RelativeLayout`) inherits XML attributes (e.g. `android:layout_alignParentTop`) only to its direct child[ren], which is `RadioGroup` in our example. And, `RadioGroup` must be a direct parent of `RadioButton` objects to associate them together and to instantiate only one button to be checked at a time. Therefore, using the XML structure you provided (Layout->`RadioGroup`->`RadioButton`), we won't be able to freely position `RadioButton` to produce grid-like layout. – melvynkim Jun 01 '13 at 13:45
As a side note, we frequently have to add properties to the `RadioButton` objects anyway (e.g. to generate `Toast` to interact with user as he/she selects the buttons), we are most likely going to write a class to manage this custom activity. It is perfectly appropriate to create a class file as one of the widgets in our project path and customize it as we wish. – melvynkim Jun 01 '13 at 13:48

RadioGroup with only one selected Item

1 Answers1

Linked