How to align Radio button at the center of the screen

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.

  • Android Studio: “Waiting for device.” Trying to run app on phone
  • Where are the Android icon drawables within the SDK?
  • How is it possible that Google Fit app measures number of steps all the time without draining battery?
  • How to use Android Spinner like a drop-down list
  • Enable Stream Management asmack android
  • Where is the best place to store globals (auth token) in Android
  • enter image description here

    This is how my XML file looks

    <?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>
    

    Related posts:

    Can you fire an event when Android Dialog is dismissed?
    Put Object as intent for next activity
    Converting Android app to Java Desktop app
    How to rotate a drawable by ObjectAnimator?
    Android AudioRecord to Server over UDP Playback Issues
    How To Get Another App&#039;s Version Name
  • Android - LinearLayout Horizontal with wrapping children
  • Call .NET Webservice with Android
  • FTPClient Uploading File = SocketException: Connection reset
  • How to write dead simple native SERVER program (not app) for Android devices?
  • IAB signed data with no orders in it
  • notifyDataSetChanged not working on RecyclerView
  • 11 Solutions collect form web for “How to align Radio button at the center of the screen”

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

    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.

    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 know it works! 🙂

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

    runtime screenshot

    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:button attribute 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 :

    enter image description here

    I tried included android:layout_gravity=center and android:gravity=center with the RadionButton, but it also didn’t got effect. after that, my workmate told me the android:button attribute is refers to foreground rather than background, then I use android:background instead of android:button and it worked, below is my code :

    <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_selector is important thing because it had gravity setting :

    <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 gravity setting, below is menu_item_layer_list code :

    <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.

    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.

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

    You could put your RadioButton inside FrameLayout and center them:

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

    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

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

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

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

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

    i used this line in my RadioGroup and it is working fine!

    android:gravity="center|left" 
    

    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:drawableTop or any other type of position. This will enable us to set the drawables to other position of the radioButton. add some padding or drawablePaddingso that it will not stick to any side of the button/text.

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

    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 Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.