Manage Layout Inside a Horizontal Oriented Radiogroup

Question

I am using a TableLayout with TableRows as my main activity.

Inside the TableLayout is a Radio Group containing 2 Radio Buttons inside the activity (the Radio Group being inside a table row). I want to be able to align the rightmost radio button to the right edge screen, so the "gap" is between the left radio button and right button (instead of after the right radio button). i.e.

So instead of having
| (x) (x) gap |
I will have
|(x) gap (x)|

where (x) are the Radio Buttons and | are the edges of the screen

I can use gravity (center_horizontal) to put both the buttons in the middle (i.e. | gap (x)(x) gap|) however I can't seem to be able to split them the way I want as said before

Mackenie

Answer 1

All you need to evenly space an arbitrary number of buttons horizontally across the screen:

1. RadioGroup has to have android:orientation="horizontal" & android:layout_width="fill_parent"
2. Each radio button has to have android:layout_weight="1", except the rightmost button (to make it line up on the right edge of the screen)!

This took me hours to figure out.

Here is some example code, with a bonus of two text labels and the right and left edges of the screen, for a survey app.

<RadioGroup
    android:id="@+id/radio_group"
    android:orientation="horizontal"
    android:layout_below="@id/question" 
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:visibility="gone"
>
    <RadioButton
        android:id="@+id/strong_disagree_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="1"
    />
    <RadioButton
        android:id="@+id/disagree_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/disagree"
    />
    <RadioButton
        android:id="@+id/neutral_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/neutral"
    />
    <RadioButton
        android:id="@+id/agree_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/agree"
    />
    <RadioButton
        android:id="@+id/strong_agree_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5"
    />
</RadioGroup>
<TextView
    android:id="@+id/disagree_label"
    android:text="@string/strongly_disagree_txt"
    android:layout_below="@id/radio_group" 
    style="@style/TextAppearance"
    android:visibility="gone"
    />
<TextView
    android:id="@+id/agree_label"
    android:text="@string/strongly_agree_txt"
    android:layout_below="@id/radio_group" 
    android:layout_alignParentRight="true" 
    style="@style/TextAppearance"
    android:layout_width="wrap_content"
    android:visibility="gone"
    />

Smoothshaven

I tried this and it's not the same with the screenshot you attached. – Studer

Thank you so much for this, I've been pulling my hair out! – Cl

Answer 2

Found my solution. A combination of weights and gravity and removing the margins. The radio group can have layout_width="fill_parent". Each radio button should have layout_weight="1", but the layout_width for each radiobutton must still be specified to override the default of "37" which I guess is the default radio button image width.

        <RadioGroup android:id="@+id/overall"
        android:layout_width="fill_parent" android:layout_height="80dp"
        android:gravity="center"
        android:orientation="horizontal">

First button should have:

                android:layout_weight="1"
            android:layout_gravity="center|left"

Last button should have:

            android:layout_gravity="center|right"

Note: all buttons have layout_gravioty set, but no layout_weight setting for the right most button!

Scum

I used that, but it doesnt work for my code, first button covers whole line – Marelya

Answer 3

Did you ever find a solution to this? My intermediate solution might help, but it's not the full picture for me. I've been able to do this by setting specific widths, but this does not allow the view to resize to fit the screen width:

    <RelativeLayout  
    android:id="@+id/overall_layout"
    android:layout_width="290dp" android:layout_height="wrap_content">

    <RadioGroup android:id="@+id/overall"
        android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:orientation="horizontal">
        <RadioButton android:id="@+id/overall_1" android:tag="1"
            android:button="@drawable/radio_1"
            android:layout_width="50dp"
            android:layout_marginRight="10dp"
            android:layout_height="wrap_content"></RadioButton>
        <RadioButton android:id="@+id/overall_2" android:tag="2"
            android:button="@drawable/radio_2"
            android:layout_width="50dp"
            android:layout_marginRight="10dp"
            android:layout_height="wrap_content"></RadioButton>
        <RadioButton android:id="@+id/overall_3" android:tag="3"
            android:button="@drawable/radio_3"
            android:layout_width="50dp"
            android:layout_marginRight="10dp"
            android:layout_height="wrap_content"></RadioButton>
        <RadioButton android:id="@+id/overall_4" android:tag="4"
            android:button="@drawable/radio_4"
            android:layout_width="50dp"
            android:layout_marginRight="10dp"
            android:layout_height="wrap_content"></RadioButton>
        <RadioButton android:id="@+id/overall_5" android:tag="5"
            android:button="@drawable/radio_5"
            android:layout_width="50dp"
            android:layout_height="wrap_content"></RadioButton>
    </RadioGroup>
    <TextView android:text="left" android:id="@+id/left"
        android:layout_below="@id/overall"
        android:layout_alignParentLeft="true"
        android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
    <TextView android:text="right" android:id="@+id/right"
        android:layout_below="@id/overall"
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
    </RelativeLayout>

Note there is no margin on the last button.

I am trying to have 5 custom buttons in a radio group, with the 1st left-justified and the last right-justified. The buttons are exactly 50 pixels wide and I don't want any text associated with the buttons individually. The 2 texts below are left and right-justfied in the relative layout. Using "layout_gravity" has no effect and "layout_weight" adds padding to the right of each button, which causes the right-most button to no longer be justified.

Much hair-pulling on this.

Scum

Answer 4

If i understand you question right, you can also try next code inside RadioGroup:

<ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<View
    android:id="@+id/view1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1" />

<ToggleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Shoulders