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.

Android User Interface Designer (2)

Android User Interface Designer that i 've write before has been released. You can download and try it. This code can be download at SourceForge.Net and can be download and Files.

Just Try it and enjoy it!

Android User Interface Designer

Just want to design User Interface easily, I have created Android User Interface Designer. In the first version, I have included Label, EditText, and Button Object. Later, Other object will be included. Other Object will be included in the next version.

Each Object packed with minimal property, and layout with RelativeLayout. Just to make it easy for beginner, and to simplify coding. The next version will include more property.

Layout used in this version is RelativeLayout with its hight and width specified as "fill_parent". That means, this layout will covers all screen.

Each Object packed with attribute: height, width in ps, and text. MultiLine specified for EditText only.

If you are interested on trying this program, please see on http://files.pemikiran.com whenever it is ready to download. And I plan to publish the tool at Sourceforge.Net.