3

I'm creating a feedback input form which takes user selection from radio buttons just like below image.

Desired Output

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)

Obtained output

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.

Manikanta
  • 3,421
  • 4
  • 30
  • 51
  • You can simply make a common function for all the radio boxes to uncheck. When user clicks on any radio button first uncheck all the other radio buttons by common function then use setChecked on the user's clicked one :) simple – Rahul Khurana Nov 01 '16 at 06:04
  • Then all radio buttons in other rows will be unchecked.. If i need to implement your solution i need to keep a Map of list of radio buttons and perform that operation which i think is not an efficient way... – Manikanta Nov 01 '16 at 06:06
  • dear @Manikanta you can maintain a common function for each row as well – Rahul Khurana Nov 01 '16 at 06:07
  • dear @RahulKhurana i feel that is a naive approach.... – Manikanta Nov 01 '16 at 06:08
  • Then for that you can use RadioGroup which you don't want to use – Rahul Khurana Nov 01 '16 at 06:10
  • I'm very much fine with using radiogroup, but the radio buttons are not aligning properly with labels of first row. The main problem here is that gravity center for radio button is not working for radiobutton. – Manikanta Nov 01 '16 at 06:13
  • So what do you want ?? Can we use any kind of magic wand ? Just make your condition clear in your mind firstly – Rahul Khurana Nov 01 '16 at 06:14
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/127079/discussion-between-manikanta-and-rahul-khurana). – Manikanta Nov 01 '16 at 06:15
  • Here is my similar questions answer. Please refer the link. https://stackoverflow.com/a/48395521/9255006 – Zankrut Parmar Jan 23 '18 at 06:34

2 Answers2

0

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);
        }
    }
};
Amit Bhati
  • 1,405
  • 12
  • 20
  • OMG, I have 8 questions each question with 8 radio buttons. then with your solution i end up writing lot of redundant code.. – Manikanta Nov 01 '16 at 05:53
  • If you don't use radio group then this will the alternate solution. Also you can create 8 object for checkChangeListner for 8 questions. which will reduce your code, i'll update my answer for you – Amit Bhati Nov 01 '16 at 05:56
  • I'm fine with using radio group. but how do i tackle the alignment – Manikanta Nov 01 '16 at 06:04
  • @Manikanta i updated my answer now it will help you in writing less code – Amit Bhati Nov 01 '16 at 06:24
0

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

Rehan
  • 3,270
  • 5
  • 31
  • 30