Android input form design using TableLayout

Question

I am trying to figure out how to design the below mentioned input form. So far I have tried TableLayout to do this. bellow is my code. But failed. Please suggest me how to achieve this, any comment, code, effort would be appreciated.

         <TableLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#FF939393">
            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:background="#FF000000"
                android:layout_margin="1dp"
                android:weightSum="2">

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

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginLeft="1dp"
                    android:text="Last Name" />
            </TableRow>
            <TableRow
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:background="#FF000000"
                android:layout_margin="1dp">
                <TextView
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="Email"/>

            </TableRow>

        </TableLayout>

Why are you specifically using a `TableLayout`? After looking at your code, you actually already have what you want. The only thing missing is the Create Account TextView on top? — AL., May 03 '16 at 06:29
I am not supposed to specifically using TableLayout. I just tried to solve my problem using this. The main concern is vertical line. — IPL10, May 03 '16 at 06:51

score 0 · Answer 1 · answered May 03 '16 at 06:30

Replace your TextViews with EditTexts

     <TableLayout
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:background="#FF939393">
          <TableRow
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:background="#FF000000"
                        android:layout_margin="1dp"
                       >
          <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Create Account" />
         </TableRow>
                    <TableRow
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:background="#FF000000"
                        android:layout_margin="1dp"
                        android:weightSum="2">

                        <EditText
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:hint="First Name"/>

                        <EditText
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_marginLeft="1dp"
                            android:hint="Last Name" />
                    </TableRow>
                    <TableRow
                        android:layout_width="fill_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:background="#FF000000"
                        android:layout_margin="1dp">
                        <EditText
                            android:layout_width="fill_parent"
                            android:layout_height="wrap_content"
                            android:hint="Email"/>

                    </TableRow>

                </TableLayout>

Masum · Answer 2 · 2016-05-03T06:54:39.080

Try the following code. Its as like your image.

<?xml version="1.0" encoding="utf-8"?>
<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">

  <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FF939393">
        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="#FF000000"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            android:gravity="center"
            android:layout_margin="1dp">
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Create Account"/>

        </TableRow>
        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="#FF000000"
            android:layout_margin="1dp"

            android:weightSum="2">

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp"
                android:hint="First Name"/>
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="#FF939393"></View>

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginTop="8dp"
                android:layout_marginBottom="8dp"
                android:layout_marginLeft="1dp"
                android:hint="Last Name"
                 />
        </TableRow>
        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="#FF000000"
            android:paddingTop="8dp"
            android:paddingBottom="8dp"
            android:paddingLeft="8dp"
            android:layout_margin="1dp">
            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:hint="Email"/>

        </TableRow>

    </TableLayout>
</RelativeLayout>

Isn't the `RelativeLayout` no longer needed? – AL. May 03 '16 at 06:36 — AL., May 03 '16 at 06:36
Sir where is vertical line? That's the main concern. – IPL10 May 03 '16 at 06:46 — IPL10, May 03 '16 at 06:46

DKV · Answer 3 · 2016-05-03T06:52:52.560

Try This

<?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:orientation="vertical">


<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:text="Create Account"
    android:textSize="20sp"
    android:textStyle="bold" />


<View
    android:id="@+id/view1"
    android:layout_width="fill_parent"
    android:layout_height="2dp"
    android:layout_below="@+id/textView"
    android:background="#c0c0c0" />

<LinearLayout
    android:id="@+id/ll"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/view1"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_weight="50"
        android:hint="Name" />

    <View
        android:layout_width="1dp"
        android:layout_height="fill_parent"
        android:background="#c0c0c0" />

    <EditText
        android:id="@+id/editText2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_weight="50"
        android:hint="Name2" />
</LinearLayout>


<View
    android:id="@+id/view2"
    android:layout_width="fill_parent"
    android:layout_height="2dp"
    android:layout_below="@+id/ll"

    android:background="#c0c0c0" />


<EditText
    android:id="@+id/editText3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/view2"
    android:layout_margin="5dp"
    android:hint="Email"
    android:inputType="textEmailAddress" />

score 0 · Answer 4 · answered May 03 '16 at 06:43

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

  <LinearLayout android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:padding="10dp">
    <TextView android:layout_width="match_parent" android:gravity="center_horizontal"
        android:layout_height="wrap_content" android:text="Create Account"/>
  </LinearLayout>
  <LinearLayout android:layout_width="match_parent"
      android:padding="10dp"
      android:weightSum="2"
      android:layout_height="wrap_content" android:orientation="horizontal">
    <TextView android:layout_width="0dp" android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_weight="1"
        android:text="First Name"/>
    <TextView android:layout_width="0dp" android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center_horizontal"
        android:text="Last Name"/>
  </LinearLayout>

  <LinearLayout android:layout_width="match_parent"
      android:padding="10dp"
      android:layout_height="wrap_content">
    <TextView android:layout_width="match_parent" android:layout_height="wrap_content"
        android:text="Email address"/>
  </LinearLayout>
</LinearLayout>

Sir where is vertical line. The main concern is the vertical line. — IPL10, May 03 '16 at 06:54
you cant expect the same ui from the forum.. have given the basic layout , you add border to it.. check this http://stackoverflow.com/a/15111469/1066839 — John, May 03 '16 at 10:25

Jay Rathod RJ · Answer 5 · 2016-05-03T07:09:10.253

Try this code.

Note: Change Background Color as you Want

This also contains Vertical and Horizontal Lines in it.

<?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:background="#FFFFFF">

    <TextView
        android:id="@+id/tvAccount"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:gravity="center"
        android:text="@string/account"
        android:textSize="25sp" />

    <View
        android:id="@+id/separator"
        android:layout_width="fill_parent"
        android:layout_height="1dip"
        android:layout_below="@+id/tvAccount"
        android:layout_centerVertical="true"
        android:background="#000000" />


    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/separator">


        <TableRow
            android:id="@+id/row1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="#FFFFFF"
            android:orientation="horizontal"
            android:weightSum="2">

            <EditText
                android:id="@+id/edtFirstName"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="@string/first_name"
                android:text="@string/first_name"
                android:textColorHint="#0000000" />

            <View
                android:layout_width="0.5dp"
                android:layout_height="35dp"
                android:background="#000000" />

            <EditText
                android:id="@+id/edtLastName"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="@string/last_name"
                android:text="@string/last_name"
                android:textColorHint="#FFFFFF" />


        </TableRow>

        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_margin="1dp"
            android:background="#FFFFFF"
            android:orientation="horizontal"
            android:weightSum="1">


            <EditText
                android:id="@+id/edtEmail"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:hint="@string/email"
                android:inputType="textEmailAddress"
                android:text="@string/email"
                android:textColorHint="#000000" />

        </TableRow>

    </TableLayout>


</RelativeLayout>

Here is Screen Shot.

@ jaydroider thanks for your effort but vertical line is not placed as it should be. — IPL10, May 03 '16 at 07:01
@IPL check i have edited xml code. let me know it is working or not. — Jay Rathod RJ, May 03 '16 at 07:10
@IPL Appreciate answer by upvote if it is helpful to you thanks :). — Jay Rathod RJ, May 03 '16 at 08:19

score 0 · Accepted Answer · answered May 03 '16 at 07:38

Finally I find a way to achieve from above suggestions. Below is mentioned working code.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="#FF000000">

<ScrollView
    android:id="@+id/scroll_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fillViewport="true">
    <LinearLayout
        android:id="@+id/myLayout"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fillViewport="true">

        <TextView
            android:id="@+id/bodytext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Create Account"
            android:textColor="@color/colorGrayText"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="22sp"/>

        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="#E8393939"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"/>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            android:weightSum="2"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp">

            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.99"
                android:background="@android:color/transparent"
                android:layout_gravity="center"
                android:paddingLeft="5dp"
                android:hint="First Name"/>
            <View
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_weight="0.01"
                android:background="#E8393939"/>
            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:layout_gravity="center"
                android:paddingLeft="5dp"
                android:hint="Last Name"/>

        </LinearLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="#E8393939"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"/>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp">

            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:layout_gravity="center"
                android:paddingLeft="5dp"
                android:hint="Email Address"/>
        </LinearLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="#E8393939"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"/>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp">

            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:layout_gravity="center"
                android:paddingLeft="5dp"
                android:hint="Job Title/Business Title"/>
        </LinearLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="#E8393939"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"/>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp">

            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                android:layout_gravity="center"
                android:paddingLeft="5dp"
                android:hint="Department"/>
        </LinearLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="#E8393939"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"/>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:orientation="horizontal"
            android:weightSum="2"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.3"
                android:background="@android:color/transparent"
                android:layout_gravity="center"
                android:paddingLeft="5dp"
                android:text="+91"/>
            <View
                android:layout_width="0dp"
                android:layout_height="50dp"
                android:layout_weight="0.01"
                android:background="#E8393939"/>
            <EditText
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1.4"
                android:background="@android:color/transparent"
                android:layout_gravity="center"
                android:paddingLeft="5dp"
                android:hint="Phone number(Optional)"/>

        </LinearLayout>
        <View
            android:layout_width="fill_parent"
            android:layout_height="1dp"
            android:background="#E8393939"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"/>

    </LinearLayout>
  </ScrollView>
</RelativeLayout>

Android input form design using TableLayout

6 Answers6