Multiple row Radio buttons in android?

Question

I am having problem in having radioButtons in multiple Rows

this is my xml

           <RadioGroup android:layout_width="fill_parent"
               android:layout_height="wrap_content"
                android:orientation="vertical"
                 >
  <RadioGroup android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
         >
      <RadioButton
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:id="@+id/radio_one0Id"
          android:textSize="13sp"
          android:layout_weight="1"
          android:onClick="oneRadioButtonClicked"
       />
      <RadioButton
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
            android:textSize="13sp"
          android:text="5%" 
          android:id="@+id/radio_one5Id"
          android:layout_weight="1"
          android:onClick="oneRadioButtonClicked"
         />
      <RadioButton
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="10%" 
          android:textSize="13sp"
          android:layout_weight="1"
          android:id="@+id/radio_one10Id"
          android:onClick="oneRadioButtonClicked"
       />
      <RadioButton
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="20%" 
          android:layout_weight="1"
          android:textSize="13sp"
          android:onClick="oneRadioButtonClicked"
          android:id="@+id/radio_one20Id"
         />
      <RadioButton
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="35%" 
          android:id="@+id/radio_one35Id"
          android:textSize="13sp"
          android:onClick="oneRadioButtonClicked"
          android:layout_weight="1"
       />
      <RadioButton
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="50%" 
          android:textSize="13sp"
          android:id="@+id/radio_one50Id"
          android:onClick="oneRadioButtonClicked"
          android:layout_weight="1"
         />

      </RadioGroup>

        <RadioGroup android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
         <RadioButton
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="65%" 
          android:textSize="13sp"
          android:id="@+id/radio_one65Id"
          android:onClick="oneRadioButtonClicked"
          android:layout_weight="1"
       />
      <RadioButton
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="75%" 
          android:textSize="13sp"
          android:layout_weight="1"
          android:id="@+id/radio_one75Id"
          android:onClick="oneRadioButtonClicked"
         />
       <RadioButton
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="85%" 
          android:textSize="13sp"
          android:id="@+id/radio_one85Id"
          android:layout_weight="1"
          android:onClick="oneRadioButtonClicked"
         />
        <RadioButton
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
         android:textSize="13sp"
          android:text="95%" 
          android:id="@+id/radio_one95Id"
          android:layout_weight="1"
          android:onClick="oneRadioButtonClicked"
         />
         <RadioButton
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:text="100%" 
          android:id="@+id/radio_one100Id"
          android:textSize="13sp"
          android:layout_weight="1"
          android:onClick="oneRadioButtonClicked"
         />
                       </RadioGroup>
      </RadioGroup>

this is code

public void oneRadioButtonClicked(View view) {
    // Is the button now checked?
    boolean checked = ((RadioButton) view).isChecked();

    switch(view.getId()) {
        case R.id.radio_one0Id:
            if (checked)
                one = "0";
            break;
        case R.id.radio_one5Id:
            if (checked)
                one = "5";
            break;
        case R.id.radio_one10Id:
            if (checked)
                one = "10";
            break;
        case R.id.radio_one20Id:
            if (checked)
                one = "20";
            break;
        case R.id.radio_one35Id:
            if (checked)
                one = "35";
            break;
        case R.id.radio_one50Id:
            if (checked)
                one = "50";
            break;
        case R.id.radio_one65Id:
            if (checked)
                one = "65";
            break;
        case R.id.radio_one75Id:
            if (checked)
                one = "75";
            break;
        case R.id.radio_one85Id:
            if (checked)
                one = "85";
            break;
        case R.id.radio_one95Id:
            if (checked)
                one = "95";
            break;
        case R.id.radio_one100Id:
            if (checked)
                one = "100";
            break;
         default:
             System.out.println("default");
    }
}

this will look like

it will select both the buttons in 2 rows, i want it to select only one button in those rows, thanks for any help

Eager

#10426069 – Simonasimonds

Answer 1

Put one radiogroup with vertical orientation and add two LinearLayouts:

           <RadioGroup android:layout_width="fill_parent"
               android:layout_height="wrap_content"
               android:orientation="vertical"
              >

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1" >

      <RadioButton
          android:id="@+id/radio_one0Id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="oneRadioButtonClicked"
          android:textSize="13sp" />

      <RadioButton
          android:id="@+id/radio_one5Id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="oneRadioButtonClicked"
          android:text="5%"
          android:textSize="13sp" />

      <RadioButton
          android:id="@+id/radio_one10Id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="oneRadioButtonClicked"
          android:text="10%"
          android:textSize="13sp" />

      <RadioButton
          android:id="@+id/radio_one20Id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="oneRadioButtonClicked"
          android:text="20%"
          android:textSize="13sp" />

      <RadioButton
          android:id="@+id/radio_one35Id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="oneRadioButtonClicked"
          android:text="35%"
          android:textSize="13sp" />

      <RadioButton
          android:id="@+id/radio_one50Id"
          android:layout_width="fill_parent"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:onClick="oneRadioButtonClicked"
          android:text="50%"
          android:textSize="13sp" />

  </LinearLayout>

     <LinearLayout
         android:layout_width="wrap_content"
         android:layout_height="match_parent"
         android:layout_weight="1"
         android:orientation="horizontal" >

         <RadioButton
             android:id="@+id/radio_one65Id"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:onClick="oneRadioButtonClicked"
             android:text="65%"
             android:textSize="13sp" />

         <RadioButton
             android:id="@+id/radio_one75Id"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:onClick="oneRadioButtonClicked"
             android:text="75%"
             android:textSize="13sp" />

         <RadioButton
             android:id="@+id/radio_one85Id"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:onClick="oneRadioButtonClicked"
             android:text="85%"
             android:textSize="13sp" />

         <RadioButton
             android:id="@+id/radio_one95Id"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:onClick="oneRadioButtonClicked"
             android:text="95%"
             android:textSize="13sp" />

         <RadioButton
             android:id="@+id/radio_one100Id"
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:onClick="oneRadioButtonClicked"
             android:text="100%"
             android:textSize="13sp" />

     </LinearLayout>

  </RadioGroup>

Stillbirth

perfect and simple solution – Hett

This solution doesn't solve one of the requirements in the original post, which is that it should only select one button from any of the rows at a time: "it will select both the buttons in 2 rows, i want it to select only one button in those rows".RadioButtons must be direct children of the RadioGroup in order to be treated as part of that group. – Esquimau

It's not working. Please check below answer That should be accepted. – Plethoric

I'm using recycler view where item is RadioButton and when one item selected I deselect previous RadioButton – Germanism

Answer 2

From searching around, there doesn't appear to be a way of doing it, This means you will have to implement this layout behaviour manually. Two possible options are:

1. Create a copy of RadioGroup to extend a different layout, or at least allow you control it dynamically.

2. Implement your own custom layout to replace RadioGroup that extends a layout of your choice, and implements OnClickListener. There's a good example How to group a 3x3 grid of radio buttons?.

Estevez

Answer 3

I was researching this a lot, and I finally found a solution. If you want to have something like this:

First you need to download/create a new class like this: link, since RadioGroup uses LinearLayout by default. Now you have a RadioGroup that uses RelativeLayout. The only thing left is to separate radio buttons by percentage (just like with weightSum, it's just that you don't have weightSum in RelativeLayout, only LinearLayout) by using a neat little hack:

<rs.cdl.attendance.UI.RelativeRadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp">

    <View
        android:id="@+id/strut"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerHorizontal="true" />

    <RadioButton
        android:id="@+id/start_radio_button"
        android:layout_alignRight="@id/strut"
        android:layout_alignParentLeft="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Start" />

    <RadioButton
        android:id="@+id/finish_radio_button"
        android:layout_alignLeft="@id/strut"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Finish" />

    <RadioButton
        android:id="@+id/pause_radio_button"
        android:layout_alignRight="@id/strut"
        android:layout_alignParentLeft="true"
        android:layout_below="@id/start_radio_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Pause" />

    <RadioButton
        android:id="@+id/continue_radio_button"
        android:layout_alignLeft="@id/strut"
        android:layout_alignParentRight="true"
        android:layout_below="@id/finish_radio_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Continue" />

</rs.cdl.attendance.UI.RelativeRadioGroup>

Droop

one of the best answer in this page . +1 for the link – Barbarize

Answer 4

This worked for me. The first line (NameRadioGroupe2.clearCheck();) clear the other Radiogroup, and the second line add a checkmark in the button that was checked

public void oneRadioButtonClicked(View view) {
// Is the button now checked?
boolean checked = ((RadioButton) view).isChecked();

switch(view.getId()) {
    case R.id.radio_one0Id: {  
        one = "0";      
        NameRadioGroupe2.clearCheck();
        NameRadioGroupe1.check(view.getId());
        break;
    }
            break;
    case R.id.radio_one5Id: {
        NameRadioGroupe2.clearCheck();
        NameRadioGroupe1.check(view.getId());          
        one = "5";
        break;
        }
        .
        .
        .
        .
        .
               case R.id.radio_one65Id: {
        NameRadioGroupe1.clearCheck();
        NameRadioGroupe2.check(view.getId());          
        one = "65";
        break;
        }
    case R.id.radio_one75Id: {
        NameRadioGroupe1.clearCheck();
        NameRadioGroupe2.check(view.getId());          
        one = "75";
        break;
        }
        .
        .
        .
        .
        .

Superscribe

Answer 5

I was trying to work out the same thing.

What I ended up doing was adding multiple RadioGroups within their own LinearLayouts. When selecting a radiobutton from the other RadioGroup to the one that is currently selected to ensure that the first RadioGroup buttons were no longer selected I added .Checked = false to the radiobuttons .Click function. And then because I experienced bugs at first where sometimes the newly clicked radio button wouldnt check, I added a .Checked = true to the actual radio button.

My XML

<LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="3"
            android:padding="10dp">
            <RadioGroup
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:weightSum="3"
                style="@style/radios"
                android:orientation="horizontal">
                <RadioButton
                    android:id="@+id/rad1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    style="@style/radios"
                    android:text="1"
                    android:checked="true" />
                <RadioButton
                    android:id="@+id/rad2"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    style="@style/radios"
                    android:text="2" />
                <RadioButton
                    android:id="@+id/rad3"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    style="@style/radios"
                    android:text="3" />
            </RadioGroup>
        </LinearLayout>
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:weightSum="3"
            android:padding="10dp">
            <RadioGroup
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:weightSum="3"
                style="@style/radios"
                android:orientation="horizontal">
                <RadioButton
                    android:id="@+id/rad4"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    style="@style/radios"
                    android:text="4" />
                <RadioButton
                    android:id="@+id/rad5"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    style="@style/radios"
                    android:text="5" />
            </RadioGroup>
        </LinearLayout>

And then my C#

            var radio1 = FindViewById<RadioButton>(Resource.Id.rad1);
            var radio2 = FindViewById<RadioButton>(Resource.Id.rad2);
            var radio3 = FindViewById<RadioButton>(Resource.Id.rad3);
            var radio4 = FindViewById<RadioButton>(Resource.Id.rad4);
            var radio5 = FindViewById<RadioButton>(Resource.Id.rad5);

            radio1.Click += delegate
            {
                radio2.Checked = false;
                radio3.Checked = false;
                radio4.Checked = false;
                radio5.Checked = false;
                radio1.Checked = true;
            };

            radio2.Click += delegate
            {
                radio1.Checked = false;
                radio3.Checked = false;
                radio4.Checked = false;
                radio5.Checked = false;
                radio2.Checked = true;
            };

            radio3.Click += delegate
            {
                radio1.Checked = false;
                radio2.Checked = false;
                radio4.Checked = false;
                radio5.Checked = false;
                radio3.Checked = true;
            };

            radio4.Click += delegate
            {
                radio1.Checked = false;
                radio2.Checked = false;
                radio3.Checked = false;
                radio5.Checked = false;
                radio4.Checked = true;
            };

            radio5.Click += delegate
            {
                radio1.Checked = false;
                radio2.Checked = false;
                radio3.Checked = false;
                radio4.Checked = false;
                radio5.Checked = true;
            };

Primative, but it worked for me.

Snider

Answer 6

One simple way to make multiple lines of radio buttons is to use MultiLineRadioGroup library. It supports as many rows and columns as you like.

The use is simple: In your project's build.gradle file add:

allprojects {
    repositories {
        ...
        maven { 
            url "https://jitpack.io"
        }
        ...
    }
}

In your Application's or Module's build.gradle file add:

dependencies {
    ...
    compile 'com.github.Gavras:MultiLineRadioGroup:v1.0.0.6'
    ...
}

You can use a string array resource in the xml to create your view like that:

In the layout's XML add:

<com.whygraphics.multilineradiogroup.MultiLineRadioGroup xmlns:multi_line_radio_group="http://schemas.android.com/apk/res-auto"
        android:id="@+id/main_activity_multi_line_radio_group"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        multi_line_radio_group:default_button="button_2"
        multi_line_radio_group:max_in_row="3"
        multi_line_radio_group:radio_buttons="@array/radio_buttons" />

and in arrays.xml add:

<string-array name="radio_buttons">
        <item>button_1</item>
        <item>button_2</item>
        <item>button_3</item>
        <item>button_4</item>
        <item>button_5</item>
</string-array>

or add them programmatically:

mMultiLineRadioGroup.addButtons("button to add 1", "button to add 2", "button to add 3");

Moussaka

This also, like others I have tried, does not wrap. You fix the number of buttons using max_in_row. This is only good for if you want to decide number of lines manually. It does not wrap automatically like Flexbox. – Ineradicable