Designing a simple form in android

A Form is used to interact with the user. To design a form we will have to start with the various elements of a form. Consider a Registration form where we get user details, validate it and register with our service. We use basic details like username,password and contact number. To design such a form we will have to use the following views or elements:

  • TextView(label) which can be used to display plain text
  • EditText(TextBox) which are used to get values from the user
  • Spinners(Drop-down listbox) for selecting an option from the list
  • Button to call a function or event
  • RadioButton, CheckBox for selecting options

Here is a sample register form:

register-form

Here is the code for the above form:

<RelativeLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TextView
android:id="@+id/textView_enter_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="15dp"
android:textSize="18sp"
android:text="@string/enter_name" />

<EditText
android:id="@+id/editText_enter_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView_enter_name"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="5dp"
android:inputType="text"
android:textSize="17sp"
android:ems="10" >

<requestFocus />
</EditText>

<TextView
android:id="@+id/textView_enter_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/editText_enter_name"
android:layout_marginLeft="20dp"
android:layout_marginTop="15dp"
android:textSize="18sp"
android:text="@string/enter_user_name" />

<EditText
android:id="@+id/editText_enter_username"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView_enter_username"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="5dp"
android:inputType="text"
android:textSize="17sp"
android:ems="10" >
</EditText>

<TextView
android:id="@+id/textView_enter_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/editText_enter_username"
android:layout_marginLeft="20dp"
android:layout_marginTop="15dp"
android:textSize="18sp"
android:text="@string/enter_password" />

<EditText
android:id="@+id/editText_enter_password"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView_enter_password"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="5dp"
android:inputType="textPassword"
android:textSize="17sp"
android:ems="10" >
</EditText>

<TextView
android:id="@+id/textView_enter_rpassword"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/editText_enter_password"
android:layout_marginLeft="20dp"
android:layout_marginTop="15dp"
android:textSize="18sp"
android:text="@string/enter_rpassword" />

<EditText
android:id="@+id/editText_enter_rpassword"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@+id/textView_enter_rpassword"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="5dp"
android:inputType="textPassword"
android:textSize="17sp"
android:ems="10" >
</EditText>

<Button
android:id="@+id/button_register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/editText_enter_rpassword"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:text="@string/register" />

</RelativeLayout>

There are various attributes that we are dealing with.The text size,color and style can be altered for each of the views.The <TextView></TextView> tag is used to define a label or textview. The various attributes used to format text are:

android:text="[Enter text here]"

android:textSize="[font size in sp]"

android:textColor="[hex-code or 
pre-defined android color using @android:color/(color-name)]"

android:textStyle="[specify normal bold  italics]"android:typeface="[pre-defined font]"

The text value set to the TextView can be specified directly within double quotes, but it is highly recommended to reference it form strings.xml. The strings.xml consists of all the strings or text within the app and any change made here is reflected throughout the app.

These are the same with EditTexts or TextBoxes. In addition you must also specify the input type as either plain text or password or a phone number etc.

Note: “We are using Relative Layout here!”

So it is really important to specify the view id as each item is relative to the other. Any change in id after positioning can cause other dependent views to disappear or stick to the top of the screen. This is because we are positioning relative as in android:layout_below=”some_id”. If this id changes or doesn’t exist then it causes the view to disappear. It is very crucial that we change it everywhere in the layout.

In addition to view position there is one very important role played by android:id attribute. The id identifies each view uniquely and this is used in java classes to refer the various elements. It is also the responsibility of the developer to avoid naming conflicts and use unique identifiers for each view.

Reading Input from Forms:

Here is a simple activity to handle the form. An activity is created by default. We need to define the form elements and reference it.

main-activity

TextView textView_name,textView_password,
         textView_username,textView_repeat_password;
EditText editText_name,editText_password,
         editText_username,editText_repeat_password;
Button button_register;

form-elements

Import form elements (press Ctrl+Shift+O to import).

Referencing Views & Set OnClickListener:

textView_name=(TextView) findViewById(R.id.textView_enter_name);
textView_username=(TextView) findViewById(R.id.textView_enter_username);
textView_password=(TextView) findViewById(R.id.textView_enter_password);
textView_repeat_password=(TextView) findViewById(R.id.textView_enter_rpassword);

editText_name=(EditText) findViewById(R.id.editText_enter_name);
editText_username=(EditText) findViewById(R.id.editText_enter_username);
editText_password=(EditText) findViewById(R.id.editText_enter_password);
editText_repeat_password=(EditText) findViewById(R.id.editText_enter_rpassword);

button_register=(Button) findViewById(R.id.button_register);

The id provided should be same as provided in the layout.

onclicklistenerTo handle button click we use button,setOnClickListener(listener).

button_register.setOnClickListener(new OnClickListener(){
   @Override
   public void onClick(View arg0) {

   }
});

Here is a better way to implement OnClick event.

button_register.setOnClickListener(this);

@Override
public void onClick(View arg0) {
}

All we need to do is to let the Class implement OnClickListener.

public class MainActivity extends Activity implements OnClickListener

implement-onclick

To handle OnClick for multiple buttons we can switch between different ids.And don’t forget to include break statement.

@Override
public void onClick(View arg0) {
switch(arg0.getId())
{
  case R.id.button_register:
  break;
}

Here is the complete code to handle register form.

package com.example.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity implements OnClickListener {

    TextView textView_name,textView_password,textView_username,textView_repeat_password;
    EditText editText_name,editText_password,editText_username,editText_repeat_password;
    Button button_register;
    String username="",name="",password="",repeat_password="";
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        textView_name=(TextView) findViewById(R.id.textView_enter_name);
        textView_username=(TextView) findViewById(R.id.textView_enter_username);
        textView_password=(TextView) findViewById(R.id.textView_enter_password);
        textView_repeat_password=(TextView) findViewById(R.id.textView_enter_rpassword);
        
        editText_name=(EditText) findViewById(R.id.editText_enter_name);
        editText_username=(EditText) findViewById(R.id.editText_enter_username);
        editText_password=(EditText) findViewById(R.id.editText_enter_password);
        editText_repeat_password=(EditText) findViewById(R.id.editText_enter_rpassword);
        
        button_register=(Button) findViewById(R.id.button_register);
        button_register.setOnClickListener(this);
    }
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public void onClick(View arg0) {
    switch(arg0.getId())
    {
        case R.id.button_register:
	//Get Input From EditText
	name=editText_name.getText().toString().trim();
	username=editText_username.getText().toString().trim();
	password=editText_password.getText().toString();
	repeat_password=editText_repeat_password.getText().toString();
				
	//Validate the Input
	if(name.length()>0 && username.length()>0 && password.length()>0 && repeat_password.length()>0){
	         if(password.equals(repeat_password))
	         {
		     //Do Registration here
		 }
		 else
		 {
		     Toast.makeText(getApplicationContext(), "Oops! Something Went Wrong!", 					                  
						Toast.LENGTH_SHORT).show();
                 }
	 }
				
	break;
   }
}
}

OnClick we get text from editText convert toString() and trim() it.trim() is used to remove extra spaces at the beginning and end of the string. If the length is greater than 0 it is not empty and valid. We can register with server here. Otherwise we Toast an error message. Toast notifications are nothing but popups to display messages.

Voila! That’s your simple registration form.

About these ads

One thought on “Designing a simple form in android

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s