CODEWITHSUNDEEP
androidxmlattributesradio-buttonradio-group
Gert-Jan Schaap
Gert-Jan Schaap

Reputation: 63

How do I arrange RadioButtons?

I have 4 RadioButtons in a RadioGroup, like this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/button1"
            android:text="Button 1"/>

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/button2"
            android:text="Button 2"/>

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/button3"
            android:text="Button 3"/>

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/button4"
            android:text="Button 4"/>

    </RadioGroup>

</RelativeLayout>

I want RadioButton 2 to be right of RadioButton 1, I want RadioButton 3 to be below of RadioButton 1 and I want RadioButton 4 to be right of RadioButton 3.

The normal attributes like 

android:layout_below=""

and

android:layout_toRightOf""

don't work for RadioButtons. How can I place the RadioButtons the way described above in XML here?

Upvotes: 2

Views: 1066

Answers (4)

Gowthaman M
Gowthaman M

Reputation: 8272

Try this following code,

    <RadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

          <LinearLayout
             android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:oriendtation="horizontal"/>

  <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/button1"
            android:text="Button 1"/>

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/button2"
            android:text="Button 2"/>


 </LinearLayout>



    <LinearLayout
             android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:oriendtation="horizontal"/>


        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/button3"
            android:text="Button 3"/>

        <RadioButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/button4"
            android:text="Button 4"/>


 </LinearLayout>

I hope this may help you.

Upvotes: 0

Barno
Barno

Reputation: 786

I will suggest you not to increase View Hierarchy by using nested Nested Layout (Linear/Relative) inside a RadioGroup. Also you will not get single selection feature using Nested Layout. RadioGroup actually extends LinearLayout. So it has only the capability of arranging RadioButtons either Vertically or Horizontally. Here I shared the link RelativeRadioGroup of my Library which is actually a RelativeRadioGroup so that you can arrange RadioButtons as you wish.

Upvotes: 1

Ferdous Ahamed
Ferdous Ahamed

Reputation: 21736

SOLUTION 1: Using LinearLayout:

  1. Add LinearLayout as a direct child of RadioGroup and give it vertical orientation using android:orientation="vertical".
  2. Add another two LinearLayout inside above LinearLayout with android:orientation="horizontal" and android:weightSum="2".
  3. Put button1 and button2 into first horizontal LinearLayout and put button3 and button4 into second horizontal LinearLayout.
  4. Give all 4 buttons weight 1 by using attribute android:layout_weight="1".

Try this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:weightSum="2">

                <RadioButton
                    android:id="@+id/button1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Button 1"/>

                <RadioButton
                    android:id="@+id/button2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Button 2"/>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:weightSum="2">

                <RadioButton
                    android:id="@+id/button3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Button 3"/>

                <RadioButton
                    android:id="@+id/button4"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Button 4"/>
            </LinearLayout>

        </LinearLayout>
    </RadioGroup>

</RelativeLayout>

OUTPUT:

enter image description here

SOLUTION 2: Using RelativeLayout:

  1. Add RelativeLayout as a direct child of RadioGroup and put all the RadioButton inside this RelativeLayout.
  2. Add attribute android:layout_toRightOf="@id/button1" to button2 to show it right of button1.
  3. Add attribute android:layout_below="@id/button1" to button3 to show it below of button1.
  4. Add attribute android:layout_toRightOf="@id/button3" and android:layout_alignBottom="@id/button3" to button4 to show it right of button3.

Try ths:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RadioButton
                android:id="@+id/button1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Button 1"/>

            <RadioButton
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/button1"
                android:text="Button 2"/>

            <RadioButton
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/button1"
                android:text="Button 3"/>

            <RadioButton
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/button3"
                android:layout_alignBottom="@id/button3"
                android:text="Button 4"/>

        </RelativeLayout>
    </RadioGroup>

</RelativeLayout>

OUTPUT:

enter image description here

FYI, You can use padding or margin between buttons as per your needs.

Hope this will help~

Upvotes: 1

Nitesh Rathod
Nitesh Rathod

Reputation: 366

you can try this

<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
tools:ignore="NewApi">



<RadioGroup
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">


        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button1"
            android:text="Button 1"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button2"
            android:text="Button 2"
            android:layout_toRightOf="@+id/button1"/>
    </RelativeLayout>


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">


        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button3"
            android:text="Button 3"/>

        <RadioButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button4"
            android:text="Button 4"
            android:layout_toRightOf="@+id/button3"/>
    </RelativeLayout>

</RadioGroup>

Upvotes: 0

Related Questions