I'm creating a feedback input form which takes user selection from radio buttons just like below image.
So i took a table layout and added table rows with textviews of fixed width in first row and a textview with radio buttons of fixed width for the remaining rows
Here is the layout code:
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableLayout
android:showDividers="middle"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TableRow>
<TextView
android:id="@+id/name"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text=""/>
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Excellent"/>
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Very Good"/>
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Good"/>
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Okay"/>
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Bad"/>
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Very Bad"/>
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="Worst"/>
</TableRow>
<TableRow>
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Food Quality"/>
<RadioButton
android:layout_width="100dp"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Food Quality"/>
<RadioButton
android:layout_width="100dp"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
</TableRow>
<TableRow>
<TextView
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Food Quality"/>
<RadioButton
android:layout_width="100dp"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
<RadioButton
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_gravity="center_horizontal"
android:layout_height="wrap_content" />
</TableRow>
</TableLayout>
</HorizontalScrollView>
Which gives me an output like this(horizontally scrollable)
The Problem is
As i have added only radio buttons without an radiogroup user is able to select all the radio buttons in a single row which shouldn't happen.
If i add the radiogroup, the radio buttons are not aligning properly with textviews(labels) of the first row.
Can anyone help me.
You can simply solve this issue with implementing OnCheckedChangeListener
try below code it will work for you-
rb1 = (RadioButton) findViewById(R.id.rb1);
rb1.setOnCheckedChangeListener(quest1);
rb2 = (RadioButton) findViewById(R.id.rb1);
rb2.setOnCheckedChangeListener(quest1);
rb3 = (RadioButton) findViewById(R.id.rb1);
rb3.setOnCheckedChangeListener(quest2);
rb4 = (RadioButton) findViewById(R.id.rb1);
rb4.setOnCheckedChangeListener(quest2);
CompoundButton.OnCheckedChangeListener quest1 = new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
switch (buttonView.getId()) {
case R.id.rb1:
rb2.setChecked(false);
break;
case R.id.rb2:
rb1.setChecked(false);
}
}
};
CompoundButton.OnCheckedChangeListener ques2= new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
switch (buttonView.getId()) {
case R.id.rb3:
rb4.setChecked(false);
break;
case R.id.rb4:
rb3.setChecked(false);
}
}
};
Sometimes when you cannot compromise on design, you have to compromise on efficiency. You can achieve this by adding a simple common OnCheckedChangeListener to all radio buttons.
public CompoundButton.OnCheckedChangeListener onCheckedChangeListener = new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
// As all radio buttons have this listener added,
// add this check to avoid repetitive execution of code and avoid ripples
if (isChecked) {
View parent = (View) buttonView.getParent();
RadioButton lastCheckedRadioButton = (RadioButton) parent.getTag();
if (lastCheckedRadioButton != null) {
lastCheckedRadioButton.setChecked(false);
}
parent.setTag(buttonView);
}
}
};
What is the worst part?
It's when you add listener to all radio buttons.
If you can think of more efficient way, use your own solution, else, use this snippet to add listeners to all radio buttons (based on your layout sample).
TableLayout tableLayout = (TableLayout) findViewById(R.id.tableLayout);
View child;
TableRow tableRow;
// As the first line is headings, skip the first row
for (int i = 1; i < tableLayout.getChildCount(); i++) {
child = tableLayout.getChildAt(i);
if (child instanceof TableRow) {
tableRow = (TableRow) child;
// As the first line has labels, skip the first column
for (int j = 1; j < tableRow.getChildCount(); j++) {
child = tableRow.getChildAt(j);
if (child instanceof RadioButton) {
((RadioButton) child).setOnCheckedChangeListener(onCheckedChangeListener);
}
}
}
}
NOTE: If you have used setTag method for some other purpose, you can use setTag(R.id.radioButton) and getTag(R.id.radioButton) to achieve the result
来源：https://stackoverflow.com/questions/40354562/tablelayout-of-radiogroups-with-respective-labels-aligned-in-android