Search code examples
javaandroideclipselayoutui-design

Android form based layout

Am trying to achieve the below layout on Android (Target API 18, min API 8) enter image description here

Am relatively new to Android & came up with below layout file (activity_main.xml). I know a bit about Linear versus Relative layout and would highly appreciate if anyone can provide some input in this direction.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/task_name"
    android:textSize="14sp" />

<EditText
    android:id="@+id/editText1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignTop="@+id/textView1"
    android:ems="10"
    android:hint="@string/task_name_hint"
    android:inputType="text" />

<DatePicker
    android:id="@+id/dpResult"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/textView1"
    android:layout_marginTop="8dp" />

<RadioGroup
    android:id="@+id/priority_radios"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/dpResult"
    android:inputType="text"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/first_radio" />

    <RadioButton
        android:id="@+id/second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/second_radio"/>


    <RadioButton
        android:id="@+id/third"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/third_radio" />

<RadioButton
    android:id="@+id/none"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/none_radio" 
    android:checked="true" />

</RadioGroup>


<RadioGroup
    android:id="@+id/category_radios"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/priority_radios"
    android:inputType="text"
    android:orientation="horizontal" >

    <RadioButton
        android:id="@+id/long_category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/first_radio" />

    <RadioButton
        android:id="@+id/short_category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/second_radio"/>


    <RadioButton
        android:id="@+id/new_category"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/third_radio" />


</RadioGroup>

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/tag_name"
    android:textSize="14sp" />

<Spinner
    android:id="@+id/spinner1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:entries="@array/tag_arrays"
    android:prompt="@string/tag_prompt" 
    android:layout_below="@id/category_radios" 
    android:layout_toRightOf="@id/textView2" />

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/spinner1"
    android:text="@string/create_task" />

</RelativeLayout>
Solution

  • It seems a fairly easily layout. You can use a vertical parent linearlayout, and then several horizontal linearlayout for each row.

    <?xml version="1.0" encoding="utf-8"?>
<!-- PARENT LAYOUT -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<LinearLayout
    android:id="@+id/line1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Task name"/>

    <EditText android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Enter task name"/>
</LinearLayout>

<LinearLayout android:id="@+id/line2"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <!-- SECOND LINE -->

</LinearLayout>

<LinearLayout android:id="@+id/line3"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <!-- THIRD LINE -->
</LinearLayout>