CODEWITHSUNDEEP
androidxmlradio-button
James Fazio
James Fazio

Reputation: 6450

Centering RadioButtons

I have two RadioButtons in a Radio Group that look like so. enter image description here

             <RadioGroup
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal" >

                    <RadioButton
                        android:id="@+id/rb_PubAsMe"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:checked="true"
                        android:text="Self"
                        android:textColor="#000000" />

                    <RadioButton
                        android:id="@+id/rb_PubAsTeam"
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Team"
                        android:textColor="#000000" />
                </RadioGroup>

By default, android justifies to the left, I want to have these buttons centered. When I try to set the gravity for each button to the center, the following happens.

enter image description here

Same Code but added this line to each RadioButton

android:gravity="center"

Has anyone encountered this problem? How can I get the button to move to the center with the text?

   |---------(Button)Text---------|---------(Button)Text---------|

Upvotes: 2

Views: 1757

Answers (3)

Sam
Sam

Reputation: 86948

How does this look?

Centered RadioButtons

I used a few invisible RadioButton "spacers". (Code below)

I also tried various combinations with only one "spacer"... (and I switched to the "Light" theme in a quick attempt to mimic your color scheme.)

White Centered Buttons

But the top image looks more centered and balanced to me than the bottom one.

This is the code for the top layout. 

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:orientation="horizontal" >

    <RadioButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:visibility="invisible" />

    <RadioButton
        android:id="@+id/rb_PubAsMe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:checked="true"
        android:text="Self" />

    <RadioButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:visibility="invisible" />

    <RadioButton
        android:id="@+id/rb_PubAsTeam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Team" />

    <RadioButton 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:visibility="invisible" />

</RadioGroup>

If you prefer the bottom image simply remove the first and last "spacers" and remove the layout_weight attributes. Hope that helps!

Upvotes: 3

Marcin S.
Marcin S.

Reputation: 11191

I have modified your code.

<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/rb_PubAsMe"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Self"
        android:textColor="#000000" />

    <RadioButton
        android:id="@+id/rb_PubAsTeam"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Team"
        android:textColor="#000000" />

</RadioGroup>

It works as desired

Upvotes: 1

Bal&#225;zs &#201;des
Bal&#225;zs &#201;des

Reputation: 13807

The only solution i can think of is the the following:

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

    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_weight="1" >
        <RadioButton 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="true"
            android:layout_centerVertical="true"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />
    </RelativeLayout>

    <!-- Repeat the above RelativeLayout --> 
</LinearLayout>

You can't put the buttons in a RadioGroup this way, but it looks like you wanted it to look.

Upvotes: 0

Related Questions