Question

I want to design layout for following requirement

   |-------------------------| 
   |Image |      Text View 1 |
   | view |                  |
   |-------   <  Edit Text 2>|
   |                         |
   | <Text view 2>           |
   |                         |
   | <Edit text View 2>      |
   |                         |
   |                         |
   |   |Button view|         |
   |                         |
    --------------------------

My attempt:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent" 
    android:layout_width="fill_parent"
    android:stretchColumns="1"
    android:background="#000024">
    <TableRow android:baselineAligned="false"  android:id="@+id/tableRow1" > 

        <ImageView android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:layout_gravity="left"
            android:padding="2dip" android:src="@drawable/icon" 
        />

        <TextView android:padding="2dip" android:layout_gravity="fill_horizontal"
                  android:layout_height="wrap_content" android:layout_width="wrap_content"
                android:text="Trip Name"
         />

         <EditText android:layout_gravity="fill_horizontal"
                  android:layout_gravity="centre"
                   android:id="@+id/txtUserName" 
                   android:width="200px"
          />
    </TableRow> 

    <TableRow android:baselineAligned="false">

     <TextView android:padding="2dip" android:layout_gravity="fill_horizontal"
                android:text="Description"
      />
    </TableRow> 

    <TableRow android:baselineAligned="false"> 
      <EditText 
            android:layout_width="150px" android:id="@+id/tripDesc" 
            android:password="true" 
       />
    </TableRow>

    <TableRow android:baselineAligned="false">>
        <Button 
            android:id="@+id/buttonSave" 
            android:text="Save" />
    </TableRow>
</TableLayout>

The problem here is is coming at extreme right and 1st Edit Text gets disappeared. Also how I add some blank spaces between 2nd Edit Text and last Button

Answer 1

check this

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

<RelativeLayout android:layout_height="wrap_content"
    android:layout_width="fill_parent" android:id="@+id/relative1">
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:padding="2dip"
        android:src="@drawable/icon" android:id="@+id/imgview" />

    <TextView android:padding="2dip" android:layout_height="wrap_content"
        android:layout_width="wrap_content" android:text="Trip Name"
        android:layout_toRightOf="@id/imgview" android:id="@+id/trip_name_txt"
        android:layout_alignRight="@id/relative1" />

    <EditText android:id="@+id/txtUserName" android:layout_width="200dp"
        android:layout_height="wrap_content" android:layout_toRightOf="@id/imgview"
        android:layout_below="@id/trip_name_txt" />
</RelativeLayout>

<RelativeLayout android:layout_height="wrap_content"
    android:layout_width="fill_parent" android:id="@+id/relative2"
    android:layout_below="@id/relative1" android:layout_marginTop="10dp">
    <TextView android:layout_marginLeft="20dp"
        android:layout_marginTop="5dp" android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:text="Description"
        android:textSize="15dp" />
</RelativeLayout>
<RelativeLayout android:layout_height="wrap_content"
    android:layout_width="fill_parent" android:id="@+id/relative3"
    android:layout_below="@id/relative2" android:layout_marginTop="10dp">
    <EditText android:layout_width="150dp" android:layout_height="wrap_content"
        android:id="@+id/tripDesc" android:layout_marginLeft="20dp"
        android:password="true" />
</RelativeLayout>
<LinearLayout android:layout_height="wrap_content"
    android:layout_width="fill_parent" android:layout_below="@id/relative3"
    android:gravity="center_horizontal" android:layout_marginTop="20dp">
    <Button android:id="@+id/buttonSave" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:text="Save" />
</LinearLayout>
 </RelativeLayout>