Android 如何在屏幕中央对齐单选按钮

How to align Radio button at the center of the screen

提问by Naruto

I am using Radio buttons as tab in my application.

我在我的应用程序中使用单选按钮作为选项卡。

I have loaded images for it, but they are aligning towards left side. how to make them align at center.

我已经为它加载了图像，但它们向左侧对齐。如何使它们居中对齐。

This is how my XML file looks

这是我的 XML 文件的外观

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@android:id/tabhost" 
  android:layout_width="fill_parent"
  android:layout_height="fill_parent">

  <LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent">

    <FrameLayout android:id="@android:id/tabcontent"
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content"
      android:layout_weight="1" 
      android:padding="20dip" 
      android:background="#fff"/>

    <RadioGroup android:layout_width="fill_parent"
      android:layout_height="wrap_content" 
      android:orientation="horizontal"
      android:checkedButton="@+id/allcontacts"
      android:id="@+id/contactgroup">


      <RadioButton android:id="@+id/allcontacts" 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center" 
      android:layout_weight="1"/>

      <RadioButton
          android:id="@+id/categories"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_gravity="center"
          android:layout_weight="1"/>

      <RadioButton android:id="@+id/favourites" 
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center" 
      android:layout_weight="1" />

    </RadioGroup>

    <TabWidget android:id="@android:id/tabs"
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content"
      android:layout_weight="0" android:visibility="gone" />
  </LinearLayout>
</TabHost>

采纳答案by Barak

Try android:gravity="center"in the xml for each RadioButton.

android:gravity="center"在每个 RadioButton 的 xml 中尝试。

I see you're wrap_content, so theoretically that shouldn't do anything, but it looks like the icons are evenly divided, maybe the RadioGroup divides the space evenly so using android:gravity will have an effect.

我看到你是 wrap_content，所以理论上不应该做任何事情，但看起来图标是均匀划分的，也许 RadioGroup 将空间均匀划分，所以使用 android:gravity 会产生效果。

Worth a shot I guess.

我想值得一试。

EDIT

编辑

Try this:

尝试这个：

  <RadioButton android:id="@+id/allcontacts" 
  android:layout_width="0dp"
  android:layout_height="wrap_content"
  android:layout_gravity="center"
  android:marginLeft="20dp" 
  android:gravity="center"
  android:layout_weight="1"/>

You will have to play with the android:marginLeft="20dp"to get it properly centered, but that'll let you do what you're looking to do. I copied your layout and tested this time, so I knowit works! :)

您将不得不使用android:marginLeft="20dp"以使其正确居中，但这会让您做您想做的事情。这次我复制了您的布局并进行了测试，所以我知道它有效！:)

回答by VinceStyling

I had similar issue before, I figure it out, so I try to explain it for you.

我之前也遇到过类似的问题，我弄明白了，所以我试着为你解释一下。

above is my app screenshot, as you can see, I also did the same, I had a menu align screen bottom, they're a RadioGroup and three RadionButton inside it, I want each menu icon align center for RadionButton, the shadow image(9-patch) shown together when Button check event trigger.
At first, I used android:buttonattribute refers to a drawable selector, the selector has two drawable state between check and uncheck, but I cannot align the menu icon center and make the shadow image fill up by RadionButton, they looks like it :

上面是我的应用程序截图，正如你所看到的，我也做了同样的事情，我有一个菜单对齐屏幕底部，它们是一个 RadioGroup 和三个 RadionButton，我希望每个菜单图标对齐 RadioonButton 的中心，阴影图像（ 9-patch）在按钮检查事件触发时一起显示。
起初，我使用android:button属性指的是一个 drawable 选择器，选择器在选中和取消选中之间有两个可绘制状态，但是我无法对齐菜单图标中心并通过 RadionButton 使阴影图像填充，它们看起来像这样：

I tried included android:layout_gravity=centerand android:gravity=centerwith the RadionButton, but it also didn't got effect. after that, my workmate told me the android:buttonattribute is refers to foreground rather than background, then I use android:backgroundinstead of android:buttonand it worked, below is my code :

我尝试在RadionButton 中包含android:layout_gravity=center和android:gravity=center，但它也没有效果。在那之后，我的同事告诉我android:button属性是指前景而不是背景，然后我使用android:background而不是android:button并且它起作用了，下面是我的代码：

<RadioGroup android:layout_width="match_parent" android:layout_height="60dp"
        android:orientation="horizontal" android:background="@drawable/menu_bg">

    <RadioButton android:layout_width="0dp" android:layout_height="match_parent"
                 android:layout_weight="1" android:button="@null" android:checked="true"
                 android:background="@drawable/menu_item_selector" />

    <RadioButton android:layout_width="0dp" android:layout_height="match_parent"
                 android:layout_weight="1" android:button="@null"
                 android:background="@drawable/menu_item_selector" />

    <RadioButton android:layout_width="0dp" android:layout_height="match_parent"
                 android:layout_weight="1" android:button="@null"
                 android:background="@drawable/menu_item_selector" />

</RadioGroup>

the menu_item_selectoris important thing because it had gravitysetting :

该menu_item_selector是因为它有重要的事情重力设置：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_item_layer_list" android:state_checked="true" />
    <item android:drawable="@drawable/menu_item_layer_list" android:state_pressed="true" />
    <item>
        <bitmap android:src="@drawable/menu_item_off" android:gravity="center" />
    </item>
</selector>

cause I had two images to draw when user turn Button state is checked, the shadow background image and icon active state image, so I used layer-list to implement it, the active icon also had gravitysetting, below is menu_item_layer_listcode :

因为当用户打开按钮状态被选中时，我有两个图像要绘制，阴影背景图像和图标活动状态图像，所以我使用 layer-list 来实现它，活动图标也有重力设置，下面是menu_item_layer_list代码：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/menu_bg_pressed" />
    <item>
        <bitmap android:src="@drawable/menu_item_on" android:gravity="center" />
    </item>
</layer-list>

I don't know that solution was perfect or not, because I always implement it as a view and draw myself. But I think Android SDK supplied more convenient component let's finish work with xml configuration, we should be learn and use it.

我不知道该解决方案是否完美，因为我总是将其作为视图来实现并自己绘制。但是我觉得Android SDK 提供了更方便的组件让我们完成xml 配置的工作，我们应该学习和使用它。

回答by Bolling

You can use empty views to fill upp the space evenly between the radio buttons. In this case I have 3 radio buttons that vill look centered, nice and tidy.

您可以使用空视图均匀填充单选按钮之间的空间。在这种情况下，我有 3 个单选按钮，它们看起来居中、漂亮和整洁。

<RadioGroup
            android:id="@+id/radioGroup1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >

            <View
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <RadioButton
                android:id="@+id/radio0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="" />

            <View
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <RadioButton
                android:id="@+id/radio1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:checked="true"
                android:gravity="center"
                android:text="" />

            <View
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1" />

            <RadioButton
                android:id="@+id/radio2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:text="" />

            <View
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="1" />
        </RadioGroup>

回答by ODAXY

You could put your RadioButton inside FrameLayout and center them:

您可以将 RadioButton 放入 FrameLayout 并将它们居中：

<RadioGroup
    android:id="@+id/radioGroup1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/gray_percent"
    android:orientation="horizontal" >

    <FrameLayout
        android:layout_width="0dip"
        android:layout_height="wrap_content" 
         android:layout_weight="1">

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"

            android:button="@drawable/rb_temp1"
            android:checked="true"
            android:gravity="center" />
    </FrameLayout>

    <FrameLayout
        android:layout_width="0dip"
        android:layout_height="wrap_content" 
         android:layout_weight="1">

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"

            android:button="@drawable/rb_temp1"
            android:gravity="center" />
    </FrameLayout>

</RadioGroup>

回答by Lee Yi Hong

I tried all of the above and it doesn't work.

我尝试了以上所有方法，但它不起作用。

I had found a better solution which i would like to share. Set your button to @null; then add the drawable to android:drawableTopor any other type of position. This will enable us to set the drawables to other position of the radioButton. add some paddingor drawablePaddingso that it will not stick to any side of the button/text.

我找到了一个更好的解决方案，我想分享一下。将您的按钮设置为@null; 然后将 drawable 添加到android:drawableTop或任何其他类型的位置。这将使我们能够将 drawable 设置到 radioButton 的其他位置。添加一些padding或drawablePadding使其不会粘到按钮/文本的任何一方。

android:background="@drawable/background_paint"
android:drawableTop="@drawable/shape"
android:button="@null"

回答by user3213649

in my case, my radio button contents were aligned right. I let them aligned center by set android:background be some value, such as @null or some color. below were my layout

就我而言，我的单选按钮内容是正确对齐的。我让它们通过 set android:background 居中对齐为某个值，例如 @null 或某种颜色。下面是我的布局

<LinearLayout
    android:id="@+id/tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal" >

    <RadioGroup
        android:paddingTop="5dp"
        android:id="@+id/radioGroupAsTab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_gravity="center_vertical|center_horizontal"
        android:gravity="center_vertical|center_horizontal"
        android:background="@color/v3_header_bg"
        android:fadingEdge="none"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/rbDiagnose"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:checked="true"
            android:drawableTop="@drawable/v3_tab_diagnose"
            android:layout_gravity="center_vertical|center_horizontal"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/tabCaption_health_maintenance"
            android:textColor="@color/radio_astab_changecolor"
            android:textSize="10sp"
            android:textStyle="bold" />

        <RadioButton
            android:id="@+id/rbHistory"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/v3_tab_history"
            android:layout_gravity="center_vertical|center_horizontal"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/tabCaption_history"
            android:textColor="@color/radio_astab_changecolor"
            android:textSize="10sp"
            android:textStyle="bold" />

        <RadioButton
            android:id="@+id/rbChart"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/v3_tab_chart"
            android:layout_gravity="center_vertical|center_horizontal"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/tabCaption_graph"
            android:textColor="@color/radio_astab_changecolor"
            android:textSize="10sp"
            android:textStyle="bold" />

        <RadioButton
            android:id="@+id/rbCyclopedia"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/v3_tab_encyclopedia"
            android:layout_gravity="center_vertical|center_horizontal"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/tabCaption_encyclopedia"
            android:textColor="@color/radio_astab_changecolor"
            android:textSize="10sp"
            android:textStyle="bold" />

        <RadioButton
            android:id="@+id/rbSetting"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@null"
            android:button="@null"
            android:drawableTop="@drawable/v3_tab_setting"
            android:layout_gravity="center_vertical|center_horizontal"
            android:gravity="center_vertical|center_horizontal"
            android:text="@string/tabCaption_info"
            android:textColor="@color/radio_astab_changecolor"
            android:textSize="10sp"
            android:textStyle="bold" />
    </RadioGroup>
</LinearLayout>

回答by gustavomcastro

Put android:gravity="center" on RadioGroup Tag. This Works.

将 android:gravity="center" 放在 RadioGroup 标签上。这有效。

回答by Urvi Jasani

 <RadioGroup
    android:id="@+id/radioGroup1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:orientation="horizontal" >
       <RadioButton
        android:id="@+id/rb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="One"/>

        <RadioButton
        android:id="@+id/rb2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Two"/>
 </RadioGroup>

回答by Amokrane Chentir

Try adding an android:layout_gravity="center_horizontal"on your RadioGroup.

尝试android:layout_gravity="center_horizontal"在您的RadioGroup.

回答by kostikus

It was in the opposite side in my case and I just put android:paddingLeft="0dp" and it worked so you should try android:paddingRight="0dp" for radiobuttons

在我的情况下它在相反的一侧，我只是把 android:paddingLeft="0dp" 并且它起作用了所以你应该尝试 android:paddingRight="0dp" for radiobuttons