Weird Radio Buttons Behavior In Multiple Layouts

Question

I have a layout with three images and three radio buttons below each image. I want that if one button is checked, then I know the user has selected the above image. Here's my layout file:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:gravity="center_horizontal">

        <LinearLayout
            android:id="@+id/frontRadioLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/frontShotIV"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@drawable/border_image_bkg"
                android:src="@drawable/ic_hair_tools"
                android:scaleType="centerCrop"/>

            <RadioButton
                android:id="@+id/radioFrontImg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/sideRadioLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_toRightOf="@id/frontRadioLayout"
            android:layout_marginLeft="16dp">

            <ImageView
                android:id="@+id/sideShotIV"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@drawable/border_image_bkg"
                android:src="@drawable/ic_hair_tools"
                android:scaleType="centerCrop"/>

            <RadioButton
                android:id="@+id/radioSideImg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

        <LinearLayout
            android:id="@+id/backRadioLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_toRightOf="@id/sideRadioLayout"
            android:layout_marginLeft="16dp">

            <ImageView
                android:id="@+id/backShotIV"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:background="@drawable/border_image_bkg"
                android:src="@drawable/ic_hair_tools"
                android:scaleType="centerCrop"/>

            <RadioButton
                android:id="@+id/radioBackImg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"/>

        </LinearLayout>

    </RelativeLayout>

The layout is rendered properly but this behavior occurs while testing - all the buttons get checked and can't be unchecked. I have tried simplifying my layout to this:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="10dp"
        android:gravity="center_horizontal">

        <ImageView
            android:id="@+id/frontShotIV"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/border_image_bkg"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_hair_tools" />

        <RadioButton
            android:id="@+id/radioFrontImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/frontShotIV"
            android:gravity="center_horizontal"
            android:layout_marginLeft="33dp"/>

        <ImageView
            android:id="@+id/sideShotIV"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/border_image_bkg"
            android:scaleType="centerCrop"
            android:src="@drawable/ic_hair_tools"
            android:layout_toRightOf="@+id/frontShotIV"
            android:layout_marginLeft="16dp"/>

        <RadioButton
            android:id="@+id/radioSideImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/frontShotIV"
            android:gravity="center_horizontal"
            android:layout_toRightOf="@+id/frontShotIV"
            android:layout_marginLeft="46dp"/>

        <ImageView
            android:id="@+id/backShotIV"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/border_image_bkg"
            android:src="@drawable/ic_hair_tools"
            android:scaleType="centerCrop"
            android:layout_toRightOf="@+id/sideShotIV"
            android:layout_marginLeft="16dp"/>

        <RadioButton
            android:id="@+id/radioBackImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/backShotIV"
            android:layout_toRightOf="@+id/sideShotIV"
            android:layout_marginLeft="46dp"/>

    </RelativeLayout>

but it stills yields the same checked all behavior. Can anyone help me in rectifying this issue with the layout radio buttons to check individually and uncheck when another one is selected? Thanks.

My concern is not with Java code as radiobuttons click by default in layout. Kindly test with that layout and observe. Thanks — Andromeda, May 09 '18 at 13:36

Barns · Answer 1 · 2018-05-09T14:35:48.630

You need to put the RadioButtons in a RadioGroup. Example:

 <RadioGroup
       android:id="@+id/radioGroup1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" >
       <RadioButton
            android:id="@+id/radioFrontImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/frontShotIV"
            android:gravity="center_horizontal"
            android:layout_marginLeft="33dp"/>
 </RadioGroup>

From the Google Docs:

However, because radio buttons are mutually exclusive, you must group them together inside a RadioGroup. By grouping them together, the system ensures that only one radio button can be selected at a time.

Alternatively you can use a CheckBox

Have a look at the original documentation for more information:

https://developer.android.com/guide/topics/ui/controls/radiobutton?authuser=0

Rozina · Answer 2 · 2018-05-10T06:01:47.057

If I have understood your requirement correctly. You want to allow user to select only one image out of three right.

Then you must go for RadioButton with RadioGroup

Because using radio group you can easily identify which image is selected. And radio group will allow user to select only one option at a time.

You can follow this example and try it. activity.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Main4Activity">

<LinearLayout
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/frontShotIV"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/colorAccentLight"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_background" />

    <ImageView
        android:id="@+id/sideShotIV"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="16dp"
        android:background="@color/colorAccentLight"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_background" />

    <ImageView
        android:id="@+id/backShotIV"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="16dp"
        android:background="@color/colorAccentLight"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_launcher_background" />
</LinearLayout>


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/layout">

    <RadioGroup
        android:id="@+id/radiogroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/radioFrontImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/frontShotIV"
            android:layout_marginLeft="60dp"
            android:gravity="center_horizontal" />


        <RadioButton
            android:id="@+id/radioSideImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/frontShotIV"
            android:layout_marginLeft="90dp"
            android:layout_toRightOf="@+id/frontShotIV"
            android:gravity="center_horizontal" />


        <RadioButton
            android:id="@+id/radioBackImg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/backShotIV"
            android:layout_marginLeft="80dp"
            android:layout_marginTop="4dp" />
    </RadioGroup>
</LinearLayout>

<Button
    android:id="@+id/btnCheck"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="166dp"
    android:text="Check selected Image"/></RelativeLayout>

Activity.java:

public class Main4Activity extends AppCompatActivity {

private RadioGroup radiogroup;
private RadioButton radioFrontImg;
private RadioButton radioSideImg;
private RadioButton radioBackImg;
private RadioButton radioButton;
private Button btnCheck;
private String selectedImage;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main4);

    init();

}

private void init() {
    radiogroup = findViewById(R.id.radiogroup);
    radioFrontImg = findViewById(R.id.radioFrontImg);
    radioSideImg = findViewById(R.id.radioSideImg);
    radioBackImg = findViewById(R.id.radioBackImg);
    btnCheck = findViewById(R.id.btnCheck);
    btnCheck.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            method1();
            method2();
        }
    });
}

private void method2() {
    if (radioFrontImg.isChecked()) {
        selectedImage = "frontShotIV";
    } else if (radioSideImg.isChecked()) {
        selectedImage = "sideShotIV";
    } else if (radioBackImg.isChecked()) {
        selectedImage = "backShotIV";
    }
    Toast.makeText(getApplicationContext(), selectedImage, Toast.LENGTH_LONG).show();
    Log.e("selectedImage", selectedImage);

}

private void method1() {
    int selectedId = radiogroup.getCheckedRadioButtonId();
    radioButton = (RadioButton) findViewById(selectedId);
    if (selectedId == R.id.radioFrontImg)
        selectedImage = "frontShotIV";
  else if (selectedId == R.id.radioSideImg)
        selectedImage = "sideShotIV";
  else if (selectedId == R.id.radioBackImg)
        selectedImage = "backShotIV";
    Toast.makeText(Main4Activity.this, selectedImage, Toast.LENGTH_SHORT).show();
    Log.e("selectedImage",selectedImage);
}

}

There are two methods you can use either of them.

I should maintain the layout and instead wrap each button inside a group? — Andromeda, May 09 '18 at 14:15

Weird Radio Buttons Behavior In Multiple Layouts

2 Answers2