Search code examples
androidandroid-layoutandroid-xmlandroid-radiogroup

Can't add margins to RadioButtons


I have a problem with my layout. I have a Dialog in which I would like to put RadioButtons, but as you can see on the screenshot they are really close to each other. How to widen the space between them? I've already tried Margin Left/Right, Padding Left/Right, etc, but none of this works.

Screenshot

screenshot

My .xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/backrepeat_reversed" >
    <TextView android:id="@+id/ml_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/size"
        android:gravity="center"/>
    <LinearLayout 
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RadioGroup  android:id="@+id/radio_group"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center">
        <RadioButton android:id="@+id/rws"
            android:layout_width="wrap_content"
            android:drawableBottom="?android:attr/listChoiceIndicatorSingle"
            android:button="@null"
            android:text="@string/sw"
            android:gravity="center_horizontal|bottom"
            android:layout_height="match_parent"
            android:textColor="#000000"
            android:textSize="50sp"/>
        <RadioButton android:id="@+id/rwm"
            android:layout_width="wrap_content"
            android:drawableBottom="?android:attr/listChoiceIndicatorSingle"
            android:button="@null"
            android:text="@string/mw"
            android:gravity="center_horizontal|bottom"
            android:layout_height="match_parent"
            android:textColor="#000000"
            android:textSize="50sp"/>
        <RadioButton android:id="@+id/rwb"
            android:layout_width="wrap_content"
            android:drawableBottom="?android:attr/listChoiceIndicatorSingle"
            android:button="@null"
            android:text="@string/bw"
            android:gravity="center_horizontal|bottom"
            android:layout_height="match_parent"
            android:textColor="#000000"
            android:textSize="50sp"/>
    </RadioGroup>
    </LinearLayout>
    <TextView android:id="@+id/percent_label"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/percentage"
        android:gravity="center"/>
    <NumberPicker 
        android:id="@+id/percent_picker"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        />

</LinearLayout>

Solution

  • The radio buttons are placed side-by-side in a LinearLayout. They have their layout_width set to wrap_content. The parent (the RadioGroup) is also set to wrap_content, and its two parents (LinearLayout, and its parent, the root LinearLayout element) are also set to wrap_content. The gravity is also set to be centred, so everything is gravitating towards the centre for the screen, and remains huddled together.

    Try:

    • set the root LinearLayout element's layout_width to be fill_parent.
    • Set the nested LinearLayout (parent of RadioGroup) to be a RelativeLayout (i.e. change the element type)
    • Set for each RadioButton, the width to be 33% by adding this attribute/value pair: android:layout_weight=".33"