Layouting Component Choices

Component Arrangement on Android is simple and we have more than one way to make the same design screen. we can use RelativeLayout, LinearLayout, or other layout. And we can combine two or more layout into one design screen.

For example, we want to desain screen as the image below:


The design screen can be expressed as below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView id="@+id/objLbl1"
android:layout_width="80sp"
android:layout_height="24sp"
android:text="Code"
/>
<EditText id="@+id/objTxt1"
android:layout_width="134sp"
android:layout_height="24sp"
android:layout_alignTop="@id/objLbl1"
android:layout_toRight="@id/objLbl1"
android:text="Edit 1"
android:singleLine="True"
/>
<TextView id="@+id/objLbl2"
android:layout_width="80sp"
android:layout_height="24sp"
android:layout_below="@id/objTxt1"
android:text="Name"
/>
<EditText id="@+id/objTxt2"
android:layout_width="134sp"
android:layout_height="24sp"
android:layout_alignTop="@id/objLbl2"
android:layout_below="@id/objTxt1"
android:layout_toRight="@id/objLbl1"
android:text="Edit 2"
android:singleLine="True"
/>
<Button id="@+id/objBtn1"
android:layout_width="80sp"
android:layout_height="24sp"
android:layout_below="@id/objTxt2"
android:text="Save"
/>
</RelativeLayout>

Or, your can replace with xml below:

<?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="fill_parent"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView id="@+id/objLbl1"
android:layout_width="80sp"
android:layout_height="24sp"
android:text="Code"
/>
<EditText id="@+id/objTxt1"
android:layout_width="134sp"
android:layout_height="24sp"
android:text="Edit 1"
android:singleLine="True"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<TextView id="@+id/objLbl2"
android:layout_width="80sp"
android:layout_height="24sp"
android:layout_below="@id/objTxt1"
android:text="Name"
/>
<EditText id="@+id/objTxt2"
android:layout_width="134sp"
android:layout_height="24sp"
android:text="Edit 2"
android:singleLine="True"
/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>

<Button id="@+id/objBtn1"
android:layout_width="80sp"
android:layout_height="24sp"
android:text="Save"
/>
</LinearLayout>
</LinearLayout>

Ok, have a nice try!

---

Do you want to learn more ?
Learning with sample code ?
Learning by Doing ?
Just Visit http://learncodes.googlepages.com/
and there is Android UI Design at there.