CODEWITHSUNDEEP
androidxmlpaddingstylingandroid-radiobutton
madx
madx

Reputation: 7213

Android - Set padding to RadioButton pin

I'have tried lot of combination both with xml and programmatically but nothing to do yet. This is the scenario (pay attention to the small red arrow):

enter image description here

I have some RadioButtons inside a radio group, in xml this scenario could be represented as:

<RadioGroup
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:id="@+id/radiobuttons"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:dividerPadding="30dp">
   <RadioButton android:id="@+id/radio_blue"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="How to set the padding on the left of radio pin"
      android:background="@drawable/container_dropshadow"/>
  <!-- other radio buttons... -->
</RadioGroup>

My problem is that I didn't find a way to set the left padding of the circle pin neither in xml nor programmatically (I'm interested in both). In fact each padding that I tried to modify in a RadioButton object seems to refer only to the text inside of it (i.e. java functions setPadding and setCompoundDrawablePadding, or xml android:paddingLeft and android:drawablePadding don't work).

My container_dropshadow.xml is:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <!-- Drop Shadow Stack -->
   <item>
      <shape>
         <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
         <solid android:color="#00CCCCCC" />
  </shape>
   </item>
   <item>
      <shape>
         <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
         <solid android:color="#10CCCCCC" />
      </shape>
   </item>
   <item>
      <shape>
         <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
         <solid android:color="#20CCCCCC" />
      </shape>
   </item>
   <item>
      <shape>
         <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
         <solid android:color="#30CCCCCC" />
      </shape>
   </item>
   <item>
      <shape>
         <padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
         <solid android:color="#50CCCCCC" />
      </shape>
   </item>
   <!-- Background -->
   <item>
      <shape>
         <solid android:color="@android:color/white" />
         <corners android:radius="3dp" />
      </shape>
   </item>
</layer-list>

Upvotes: 20

Views: 8882

Answers (2)

Martin
Martin

Reputation: 519

I found a way, by using an inset drawable:

First, create a new inset drawable (e.g. radio_button_inset.xml) with your desired padding and a link to the theme radio button drawable like this:

<inset xmlns:android="http://schemas.android.com/apk/res/android"
      android:drawable="?android:attr/listChoiceIndicatorSingle"
      android:insetLeft="@dimen/your_padding_value"/>

Second, use this new drawable for your radio button:

<RadioButton android:id="@+id/radio_blue"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="How to set the padding on the left of radio pin"
      android:background="@drawable/container_dropshadow"
      android:button="@drawable/radio_button_inset"/>

Upvotes: 51

Tevin J
Tevin J

Reputation: 731

Try using paddingStart on the RadioGroup. Since it's extends from a ViewGroup, LinearLayout, all of the child elements will be affected. 

<RadioGroup
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:id="@+id/radiobuttons"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:dividerPadding="30dp"
   android:paddingStart="8dp">
   <RadioButton android:id="@+id/radio_blue"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:text="How to set the padding on the left of radio pin"
      android:background="@drawable/container_dropshadow"/>
  <!-- other radio buttons... -->
</RadioGroup>

Try this in your background resource. 

<!-- Background -->
   <item>
      <shape>
         <padding android:left="8dp" />
         <solid android:color="@android:color/white" />
         <corners android:radius="3dp" />
      </shape>
   </item>

Upvotes: -2

Related Questions