Android: Radio button alignment 2 x 2 in one radiogroup

Question

I have 4 radio buttons and i can only align them vertically and horizontally alignment like this:

A B C D

and

A
B
C
D

but I want is this kind alignment:

A B
C D

is there any possible way to do this?, I can't find any right tutorials or examples.

Check this http://stackoverflow.com/a/2383978/4494555 – Jas Jan 29 '16 at 10:34 — Jas, Jan 29 '16 at 10:34

score 5 · Accepted Answer · answered Jan 29 '16 at 10:31

Use LinearLayout within Radiogroup Like this:

<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/radioGroup">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RadioButton
            android:id="@+id/radioButton2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New RadioButton"

            android:layout_marginLeft="5dp"/>

        <RadioButton
            android:id="@+id/radioButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New RadioButton"

            android:layout_marginRight="5dp"    />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RadioButton
            android:id="@+id/radioButton4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New RadioButton"

            android:layout_marginLeft="5dp"/>

        <RadioButton
            android:id="@+id/radioButton3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New RadioButton"

            android:layout_marginRight="5dp"/>
    </LinearLayout>
</RadioGroup>

it work thanks!, I try to do gridview but i think this make more easier. tnx — Drenyl, Jan 29 '16 at 10:58
use individual radio buttons and then programmically control there on/off states. — Gagan Sethi, Jan 29 '16 at 12:35
i can only get one radiobtn ID `int radioButtonId = r1.getId(); RadioButton selectedans = (RadioButton) findViewById(radioButtonId); String selectedansText = selectedans.getText().toString();` — Drenyl, Jan 29 '16 at 12:49
i did this way but can not select only one radio button .. it allow to select multiple radio buttons that is violate policy of radio group — Ajay Mistry, Aug 22 '19 at 12:41

score 1 · Answer 2 · answered Jan 29 '16 at 10:25

1

RadioGroup extends android.widget.LinearLayout so it is not possible. If you want them in a grid use the appropriate layout but you have to do the whole logic of selecting only one item and so on on your own

answered Jan 29 '16 at 10:25

and_dev

3,723
1
20
28

score 1 · Answer 3 · answered Jan 29 '16 at 10:27

1

You use GridLayout can help .

answered Jan 29 '16 at 10:27

Phuoc Huynh

692
4
7

can you elaborate more about it sir?, or exampls – Drenyl Jan 29 '16 at 10:30

score 1 · Answer 4 · edited May 23 '17 at 11:59

RadioGroup Extends LinearLayout so it is not possible to align RadioButton in grid below is the solution that I have implemented from another answer have a look at this

package com.devprovider.customview;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.RadioButton;
import android.widget.TableLayout;
import android.widget.TableRow;


public class ToggleButtonGroupTableLayout extends TableLayout  implements OnClickListener {

    private static final String TAG = "ToggleButtonGroupTableLayout";
    private RadioButton activeRadioButton;

    /** 
     * @param context
     */
    public ToggleButtonGroupTableLayout(Context context) {
        super(context);

    }

    /**
     * @param context
     * @param attrs
     */
    public ToggleButtonGroupTableLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

    }

    @Override
    public void onClick(View v) {
        final RadioButton rb = (RadioButton) v;
        if ( activeRadioButton != null ) {
            activeRadioButton.setChecked(false);
        }
        rb.setChecked(true);
        activeRadioButton = rb;
    }


    @Override
    public void addView(View child, int index,
            android.view.ViewGroup.LayoutParams params) {
        super.addView(child, index, params);
        setChildrenOnClickListener((TableRow)child);
    }



    @Override
    public void addView(View child, android.view.ViewGroup.LayoutParams params) {
        super.addView(child, params);
        setChildrenOnClickListener((TableRow)child);
    }


    private void setChildrenOnClickListener(TableRow tr) {
        final int c = tr.getChildCount();
        for (int i=0; i < c; i++) {
            final View v = tr.getChildAt(i);
            if ( v instanceof RadioButton ) {
                v.setOnClickListener(this);
            }
        }
    }

    public int getCheckedRadioButtonId() {
        if ( activeRadioButton != null ) {
            return activeRadioButton.getId();
        }

        return -1;
    }
}

your layout would be like this

<?xml version="1.0" encoding="utf-8"?>
<com.devprovider.customview.ToggleButtonGroupTableLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:id="@+id/radGroup1">
    <TableRow>
            <RadioButton android:id="@+id/rad1" android:text="Button1"
                android:layout_width="105px" android:layout_height="wrap_content"
                android:textSize="13px" />
            <RadioButton android:id="@+id/rad2" android:text="Button2"
                android:layout_width="105px" android:textSize="13px"
                android:layout_height="wrap_content" />

    </TableRow>
    <TableRow>
            <RadioButton android:id="@+id/rad1" android:text="Button1"
                android:layout_width="105px" android:layout_height="wrap_content"
                android:textSize="13px" />
            <RadioButton android:id="@+id/rad2" android:text="Button2"
                android:layout_width="105px" android:textSize="13px"
                android:layout_height="wrap_content" />

    </TableRow>
    <TableRow>
            <RadioButton android:id="@+id/rad1" android:text="Button1"
                android:layout_width="105px" android:layout_height="wrap_content"
                android:textSize="13px" />
            <RadioButton android:id="@+id/rad2" android:text="Button2"
                android:layout_width="105px" android:textSize="13px"
                android:layout_height="wrap_content" />

    </TableRow>
</com.devprovider.customview.ToggleButtonGroupTableLayout>

Thanks to this answer Grid of Radio Button

Android: Radio button alignment 2 x 2 in one radiogroup

4 Answers4