Friday, 9 November 2012

How to create a simple form in ANDROID


This is the first tutorial showing how to make a simple form in android.Lets look at here,what are the basic steps to create a form.While this application is silly one and you can do much bigger than this.So lets start with it.

STEP BY STEP

1.MODIFYING THE LAYOUT

Normally the android main.xml file will looks like in the bellow.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
</LinearLayout>



The Graphical Layout of the above code will be the same in the result of Hello World Program.


 Change the layout by drag and drop EditText and TextView.The step by step operation is explained through the bellow figures.


The Graphical Layout is shown bellow.
The main.xml is taken from
HelloWorld--->res-->layout-->main.xml

  • Then from the Form Widget,drag and drop a Text View of large into the layout.
  • The Text View is of Large,Medium and small.
2.After that select a Plain Text from Text Fields.


3.Repeat the step 1 & 2.



4.Then the Layout will be like in the figure bellow.




Here the graphical layout will show TextView and Button with default values such as Large and Button.

So we need to change according to our needs.So taking main.xml bu clicking the main.xml tab near to Graphical Layout.We will get the bellow code.


<?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" >

<TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Large Text"
     android:textAppearance="?android:attr/textAppearanceLarge" />


<EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

<TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Large Text"
       android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
        <requestFocus />
</EditText>

<Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />
   
</LinearLayout>


  So we need to customise according to our need.

  1. Changing the first Text View text by android:text="Name" 
  2. Changing the second Text View text by android:text="Address".
  3. After that we change the button text by "Save"

After all the following steps the main.xml code will like in given bellow.

<?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" >

<TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Name:"
       android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

<TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Address"
      android:textAppearance="?android:attr/textAppearanceLarge" />

<EditText
        android:id="@+id/editText2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

<requestFocus />
</EditText>

<Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Save" />
   
</LinearLayout>

5.RUNNING THE APPLICATION

For running the above application,save the all settings.Then by right click in the android project folder in the project explorer.

Run as-->Android Application

If any new AVD Manager prompt appear.Then create a new AVD manager.


The result is shown bellow.



In this tutorial we have only the display of Graphical layout in our emulator in Eclipse.So in the coming tutorials we will continue to upgrade the knowledge.


" Please mention your comments and feedback "

3 comments:

Roney Joseph said...

Wow the designing is so simple

Anonymous said...

nice work

Anonymous said...

BOOKMARKED YOUR BLOG