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

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

Please help me...

Solution

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

Comments

[AnujMathur_07]

Thanks for the answer. But by doing this, all the RadioButtons 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.

[melvynkim]

@AnujMathur_07 Try setting parent layout of RadioGroup as RelativeLayout and playing with android=alignParentBottom=true or android=alignParentRight=true etc. for each RadioButtons until you get desired layout.

[AnujMathur_07]

The RadioButtons parent is the RadioGroup, so none of those attributes are available.

[melvynkim]

@AnujMathur_07 Updated the example in the answer. Please try them, and tell me if you still have problems!

[AnujMathur_07]

sorry melvkim. It still shows the RadioButtons alligned vertically.

[AnujMathur_07]

Now for your updated answer. The view is fine, it is how I wanted, but now I can select all the buttons.

[Deepanker Chaudhary]

i think you should programatically uncheck all radio buttons if one will be select: button.setChecked(false) & on refresh buttons.clearCheck();

[melvynkim]

@AnujMathur_07 Thanks for your wait. I've updated my answer again with .java file. I realized you can dynamically inactivate the checked RadioButton.

[AnujMathur_07]

Thanks for the answer, now its working fine, I just want to know that can't this be done in the xml file?

[melvynkim]

@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]

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.