Day 4 – Create simple UI

In this article we will learn how to create a user interface in Android application.
We create a form that contains some UI controls such as button or textbox something like this:


from the above picture we need to create three text input , three label and two buttons. so let start

Create a new Android project

Start a new Android project in Eclipse ( see this for how to start with new project).
project name: NewWinForm
package name: com.authorcode

Create UI in main.xml

Open the main.xml file that is located in res/layout folder in your package explorer and insert the following:

<?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
        android:id="@+id/label1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@+string/Enter_Fname"/>
    <EditText
        android:id="@+id/entry1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label"/>
    <TextView
        android:id="@+id/label2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@+string/Enter_Lname"
        android:layout_below="@id/entry1"/>
    <EditText
        android:id="@+id/entry2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label2"/>
     <TextView
        android:id="@+id/label3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@+string/age"
        android:layout_below="@id/entry2"/>
    <EditText
        android:id="@+id/entry3"
        android:layout_width="100dip"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label3"/>
    <Button
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/entry3"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dip"
        android:text="@+string/ok"/>
 
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/ok"
        android:layout_alignBottom="@+id/ok"
        android:layout_marginRight="17dp"
        android:layout_toLeftOf="@+id/ok"
        android:text="Cancel" />
 
</RelativeLayout>

See the second line :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

We are using Relative layout.Relative layout gives the ability to arrange the child elements by their relative positions without using distance units. Position or location of the child elements can be described in relation to each other or to the parent.
consider the following code of lines:

    <TextView
        android:id="@+id/label1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@+string/Enter_Fname"/>
    <EditText
        android:id="@+id/entry11"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label1"/>

android:id=”@+id/entry11″
we assign the an id of the view in the layout XML file, and can be used to find specific views within the view tree. And from the above EditText element has the id with name entry1 View ID. View IDs need not be unique throughout the tree.
android:layout_height=”wrap_content”
The height is set to “wrap_content” so the button is only as big as necessary to fit the button’s text
android:layout_below=”@id/label1″
that means location of the entry1 editbox is just below to the label1 textview. we are not giving location in distance points.

Now load the main xml in source NewWinFormActivity.js java file with the help of onCreate() method.

package com.authorcode;
 
import android.app.Activity;
import android.os.Bundle;
 
public class NewWinFormActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Run the application

Run the application from Run menu. see this how to run the Android application through Eclipse Emulator