Android - Set padding to RadioButton pin

Question

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>

score 48 · Answer 1 · answered Jan 08 '18 at 15:38

48

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"/>

answered Jan 08 '18 at 15:38

Martin

489
4
4

2

Worked for me! Thanks! – Arthur Jan 24 '18 at 10:09
2

Awesome logic. Worked! – Brendan Jan 09 '20 at 01:13
1

how to use `inset` with `selector`? when configuring the `android:button` with this `inset` drawable, all my background style was overriden. @martin – mochadwi Mar 03 '20 at 00:45
Not working for me. Tried both RadioButton and androidx.appcompat.widget.AppCompatRadioButton – Kishan Solanki Aug 14 '20 at 08:21
1

@Martin, You're genius – Gary Chen Nov 18 '20 at 16:02
Did not work for me. – Minas Mina Apr 20 '22 at 13:54
Inset drawable causes default animation to break on lower API sometimes. – Krzysiulele Aug 16 '22 at 12:20
Thank you so much it worked gratefully. spent hours for this finally done – S HemaNandhini Jan 25 '23 at 13:06

Tevin J · Answer 2 · 2015-02-03T15:37:14.690

-2

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>

edited Feb 03 '15 at 15:37

answered Feb 03 '15 at 14:55

Tevin J

641
2
11
15

I tried, but all the buttons have moved further to the right and the white border on the left of the pin does not increase... – madx Feb 03 '15 at 15:11
1

Can you add the container_dropshadow.xml . If you're using a 9-patch, then that effect can be easily achievable. – Tevin J Feb 03 '15 at 15:18
Ok, edited the question, and added the container_dropshadow.xml – madx Feb 03 '15 at 15:26
I hope you're not planning to use the background extensively in your layout. You're going to have some major GPU overdraw. I have edited my answer. – Tevin J Feb 03 '15 at 15:35
1

Unfortunately I tested it and the result is that the pin has the same position and there is a bigger white space beetween the pin and the text... – madx Feb 03 '15 at 18:19

Android - Set padding to RadioButton pin

2 Answers2

Linked