在 Android 中添加 RadioButton 与其标签之间的边距?

在使用 Android 内置组件的同时,是否可以在 RadioButton 和标签之间添加一点空间?默认情况下,文本看起来有点皱。

<RadioButton android:id="@+id/rb1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="My Text"/>

我试过几种方法:

  1. 指定边距和填充似乎会在整个元素(按钮和文本)周围添加空间。有道理,但不是我想要的。

  2. 通过 XML 创建一个自定义可绘制的图像,为选中和未选中的状态指定图像,然后在每个图像的右侧添加一些额外的像素。这应该可以工作,但是现在您正在跳出默认 UI。(不是世界末日,但不理想)

  3. 在每个标签的开头添加额外的空格。Android 似乎修剪了一个前导空格字符,如“ My String”,但指定 unicode U + 00 A0,如“ u00A0My String”就可以了。这个可以,但是看起来有点脏。

有更好的解决办法吗?

83680 次浏览

Can't try this right now to verify, but have you tried to see if the attribute android:drawablePadding does what you need?

Not sure if this will fix your problem, but have you tried Radio Button's "Padding left" property with a value of 50dip or more

I have tried, "android:paddingLeft" will works. paddingLeft will only impact the text while keep the radio image stay at the original position.

i tried several ways and finished with this one working correctly on both emulator and devices:

    <RadioButton
android:background="@android:color/transparent"
android:button="@null"
android:drawableLeft="@drawable/your_own_selector"
android:drawablePadding="@dimen/your_spacing" />
  • android:background needs to be transparent as it seems on api10 there is a background with intrinsic paddings (not tried with other apis but the solution works on others too)
  • android:button needs to be null as paddings will not work correctly otherwise
  • android:drawableLeft needs to be specified instead of android:button
  • android:drawablePadding is the space that will be between your drawable and your text

The "android:paddingLeft" only seems to work correctly under android 4.2.2

i have tried almost all versions of android and it only works on the 4.2.2 version.

For anyone reading this now, the accepted answer will lead to some layout problems on newer APIs causing too much padding.

On API <= 16 you can set paddingLeft on the radio button to set the padding relative to the radio button's view bounds. Additionally, a patch nine background also changes the view bounds relative to the view.

On API >= 17 the paddingLeft (or paddingStart) is in relation to the radio button drawable. Same applies to the about a patch nine. To better illustrate padding differences see the attached screenshot.

If you dig through the code you will find a new method in API 17 called getHorizontalOffsetForDrawables. This method is called when calculating the left padding for a radio button(hence the additional space illustrated in the picture).

TL;DR Just use paddingLeft if your minSdkVersion is >= 17. If you support API <= 16, you should have radio button style for the min SDK you are supporting and another style for API 17+.

combine screenshots showing left padding differences between API versions

I'm using different approach that I think should work on all API versions. Instead of applying padding I'm adding an empty view between to RadioButtons:

<View
android:layout_width="20dp"
android:layout_height="1dp" />

This should give you 20dp padding.

final float scale = this.getResources().getDisplayMetrics().density;
checkBox.setPadding(checkBox.getPaddingLeft() + (int)(10.0f * scale + 0.5f),


checkBox.getPaddingTop(),
checkBox.getPaddingRight(),
checkBox.getPaddingBottom());

The padding between the drawables and the text. It will be achieved by adding line below in xml file. android:drawablePadding="@dimen/10dp"

Add margin between a radiobutton its label by paddingLeft:

android:paddingLeft="10dip"

Just set your custom padding.

RadioButton's xml property.

<RadioButton
android:id="@+id/radHighest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@drawable/YourImageResource"
android:drawablePadding="50dp"
android:paddingLeft="10dip"
android:text="@string/txt_my_text"
android:textSize="12sp" />

Done

I came here looking for an answer and the simplest way (after some thinking) was add spacing at the beginning of the label itself like so

<RadioGroup
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/btnChangeMode"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_below="@+id/view3"
android:gravity="center|left"
android:id="@+id/ledRadioGroup">
<RadioButton
android:button="@drawable/custom_radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" On"
android:layout_marginRight="6dp"
android:id="@+id/ledon"
android:textColor="@color/white" />
<RadioButton
android:button="@drawable/custom_radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Off"
android:layout_marginLeft="6dp"
android:id="@+id/ledoff"
android:textColor="@color/white" />

for me works:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<layer-list>
<item android:right="5dp">
<shape android:paddingLeft="5dp" android:shape="oval">
<size android:width="20dp" android:height="20dp" />
<solid android:color="@color/blue" />
</shape>
</item>
</layer-list>
</item>
<item android:paddingLeft="5dp" android:state_checked="false">
<layer-list>
<item android:right="5dp">
<shape android:paddingLeft="5dp" android:shape="oval">
<size android:width="20dp" android:height="20dp" />
<solid android:color="@color/grey" />
</shape>
</item>
</layer-list>
</item>
</selector>

Use the following XML attributes. It worked for me

For API <= 16 use

android:paddingLeft="16dp"

For API >= 17 use

android:paddingStart="@16dp"

Eg:

<android.support.v7.widget.AppCompatRadioButton
android:id="@+id/popularityRadioButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="true"
android:paddingEnd="@dimen/radio_button_text"
android:paddingLeft="@dimen/radio_button_text"
android:paddingRight="@dimen/radio_button_text"
android:paddingStart="@dimen/radio_button_text"
android:text="Popularity"
android:textSize="@dimen/sort_dialog_text_size"
android:theme="@style/AppTheme.RadioButton" />

enter image description here

Further More: drawablePadding attribute doesn't work. It only works if you added a drawable in your radio button. For Eg:

<RadioButton
android:id="@+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:button="@null"
android:drawableEnd="@android:drawable/btn_radio"
android:drawablePadding="56dp"
android:drawableRight="@android:drawable/btn_radio"
android:text="New RadioButton" />
<RadioButton
android:id="@+id/rb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background="@null"
android:paddingLeft="20dp"
android:text="1"
android:textColor="@color/text2"
android:textSize="16sp"
android:textStyle="bold" />

You could try using the gravity attribute of radio button .

<RadioButton
android:id="@+id/rb_all"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="true"
android:gravity="right|center_vertical"
android:padding="@dimen/padding_30dp"
android:text="@string/filter_inv_all"
android:textColor="@color/black"
android:textSize="@dimen/text_size_18" />

This will align the text to the right most end . Check out the first radio in the image.

enter image description here

You can this code on your XML file

<RadioButton
android:id="@+id/rButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawablePadding="50dp"
android:paddingLeft="10dip"
android:text="@string/your_text" />

or use this on Activity class

radioButton.setPadding(12, 10, 0, 10);

Create a style in style.xml like this

<style name="Button.Radio">


<item name="android:paddingLeft">@dimen/spacing_large</item>
<item name="android:textSize">16sp</item>
</style>

Put that style in radio button

 <RadioButton
android:id="@+id/rb_guest_busy"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="@string/guest_is_waiting"
android:textSize="@dimen/font_size_3x_medium"
android:drawablePadding="@dimen/spacing_large"
android:textColor="@color/color_text_heading_dark"
style="@style/Button.Radio"/>

You can change any attribute same as button as it RadioButton indirectly inherits button.

I know it is an old question, but with this solution, I finally got peace of mind and forget about API level.

Left side vertical RadioGroup with right side vertical text view.

 <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">


<RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<RadioButton
android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<RadioButton
android:id="@+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RadioGroup>


<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:gravity="center_vertical"
android:text="Radio 1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:gravity="center_vertical"
android:text="Radio 2"/>
</LinearLayout>
</LinearLayout>

jusst use padding start for API above 16