Creating User interface

User interface in Android Platform just like other Java based user interface in common. We can create User Interface from the scratch with Java code, or Using XML that come with Android. Everytime we create Android Project whether from command line using ActivityCreator or Using Android Plugins on Eclipse we have some directory result. One of them is res directory. Res directory contains layout and value subdirectory. The XML that govern the User Interface located in these subdirectories at most.

Some Definition about the layout we place at layout subdirectory, the value refers in the layout placed in value subdirectory. let's start with the main.xml located in layout directory. Main.xml contains main definition of layout. below sample of main.xml

<?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="134sp"
android:layout_height="80sp"
android:text="Label 1"
/>
<EditText id="@+id/objTxt1"
android:layout_width="134sp"
android:layout_height="134sp"
android:layout_alignTop="@id/objLbl1"
android:layout_toRight="@id/objLbl1"
android:text=""
/>
<Button id="@+id/objBtn1"
android:layout_width="134sp"
android:layout_height="24sp"
android:layout_below="@id/objTxt1"
android:layout_toRight="@id/objLbl1"
android:text="Btn 1"
/>
</RelativeLayout>

RelativeLayout is a layout with each object inside is placed relative to others. Maybe below, right, align top, align bottom to other object. There are many Layout but we study this first. There are 3 attributes at least, to define this layout, xmlns:android, android:layout_width and android:layout_height.

xmlns:android is for identification that this xml is used for android, not for other function, android:layout_width and android:layout_height is to specify the dimension. it can be fill_parent, wrap_content, or just spesify the dimension with number followed by unit of measurement.

Unit of measurement supported by android (from the documentation) can be :

px
Pixels - corresponds to actual pixels on the screen.

in
Inches - based on the physical size of the screen.

mm
Millimeters - based on the physical size of the screen.

pt
Points - 1/72 of an inch based on the physical size of the screen.

dp
Density-independent Pixels - an abstract unit that is based on the physical density of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel on a 160 dpi screen. The ration of dp-to-pixel will change with the screen density, but not necessarily directly; instead the ratio is selected is something that is close to the screen.

sp
Scale-independent Pixels - this is like the dp unit, but it is also scaled by the user's font size preference. It is recommend you use this unit when specifying font sizes, so they will be adjusted for both the screen density and user's preference.

There are many object that can be created. but we focus on Label, EditText, And Button, because these three objects is used frequently.

Label is declared with tag <TextView />. Some attributes can be set to this object, but we can just used id, the dimension, text attribute, and relative position to others like align with other, right from other, and below from other. Id is used to identify this label. In this example, Label is placed first, so others will refer it with its id

EditText is declared with tag <EditText />. Attributes used in this example is just like label but with position relative to the label. Its relative position is to the right from label.

Button is declared with tag <Button />. Attributes used in this example is just like edittext but with position relative to edittext and label. Its relative position is below from the edittext and right after label.