How to create a neat two-columns input form in Android?

Question

I want to create a neat two-columns input form like this:

My xml layout code so far:

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

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblTitle" />

        <EditText
            android:id="@+id/txtTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblAuthor" />

        <EditText
            android:id="@+id/txtAuthor"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblPublisher" />

        <EditText
            android:id="@+id/txtPublisher"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblIsbn" />

        <EditText
            android:id="@+id/txtIsbn"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

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

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25" />

        <Button
            android:id="@+id/btnSubmit"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.375"
            android:text="@string/submit" />

        <Button
            android:id="@+id/btnCancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.375"
            android:text="@string/cancel" />
    </LinearLayout>

</LinearLayout>

You can see that I used LinearLayout utilizing layout_weight & layout_width="0dp" trick to make the two columns division looks neat. In HTML code, we can use with % width size. But in android xml layout, there is no %-value for layout_width. I want to avoid hardcoded dp-values for column width. Is it possible in android?

So far that's the best I can do. Now I want to resize the ISBN textbox to become smaller (50% size less from the current size). But I cannot resize the textbox width since layout_width must be "0dp" for layout_weight to work. I also want to do the same with the Submit and Cancel button size.

I wonder if using LinearLayout is a correct way to create input form neatly in android. Could TableLayout better for this? I heard that you cannot change child view's layout_width in TableLayout.

There are some people here recommend me using RelativeLayout, I tried it but it doesn't support layout_weight.

Answer 1

Alright, I found out the way with LinearLayout. The trick is by wrapping the Views that you want to resize with LinearLayout. Then the width of View itself can be adjusted by using: android:layout_width or android:ems property.

Here is the xml code:

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

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblTitle" />

        <EditText
            android:id="@+id/txtTitle"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblAuthor" />

        <EditText
            android:id="@+id/txtAuthor"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25"
            android:text="@string/lblPublisher" />

        <EditText
            android:id="@+id/txtPublisher"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:ems="10" />
    </LinearLayout>

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

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight="0.25"
            android:text="@string/lblIsbn" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:orientation="horizontal" >

            <EditText
                android:id="@+id/txtIsbn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="5" />
        </LinearLayout>
    </LinearLayout>

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

        <View
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.25" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.75"
            android:orientation="horizontal" >

            <Button
                android:id="@+id/btnSubmit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="5"
                android:text="@string/submit" />

            <Button
                android:id="@+id/btnCancel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="5"
                android:text="@string/cancel" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>