aligning radio buttons in android

Question

I am trying to re arrange the radio buttons

I have a output

search_page.xml

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        android:background="#E1E1E1"
        android:weightSum="1" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="City" />

        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:background="@drawable/rounded_edittext"
            android:layout_weight=".75" />
    </LinearLayout>

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="@android:color/black" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:onClick="selectDate"
        android:orientation="horizontal"
        android:padding="10dp"
        android:background="#E1E1E1"
        android:weightSum="1" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="date" />

        <EditText
            android:id="@+id/DATE_EDIT_TEXT_ID"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight=".75"
            android:background="@drawable/rounded_edittext"
            android:onClick="selectDate" />
    </LinearLayout>

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="@android:color/black" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        android:background="#E1E1E1"
        android:weightSum="1" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight=".25"
            android:text="type" />

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

        <RadioButton
            android:id="@+id/radio0"
            android:background="@drawable/yourbuttonbackground"
            android:button="@android:color/transparent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Breakfast" />

        <RadioButton
            android:id="@+id/radio1"
            android:background="@drawable/yourbuttonbackground"
            android:button="@android:color/transparent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Lunch" />
    </RadioGroup>

        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/yourbuttonbackground"
            android:button="@android:color/transparent"
            android:text="Dinner" />

    </LinearLayout>

to space the radio buttons in order as below !

Any ideas !

Answer 1

Copy the below code in your xml.I have changed weight distribution in layout

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#E1E1E1"
        android:orientation="horizontal"
        android:padding="10dp"
        android:weightSum="2.5" >

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="type" />

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

            <RadioButton
                android:id="@+id/radio0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="2dp"
                android:layout_weight=".5"
                android:background="@drawable/yourbuttonbackground"
                android:button="@android:color/transparent"
                android:checked="true"
                android:padding="5dp"
                android:text="Breakfast" />

            <RadioButton
                android:id="@+id/radio1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginRight="2dp"
                android:layout_weight=".5"
                android:background="@drawable/yourbuttonbackground"
                android:button="@android:color/transparent"
                android:padding="5dp"
                android:text="Lunch" />
        </RadioGroup>

        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="2dp"
            android:layout_weight=".5"
            android:background="@drawable/yourbuttonbackground"
            android:button="@android:color/transparent"
            android:padding="5dp"
            android:text="Dinner" />
    </LinearLayout>

Hope this works

Answer 2

I would suggest not to use radioGroup for horizontal. i have found that there are issues on different devices when doing this (Galaxy Note 2 was one of these devices more recently).

Just use a horizontal linear layout, push it left with margins to align it and put buttons inside it which will have text and your background shape.

Then in code add click listeners to them, and have a way to save which button was last clicked.

you can have the state drawable contain a selected="true" state and call button.setSelected(true or false) to get it to show up as selected or deselected.