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....... ;-)

Spinner CheckBox RadioButton and Introduction to RelativeLayout and Toast

To day we will explore some more form stuffs viz.CheckBox, RadioButton and Spinner.
RelativeLayout and Toast will also be introduced.


Form stuff become much important when you move towards enterprise  development.In previous example simple widget textview buttons and edit text were explained but the complete setup of a form requares  lots of widgets like progress bar rating bar switch etc.Gradually we will learn all stuff.

This tutorial website is full focused on enterprise development so we will be less concern about graphics like stuff.



So now you are familiar with project and class set up.
Just put this code in your xml file.


<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"
    tools:context=".FormStuffs" >

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Complete The Details:" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/textView2"
        android:layout_marginTop="16dp"
        android:text="Nationality" />

    <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/spnNationality"
        android:layout_toRightOf="@+id/textView1"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/radMale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Male" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Female" />
    </RadioGroup>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignTop="@+id/radioGroup1"
        android:text="I am" />

    <Spinner
        android:id="@+id/spnNationality"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/textView1" />

    <CheckBox
        android:id="@+id/cbTerms"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/radioGroup1"
        android:layout_toRightOf="@+id/textView1"
        android:text="Accept Terms and conditions" />

    <Button
        android:id="@+id/bSubmit"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/cbTerms"
        android:text="Submit" />

    <TextView
        android:id="@+id/tvShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/bSubmit"
        android:text="" />

</RelativeLayout>



And in class file copy and paste this code-



package com.thenewtechnoworld.android;

import android.os.Bundle;
import android.app.Activity;
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.RadioButton;
import android.widget.Spinner;
import android.widget.TextView;
import android.widget.Toast;

public class FormStuffs extends Activity {
Spinner nationality;
RadioButton iamMale;
CheckBox tnc;
Button submit;
String[] nat = { "Indian", "American", "Other" };
TextView show;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// seting reference to the layout stuffs
setContentView(R.layout.activity_form_stuffs);
nationality = (Spinner) findViewById(R.id.spnNationality);
iamMale = (RadioButton) findViewById(R.id.radMale);
tnc = (CheckBox) findViewById(R.id.cbTerms);
submit = (Button) findViewById(R.id.bSubmit);
show = (TextView) findViewById(R.id.tvShow);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item, nat);
adapter.setDropDownViewResource(android.R.layout.simple_dropdown_item_1line);
nationality.setAdapter(adapter);

submit.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub

String nation = nationality.getSelectedItem().toString();
String sex = iamMale.isChecked() ? "Male" : "Female";
// String accTC=tnc.isChecked()?"accept":"not accept";

if (tnc.isChecked()) {

show.setText("Nationality: " + nation + "\n" + "Sex: "
+ sex);
Toast.makeText(FormStuffs.this, "Successfully submited",
Toast.LENGTH_LONG).show();
} else {
Toast.makeText(FormStuffs.this,
"Form cannot be submitted.", Toast.LENGTH_LONG)
.show();
show.setText("Please Fill Mondatory Fields");
}
}

});

}

@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_stuffs, menu);
return true;
}

}

When you compile and run on ADV the output will look like--

You can see the toast appearing at the end of the emulator.

Again you can download complete source code here.But you will have to be logged in to facebook.

Thank you for reading this post..