Saturday, January 5, 2013

A simple form : Button-EditText-TextView

Requirements- Android Development Tool (ADT-Eclipse~400mb) Download
(friends actually i dont know english... :( )
let's start..
We are going to create a simple form which contains text fields and a button. When we click the button a popup message showed . Steps are shown below

1.Create Project in Eclipse




then, press 'next'-'next'-'next'-'next'-'finish'
you can see app's details on the left side. Image shown below
Project setup completed...

2.Create Layout
in this step we create the Graphical user interface, ie GUI
after you pressed the finish button, you can see something like this in your screen


"activity_main.xml" contains the code for GUI. GUI is defined in xml
this IDE provides drag&drop UI development. so there is no need to type the code. just select what you want, then drag it to the screen. simple.. our gui need two textfields (EditText) and a Button. a 'Hello World' is showed in the middle of the screen. click that and then press delete. Then just expand the 'TextFields' folder and select a textfield. Button is inside the 'form widgets'



 just click activity_mai.xml which is located below Palette. the xml file is shown below



We use id's to link between .java file and .xml file
here editText1,editText2,button1 are the id's of TextFileds and button. In android these elements are included in a class known as View.
3.The real coding starts from here. you have to open a file MainActivity.java ("src-com.example.simpleform-MainActivity.java" ie, expand src, then the package the open the file)

screenshot of file is shown below

now, just run your project. ctrl+f11 or Run->run or press the green play button.
(click here to see how to setup an AVD )



now click the button, but nothing happens ;)
in the next step, we add some actions to be performed when we click the Button.

4.Coding

create objects of EditText and Button. this objects will have a link to xml file.

       final EditText fname=(EditText) findViewById(R.id.editText1);
       final EditText lname=(EditText) findViewById(R.id.editText2);
       final Button button=(Button) findViewById(R.id.button1);

addan OnClickActionListener to the button. ie when the button is clicked, actions defined inside the interface is performed.
           button.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub.actions are defined here

}
});


here we want to access the texts in the two textfiels. that is get the data from textfield and then store the values in a String. the code is shown below

                                String s1=fname.getText().toString();
String s2=lname.getText().toString();
String msg=s1+s2;
next, we need to show the message. we use 'AlertDialog' class for this.



              AlertDialog alertDialog = new AlertDialog.Builder(MainActivity.this).create();
      alertDialog.setTitle("Details");                                                                                                          
      alertDialog.setMessage(msg);

alertDialog.setButton("OK", new DialogInterface.OnClickListener() {
               public void onClick(DialogInterface dialog, int which) {
               // Write your code here to execute after dialog closed
               Toast.makeText(getApplicationContext(), "your texts", Toast.LENGTH_SHORT).show();
               }
       });

Entire code:-



package com.example.simpleform;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
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.Toast;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final EditText fname=(EditText) findViewById(R.id.editText1);
        final EditText lname=(EditText) findViewById(R.id.editText2);
        Button button=(Button) findViewById(R.id.button1);
     
        button.setOnClickListener(new OnClickListener() {

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

String f=fname.getText().toString();
String l=lname.getText().toString();
String msg=f+" "+l;

AlertDialog alertDialog = new AlertDialog.Builder(MainActivity.this).create();
alertDialog.setTitle("Hi welcome");
alertDialog.setMessage(msg);

alertDialog.setButton("OK", new DialogInterface.OnClickListener() {
               public void onClick(DialogInterface dialog, int which) {
               // Write your code here to execute after dialog closed
               Toast.makeText(getApplicationContext(), "your text", Toast.LENGTH_SHORT).show();
               }
       });
alertDialog.show();

}
});
     
     
    }

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







NOW RUN YOUR PROJECT...:)


:)