androidradio-buttonradio-groupcellspacing

How to evenly space out radiobuttons in Android?


I have three radiobuttons and I want to evenly space them across the screen. When I use android:layout_weight="1", the buttons are stretched out across the screen. So how would I have the same amount of space in between each of them that also scales on different screen sizes?

<RadioGroup 
        android:id="@+id/auton_bar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="10dp"
        android:layout_below="@id/clear_fields"
                >
        <RadioButton
            android:id="@+id/auton_radio_1"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" 
            android:background="@drawable/auton_col"
            android:layout_weight="1"

            />
        <!-- android:layout_marginRight="380dp"  --> 
        <RadioButton
            android:id="@+id/auton_radio_2"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" 
            android:background="@drawable/auton_col"
            android:layout_weight="1"


            />
        <RadioButton
            android:id="@+id/auton_radio_3"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" 
            android:background="@drawable/auton_col"
            android:layout_weight="1"
            />

    </RadioGroup>

Solution

  • If you want them to share screen width equally you need to set android:layout_width="match_parent" on each View. Your xml would become:

    <RadioGroup
        android:id="@+id/auton_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/clear_fields"
        android:orientation="horizontal"
        android:paddingLeft="10dp" >
    
        <RadioButton
            android:id="@+id/auton_radio_1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/auton_col" />
        <!-- android:layout_marginRight="380dp" -->
    
        <RadioButton
            android:id="@+id/auton_radio_2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/auton_col" />
    
        <RadioButton
            android:id="@+id/auton_radio_3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@drawable/auton_col" />
    </RadioGroup>
    

    To elaborate, layout_weight can be used in two ways.

    To have your background drawable scale, make a new xml that goes in your drawable/ folder that looks like this

    <?xml version="1.0" encoding="utf-8"?>
    <bitmap xmlns:android="http://schemas.android.com/apk/res/android"
        android:gravity="center"
        android:src="@drawable/auton_col" />
    

    Name it whatever you like (e.g. auton_col_scale.xml) and reference that drawable as your background.