16

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

http://img31.imageshack.us/img31/115/addnew2.png

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.

3
  • 1
    Because of that reason i uses Relative Layout it provides maximum flexibility and you can change a single view according to your need.... May 25, 2012 at 8:45
  • i would suggest to use Relative Layout because it provides more flexibility. May 25, 2012 at 8:52
  • @both of you above: care to give an example?
    – null
    May 25, 2012 at 9:08

2 Answers 2

23

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>
0
3

you should also consider the gridLayout , which can be used (by using an android library) on API7+ .

here's a link: http://android-developers.blogspot.com/2011/11/new-layout-widgets-space-and-gridlayout.html

6
  • I don't think I can use it. I'm targeting minimal on android v2.2 (API 8+).
    – null
    May 25, 2012 at 9:25
  • Are you sure? When I clicked the gridlayout link you gave, I got warning message 'This class is not available with API Level 8. To use this class, your application must specify API Level "14" or higher'
    – null
    May 25, 2012 at 9:33
  • please read my entire answer : "can be used (by using an android library) on API7+ " . you can use one of android's libraries that google gives you to make it work on older devices , just like you can use fragments and action bar on API 4+ (but for the gridlayout you need API7+ for some reason) . you can see it on the sdk manager , under android support . after installing it's in the folder "...\extras\android\support\v7\gridlayout" May 25, 2012 at 9:44
  • but that message is come from official android site. Also the blog link you gave said: "Ice Cream Sandwich (ICS) sports two new widgets that have been designed to support the richer user interfaces made possible by larger displays: Space and GridLayout." ICS is Android v4 (API 14) right?
    – null
    May 25, 2012 at 9:48
  • I see. I haven't installed it as my extra folder doesn't have it. But I think I will stick to the core library atm.
    – null
    May 25, 2012 at 9:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.