Radio Button layout in Grid - grid

Question

I have created a layout for a simple app which has one question and 4 answers in 4 radio buttons in a grid. I have designed the layout using 2 Radio groups. Please help me to design the same using one radio group. Thanks in advanceThis is what my layout looks like, but I have accomplished this using two radio groups one after another using two radio buttons in each
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.example.android.educationalapp.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/Q1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:text="#string/Q1" />
<RadioGroup
android:id="#+id/R1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/Q1"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<RadioButton
android:id="#+id/A1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="#string/A1" />
<RadioButton
android:id="#+id/B1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="#string/B1" />
</RadioGroup>
<RadioGroup
android:id="#+id/R2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/R1"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<RadioButton
android:id="#+id/C1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="#string/C1" />
<RadioButton
android:id="#+id/D1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="#string/D1" />
</RadioGroup>
<Button
android:id="#+id/S1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/R2"
android:layout_marginTop="4dp"
android:layout_marginRight="4dp"
android:text="Check" />
<View
android:id="#+id/V1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/S1"
android:layout_marginTop="8dp"
android:background="#color/colorPrimaryDark">
</View>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/Q2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:text="#string/Q2" />
<RadioGroup
android:id="#+id/R3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/Q2"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<RadioButton
android:id="#+id/A2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="#string/A2" />
<RadioButton
android:id="#+id/B2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="#string/B2" />
</RadioGroup>
<RadioGroup
android:id="#+id/R4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/R3"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<RadioButton
android:id="#+id/C2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="#string/C2" />
<RadioButton
android:id="#+id/D2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingLeft="4dp"
android:paddingRight="4dp"
android:text="#string/D2" />
</RadioGroup>
<Button
android:id="#+id/S2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#id/R4"
android:layout_marginTop="4dp"
android:text="Check"
android:layout_marginRight="4dp"
android:onClick="onCheckButtonClicked"/>
<View
android:id="#+id/V2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#id/S2"
android:layout_marginTop="8dp"
android:background="#color/colorPrimaryDark">
</View>
</RelativeLayout>
</LinearLayout>
This is how my XML code looks like. All I want is that only one radio button should be selected at a time for each question. I know the code using one radio groups, but for two radio groups I'm unable to figure out. Please advice.

Answer 1

The following approach works for me. It is based on the Udacity MOOC Material Design for Android Developers which contains a demo application named ImmersiveImages that has a group of nine radio buttons arranged in two columns. The code below is a simplified version of this app, generating a grid 1 row x 2 columns. It can easily be extended to a larger grid.
activity_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp"
android:paddingRight="16dp">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CENTER"
android:id="#+id/centerBtn"
android:layout_column="0"
android:layout_row="0" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FIT_END"
android:id="#+id/fitEndBtn"
android:layout_row="0"
android:layout_column="2" />
</GridLayout>
</FrameLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity implements View.OnClickListener
{
RadioButton centerBtn;
RadioButton fitEndBtn;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
centerBtn = (RadioButton) findViewById(R.id.centerBtn);
fitEndBtn = (RadioButton) findViewById(R.id.fitEndBtn);
centerBtn.setOnClickListener(this);
fitEndBtn.setOnClickListener(this);
centerBtn.setChecked(true);
}
/**
* Obtain reference to selected button
* #param view The most recently clicked radio button.
* #return The clicked radio button if different to parameter view.
*/
public RadioButton getSelectedRadio(View view) {
RadioButton[] btns = {centerBtn, fitEndBtn};
for (RadioButton radioButton : btns) {
if (radioButton.isChecked() && radioButton != view) {
return radioButton;
}
}
return null;
}
#Override
public void onClick(View view) {
// Determine if a radio button clicked and implement handler
RadioButton checkedRadio = view instanceof RadioButton ? getSelectedRadio(view) : null;
if (checkedRadio != null) {
// Untick all buttons except currently selected.
if (checkedRadio != view) {
checkedRadio.setChecked(false);
}
String radioId = ((RadioButton) view).getText().toString();
switch (radioId) {
case "CENTER":
Toast.makeText(this, "Button CENTER selected", Toast.LENGTH_SHORT).show();
break;
case "FIT_END":
Toast.makeText(this, "Button FIT_END selected", Toast.LENGTH_SHORT).show();
break;
}
}
else {
// Other view handlers
}
}
}
For reference, the app is available to download from here: https://github.com/usplitu/android_grid_radio_buttons