Introduction to TableLayout and Concept of Intent

Hello all, I am again here to write something about android app development. So as you know this tutorial is fully concentrates upon the enterprise development that's why i am giving stress on forms and enterprise related development stuffs.

                                     So today we will learn about TableLayout and Intent. TableLayout is just a collection of rows in which the view (or view group) can be placed quickly and time a lot of time can be saved. However we can design the same layout using combination of LinearLayout in vertical and horizontal manner (And we will be doing it in some next few tutorials).But that will consume more time.

                      

So Now I am going to create a project Registration form with  Activity Class name Form.java and Layout activity_form.xml.

The tags of xml file will looks like-

<TableLayout 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:orientation="vertical" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Register Here" />

    <TableRow>

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="*Name:" />

        <EditText

            android:id="@+id/etName"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:ems="10" >

            <requestFocus />

        </EditText>

    </TableRow>

    <TableRow>

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="*Email:" />

        <EditText

            android:id="@+id/etMail"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:ems="10"

            android:inputType="textEmailAddress" >

        </EditText>

    </TableRow>

    <TableRow>

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Alternate E_mail:" />

        <EditText

            android:id="@+id/etAtmail"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:ems="10"

            android:inputType="textEmailAddress" />

    </TableRow>

    <TableRow

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:weightSum="1" >

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Your Phone:" />

        <EditText

            android:id="@+id/etCcode"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="0.20"

            android:ems="10"

            android:inputType="phone" />

        <EditText

            android:id="@+id/etCityCode"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="0.30"

            android:ems="10"

            android:inputType="phone" />

        <EditText

            android:id="@+id/etPhonNo"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="0.50"

            android:ems="10"

            android:inputType="phone" />

    </TableRow>

    <TableRow>

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Mobile phone:" />

        <EditText

            android:id="@+id/etMobilePhone"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="0.20"

            android:ems="10"

            android:inputType="phone" />

    </TableRow>

    <TableRow

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" >

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="*Adderess:" />

        <EditText

            android:id="@+id/etAdderess"

            android:layout_width="1dp"

            android:layout_height="100dp"

            android:layout_weight="1"

            android:ems="10" >

        </EditText>

    </TableRow>

    <TableRow>

        <TextView

           

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="*Country" />

        <Spinner

            android:id="@+id/spnCountry"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1" />

    </TableRow>

    <TableRow>

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="*Paasword" />

        <EditText

            android:id="@+id/etPassword"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:ems="10"

            android:inputType="textPassword" />

    </TableRow>

    <TableRow

      

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" >

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="*Repassword" />

        <EditText

            android:id="@+id/etRepassword"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:ems="10"

            android:inputType="textPassword" />

    </TableRow>

    <TableRow

        android:layout_width="wrap_content"

        android:layout_height="wrap_content" >

        <CheckBox

            android:id="@+id/checkBox1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="I accept the" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Terms of Use"

            android:textColor="#0000ff"

            android:textSize="20dp" />

    </TableRow>

    <TableRow>

        <TextView

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight=".5"

            android:text=" " />

        <Button

            android:id="@+id/bSubmit"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight=".5"

            android:text="Submit" />

    </TableRow>

</TableLayout>

You can use drag and drop if you are using Eclipse IDE for quick design.

Now you can notice here the row tag inside the table layout looks like.

<TableRow>

//What ever you put here will be appear in a horizontal row

 </TableRow>

You can also add some attributes to the TableRow tags like height and width used in the example. 

Now go to your activity class and make reference  to these elements using findViewById() method.

The java class will look like-

package com.thenewtechnoworld.registrationform;

import android.os.Bundle;

import android.app.Activity;

import android.content.Intent;

import android.view.Menu;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.ArrayAdapter;

import android.widget.Button;

import android.widget.CheckBox;

import android.widget.EditText;

import android.widget.Spinner;

import android.widget.TextView;

import android.widget.Toast;

public class Form extends Activity implements OnClickListener {

Spinner Country;

CheckBox Terms;

EditText Name, Mail, Atmail, Ccode, Citycode, PhonNo, MobileNo, Adderess,

Password, Repassword;

Button Display, Submit;

TextView Show;

String[] counopt = { "India", "Australia", "Other" };

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_form);

Country = (Spinner) findViewById(R.id.spnCountry);

Terms = (CheckBox) findViewById(R.id.checkBox1);

Name = (EditText) findViewById(R.id.etName);

Mail = (EditText) findViewById(R.id.etMail);

Atmail = (EditText) findViewById(R.id.etAtmail);

Ccode = (EditText) findViewById(R.id.etCcode);

Citycode = (EditText) findViewById(R.id.etCityCode);

PhonNo = (EditText) findViewById(R.id.etPhonNo);

MobileNo = (EditText) findViewById(R.id.etMobilePhone);

Adderess = (EditText) findViewById(R.id.etAdderess);

Password = (EditText) findViewById(R.id.etPassword);

Repassword = (EditText) findViewById(R.id.etRepassword);

Submit = (Button) findViewById(R.id.bSubmit);

ArrayAdapter<String> adepter = new ArrayAdapter<String>(this,

android.R.layout.simple_spinner_item, counopt);

adepter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

Country.setAdapter(adepter);

Submit.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.activity_form, menu);

return true;

}

@Override

public void onClick(View arg0) {

// TODO Auto-generated method stub

//Validation if form is filled correctly

if (Name.getText().length() > 0 && Mail.getText().length() > 0

&& Adderess.getText().length() > 0

&& Password.getText().length() > 0

&& Repassword.getText().length() > 0 && Terms.isChecked()) {

//Starting new activity using Intant

Intent intent = new Intent(this, Submit.class);

startActivity(intent);

} else

Toast.makeText(this, "Mondatory field cannot be left blank!",

Toast.LENGTH_LONG).show();

}

}

At this stage you will get some error because u haven't  yet created the Java class Submit.jave.
So right click on your project >New>Other>Android Activity. and create an activity with the name Submit.Now go to the res>layout and select activity_submit.xml.
Add a text view and set the text  "You Are Successfully Registered !" 

now  finished..Your projct will look like this if ou run.

Notice the line

 Intent intent = new Intent(this, Submit.class);

startActivity(intent);

In android Intents are use for message passing from one activity to another .Here Intent is just carrying the message to start the new activity.We can also put some information on this intent which can be used by the class Submit.java. But we will use it next tutorial.
 Now filll the form.If you left a *  field blank then the next activity will not be start. Here you can notice the If condition above the Intent passing-

if (Name.getText().length() > 0 && Mail.getText().length() > 0

&& Adderess.getText().length() > 0

&& Password.getText().length() > 0

&& Repassword.getText().length() > 0 && Terms.isChecked()) 

How ever i am not using here further validation  like password match and email format .You can extend this project to that.

 

Now Hit submit.You will see the next activity's layout as out put.

Thank You for joining this tutorial..
Again i remember , you can download complete Project here But....... ;-)