CODEWITHSUNDEEP
androidandroid-layoutandroid-xmlandroid-radiogroup
fragon
fragon

Reputation: 3471

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>

Upvotes: 1

Views: 187

Answers (2)

zz-m
zz-m

Reputation: 546

Use LinearLayout or other Layout to Optimize the layout. You can do it like below:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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">
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                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"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">
                <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"/>
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">
                <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"/>
            </LinearLayout>
        </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>

Try it, I think it helps.

Upvotes: 0

CJBS
CJBS

Reputation: 15685

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"

Upvotes: 1

Related Questions