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...

Answer 1

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