Add left margin to radio buttons and check boxes

[santosh-pingle]

Describe the bug
The checkbox is very close to the left edge.

Component
Core library, SDC library, reference app, or SDC gallery app

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Smartphone (please complete the following information):

• Device: [e.g. Pixel4a emulator]
• Android version: [e.g. Settings -> About phone -> Android version]
• Build number: [e.g. Settings -> About phone -> Build number]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Would you like to work on the issue?
Please state if this issue should be assigned to you or who you think could help to solve this issue.

[santosh-pingle]

in progress.

[santosh-pingle]

[santosh-pingle]

approach 1 :
android:padding does add padding around text in radio button, but it does not add padding before radio button icon.

approach 2 : Padding in drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
    <corners android:radius="4dp" />
    <padding
      android:bottom="18dp"
      android:left="18dp"
      android:right="18dp"
      android:top="18dp"></padding>
    <solid android:color="@color/box_filled_color" />
</shape>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
    <corners android:radius="8dp" />
    <padding
      android:bottom="18dp"
      android:left="18dp"
      android:right="18dp"
      android:top="18dp"></padding>
    <stroke
      android:color="@color/item_border_color"
      android:width="1dp" />
</shape>

It does not add padding before radio button icon.

[jingtang10]

@juanchazo any update?

[santosh-pingle]

in progress.

[santosh-pingle]

@shelaghm

Can you please share radio button drawable icon which has left padding 18dp for both selected and unselected state, so that I can try these drawable icons.
(root cause is when button drawable get drawn on canvas it assigns zero value to the left bound, therefore it appears very close to left edge.)

[shelaghm]

Shared icons on chat. Icons are exported so they are all 24px. You'll notice there's slight white space around the icons, this is so that it is consistent across the whole icon set.
This means the padding is 16px, not 18px. See visual below and hopefully this works for you?

[santosh-pingle]

@shelaghm
16/18 dp left padding is not present in shared icons.
Can you please share icons which has 16/18 dp left padding in icon itself.
May be you have to design new icons such way that it will have left padding in it.

16/18 dp left padding is missing from icon.

[shelaghm]

@santosh-pingle Does the 16px padding need to be on the icons? In the code can you specify the 16px padding around the icon? I think that's how it is typically done.

[santosh-pingle]

@santosh-pingle Does the 16px padding need to be on the icons? In the code can you specify the 16px padding around the icon? I think that's how it is typically done.
@shelaghm
My understanding was the same.
But in radio button/checkbox when you give padding, it get applied around the text. Icons always get drawn with zero left padding/ start bound .
Therefore, it is required to apply left padding/start bound on icons itself.

[shelaghm]

@santosh-pingle ah, got it. I added new icons with padding included. Shared on chat.

[narendra-keda]

To add padding before the RadioButton icon, you can use a drawable with padding as the button for the RadioButton. Here's how you can do it: First, create a new drawable resource file padded_icon.xml in the res/drawable directory:

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@android:drawable/btn_radio"
    android:insetLeft="10dp" />

// This will do the task. But it will also change the icon.

So Either use your own radio button icon selector, or create like below.
(1) Add two drawables btn_radio_on and bin_radio_off.
(2) create new selector resource with below code.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/btn_radio_on" android:state_checked="true" android:state_window_focused="false" />
    <item android:drawable="@drawable/btn_radio_off" android:state_checked="false" android:state_window_focused="false" />

    <item android:drawable="@drawable/btn_radio_off" android:state_checked="false" />
    <item android:drawable="@drawable/btn_radio_on" android:state_checked="true" />

</selector>

(3) use this selector resource as drawable in padded_icon.xml.

(4) use padded_icon.xml as button in radiobutto.