Android Layout with Radiobuttons and Edittexts

Question

I'm having a bit of trouble with an Android layout I'm currently trying to create. Something along the lines of this. (The editboxes need to be aligned with the radio buttons, yes.) The problem is that when I actually run this on a phone, it doesn't align up.

Should look something like:

Currently looks like:

The XML for this is below.

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top" >

<RadioGroup
    android:id="@+id/radioGroup1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="34dp"
    android:layout_marginTop="32dp" >

    <RadioButton
        android:id="@+id/radio0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true" />

    <RadioButton
        android:id="@+id/radio1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp" />

    <RadioButton
        android:id="@+id/radio2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/radio1"
        android:layout_below="@+id/radio1"
        android:layout_marginTop="20dp" />

    <RadioButton
        android:id="@+id/radio3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/radio2"
        android:layout_below="@+id/radio2"
        android:layout_marginTop="20dp" />

    <RadioButton
        android:id="@+id/radio4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/radio3"
        android:layout_below="@+id/radio3"
        android:layout_marginTop="20dp" />

    <RadioButton
        android:id="@+id/radio5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/radio4"
        android:layout_below="@+id/radio4"
        android:layout_marginTop="20dp" />
</RadioGroup>

<EditText
    android:id="@+id/editText1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/radioGroup1"
    android:layout_toRightOf="@+id/radioGroup1"
    android:ems="10" >

    <requestFocus />
</EditText>

<EditText
    android:id="@+id/editText2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/editText1"
    android:layout_below="@+id/editText1"
    android:layout_marginTop="15dp"
    android:ems="10" />

<EditText
    android:id="@+id/editText3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/editText2"
    android:layout_below="@+id/editText2"
    android:layout_marginTop="15dp"
    android:ems="10" />

<EditText
    android:id="@+id/editText4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/editText3"
    android:layout_below="@+id/editText3"
    android:layout_marginTop="15dp"
    android:ems="10" />

<EditText
    android:id="@+id/editText5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/editText4"
    android:layout_below="@+id/editText4"
    android:layout_marginTop="15dp"
    android:ems="10" />

<EditText
    android:id="@+id/editText6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/radioGroup1"
    android:layout_alignLeft="@+id/editText5"
    android:ems="10" />

</RelativeLayout>

Answer 1

Try setting some equal heght for all the RadioButton and EditText instead of wrap_content

 android:layout_height="30dp"

If you feels this is not accurate, I would suggest to create a custom item with RadioButton and EditText

Answer 2

// try this way,hope this will help you...

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="top|center_horizontal" >


    <RadioButton
        android:id="@+id/radio0"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="32dp"
        android:layout_marginLeft="20dp"
        android:checked="true" />

    <RadioButton
        android:id="@+id/radio1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/radio0"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"/>

    <RadioButton
        android:id="@+id/radio2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/radio1"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"/>

    <RadioButton
        android:id="@+id/radio3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/radio2"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"/>

    <RadioButton
        android:id="@+id/radio4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/radio3"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"/>

    <RadioButton
        android:id="@+id/radio5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/radio4"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="20dp"/>

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/radio0"
        android:layout_toRightOf="@id/radio0"
        android:layout_marginLeft="10dp"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/radio1"
        android:layout_toRightOf="@id/radio1"
        android:layout_marginLeft="10dp"
        android:ems="10" />

    <EditText
        android:id="@+id/editText3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/radio2"
        android:layout_toRightOf="@id/radio2"
        android:layout_marginLeft="10dp"
        android:ems="10" />

    <EditText
        android:id="@+id/editText4"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/radio3"
        android:layout_toRightOf="@id/radio3"
        android:layout_marginLeft="10dp"
        android:ems="10" />

    <EditText
        android:id="@+id/editText5"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/radio4"
        android:layout_toRightOf="@id/radio4"
        android:layout_marginLeft="10dp"
        android:ems="10" />

    <EditText
        android:id="@+id/editText6"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/radio5"
        android:layout_toRightOf="@id/radio5"
        android:layout_marginLeft="10dp"
        android:ems="10" />

</RelativeLayout>

Answer 3

There are two things which I would suggest.

• You have different margingTop for EditText and its corresponding RadioButton. Either remove it or make it same.

• RadioGroup is actually a LinearLayout. So, it doesn't take android:layout_alignLeft and android:layout_below . You can place a RadioButton directly in a RelativeLayout beside a EditText without RadioGroup but would have to handle the toggling in code.