From the toolbox, we learn that we are having controls like button,check,radio,spinner,edittext(textbox) and  textview (label) etc. There is also a combo  to choose  layout, in the canvas screen.  I am choosing ‘absolute layout’. I simply drag and drop a button and an editview on the canvas.(Drag and drop, do not click and drop! It won’t work).

You will notice a number of tabs in toolbox. Select ‘properties’ tab.. After clicking the button on the canvas, give the id property of button as @id/button1. Similarly, for editview as @id/text1. Also, button2 and text2 After this, just click the ‘generate’ button at the bottom of  the blank window. We get the following XML file(main.xml) automatically generated.

<?xml version=”1.0″ encoding=”utf-8″?>

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android”

	android:layout_width=”fill_parent” android:layout_height=”wrap_content”

	android:padding=”10px”>

	<EditText android:id=”@+id/text1″ android:layout_width=”fill_parent”

		android:layout_height=”wrap_content” />

	<Button android:id=”@+id/button1″ android:layout_width=”wrap_content”

		android:layout_height=”wrap_content” android:layout_below=”@id/text1″

		android:layout_alignParentRight=”true” android:layout_marginLeft=”10px”

		android:text=”click” />

	<EditText android:id=”@+id/text2″ android:layout_width=”fill_parent”

		android:layout_height=”wrap_content” android:layout_below=”@id/button1″ />

	<Button android:id=”@+id/button2″ android:layout_width=”wrap_content”

		android:layout_height=”wrap_content” android:layout_below=”@id/text2″

		android:layout_alignParentRight=”true” android:layout_marginLeft=”10px”

		android:text=”click” />

</RelativeLayout>

We can now create our java source file. The code refers to main.xml for id of the controls.
(d:\android\mydemos\ex1\demo.java).This is our work folder.

package mypack.mydemos;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.*;
public class demo extends Activity

{
Button     button1,button2;

EditText   text1,text2;
    @Override
    public void onCreate(Bundle icicle)

    {

       	super.onCreate(icicle);

       	setContentView(R.layout.main);

	text1=  (EditText) findViewById(R.id.text1);

	button1 = (Button) findViewById(R.id.button1);
	text2=  (EditText) findViewById(R.id.text2);

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

	button1.setOnClickListener(new clicker());

 	button2.setOnClickListener(new clicker());

   }
 //———————————–
 class  clicker implements Button.OnClickListener

  {

  public void onClick(View v)

     {

     if(v==button1){text1.setText(“welcome”); }

     if(v==button2){text2.setText(“hello”);   }

     }
  }
}

The Android documentation and sample programs use anonymous inner class. I think it is quite unnecessary and is very tedious to follow. Instead, I have used user-defined ‘clicker’. This makes the code cleaner and more readable. This is just like any Swing program. In Android Terminology, an Activity is like a frame in swing (a screen). Just like ActionListener, here also we have, OnClickListener. I am not going into detailed theory now. I just  want to show how to develop and run a program first. Theory will follow later.

We have to copy this file(demo.java) to D:\android\tools\demo\src\mypack\mydemos

Go to d:\android\tools\demo

Give path= c:\winNT\system32;c:\jdk1.5\bin;e:\ant1.6\bin

(carefully note that this will not work with jdk1.4.2. It requires jdk1.5).

Secondly, how about the reference to Ant? Ant is a famous build tool from Apache Software foundation. Android requires the latest version of Ant for Windows(ie) Ant1.6. Do I have to know how to write the Ant’s build.xml file? NO. It is automatically created by the command.

So, I downloaded ant1.6 from the Apache website. It is a compact zip file. I have unzipped it and placed it as E:\ant1.6). Now use the command ‘ant’

d:\android\tools\demo>ant

We will get a series of messages. If we had done the previous steps correctly, we will get the message ‘BUILD SUCCESSFUL”.  Otherwise, we will get error messages, with line numbers where the errors occurred. We can correct them and build again.

The build process would have created a zip file named ‘demo.apk’ in demo\bin folder. All that remains now is to run the program in the emulator. As you remember, we have already started the emulator and it is running.

Now copy d:\android\tools\demo\bin\demo.apk  to d:\android\tools. After copying, give the command as:

…\tools>adb   install    demo.apk

After giving this command. go to the emulator window. You will find a checkpattern displayed for a while. Then an additional button appears in the screen with caption ‘demo’. Our program has been installed. We can test it by clicking on this ‘demo’button.

 

You can execute the program ‘demo’ now. Two textboxes and two buttons will appear. Click on button1. ‘welcome’ will appear in text1. Click on button2.’how are you?’ will appear in text2. The result is shown  below.

That completes our first  demo in  android.

We will be following exactly same procedure for all our demos. We will hereafter, see xml file and java files only, for the various demos. After a few more demos, it will be enough if I give the imports, declaration, definition and event handler.

The Android SDK comes with a number of sample applications. Within the APIDemos folder, we have a folder named ‘Views‘. I read it as ‘GUI’. It deals with layouts and controls and animations etc. There are a lot of demos. It may be confusing at first. Though, we may like to modify and simplify the code later, it is instructive to try each one of the sample programs by clicking on ‘apidemos’ button in the emulator screen and getting familiarity . I will list and give a brief comment on these, later.

 

Demo 2 – Spinner

As usual, the standard widgets are label(textview), textbox(edittext), combo(spinner), check, radio, ticker etc. I will now give a  demo for spinner. I have provided a spinner, button and a text to display the selected item in edittext.

We can design our layout as before using DroidDraw and get the following main.xml.

(obtained by using DroidDraw).

<?xml version=”1.0″ encoding=”utf-8″?>

<AbsoluteLayout android:id=”@+id/widget0″

    android:layout_width=”fill_parent”

     android:layout_height=”fill_parent”

      xmlns:android=”http://schemas.android.com/ apk/res/android”>

<Spinner  android:id=”@+id/spinner1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_x=”70px” android:layout_y=”42px”>

</Spinner>

<Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”confirm” android:layout_x=”70px” android:layout_y=”112px”>                                           </Button>

<EditText android:id=”@+id/text1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”EditText” android:textSize=”18sp” android:layout_x=”70px” android:layout_y=”182px”>

</EditText>

</AbsoluteLayout>

The corresponding java source file is given below.

package  mypack.mydemos;      

import android.app.Activity;                   
import android.os.Bundle;                      
import android.widget.*;

import android.view.View;
public class  demo extends Activity            
{                                                     
        Spinner   spinner1;
        Button    button1;           
        EditText   text1; 
      @Override                                                
      protected void onCreate(Bundle icicle)  
      {       
               	super.onCreate(icicle);                           
               	setTheme(android.R.style.Theme_Dark);
               	setContentView(R.layout.main);   
	spinner1 = (Spinner)

 	findViewById  (R.id.spinner1);

	button1    = (Button);
	findViewById (R.id.button1);                                               
	text1      = (EditText)

	findViewById  (R.id.text1);

	ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, array);

	adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_ item);

	spinner1.setAdapter(adapter);         
	button1.setOnClickListener(  new clicker());    
   }         
         private static final String[] array = {        “sunday”, “monday”, “tuesday”, “wednesday”,
				         “thursday”, “friday”, “saturday” };  
class  clicker implements  Button.OnClickListener
{ 
	public   void  onClick(View   v)
              {

	       String       s = (String) spinner1.getSelectedItem(); 
	         text1.setText(s);                                
	}                                         
}   
}

As before place demo.java in d:\android\tools\demo\src\mypack\mydemos. Place main.xml in d:\android\tools\demo\res\layout

Build using ant. Deploy demo.apk to the emulator exactly as in previous demo. The original demo gets overwritten. But, our work folder , where we have our xml and java files is d:\android\mydemos\ex1.They  are intact. So, no problem..The current java and xml files are in d:\android\mydemos\ex2.

When we click on the spinner, we get the items displayed as drop-down. We select an item and confirm. The selected item appears in text1. I am not going to explain the code. It is simple enough, if we remember our core java.

Demo 3 – Ticker

The third demo is a ‘ticker’ having a textbox for entering the ticker’s text, a ticker(timer) , two labels(editview) one for status and the other for diplaying the sliding message.

<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android

   android:layout_width=”fill_parent”

   android:layout_height=”fill_parent”

   android:orientation=”vertical”>

<EditText android:id=”@+id/text1″

   android:layout_width=”fill_parent”

   android:layout_height=”wrap_content” />

<Ticker android:id=”@+id/ticker1″

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:layout_marginTop=”20dip” />

<TextView android:id=”@+id/label1″

  android:layout_width=”wrap_content”

  android:layout_height=”fill_parent” />

 </Ticker>

<TextView android:id=”@+id/label2″

  android:layout_width=”fill_parent”

  android:layout_height=”wrap_content”

   android:layout_marginTop=”20dip”  />

</LinearLayout>

 LinearLayout with vertical orientation is like FlowLayout but in a vertical direction.

package mypack.mydemos;

import android.app.Activity;

import android.os.Handler;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

import android.widget.*;

import java.util.Map;
public class demo extends Activity
implements Ticker.TickerListener {

	Ticker ticker1;

	TextView label1, label2;

	EditText text1;
	@Override

	protected void onCreate(Bundle icicle) {

		super.onCreate(icicle);

		setContentView(R.layout.main);

		ticker1 = (Ticker) findViewById(R.id.ticker1);

		label1 = (TextView) findViewById(R.id.label1);

		label2 = (TextView) findViewById(R.id.label2);

		text1 = (EditText) findViewById(R.id.text1);

		ticker1.setTickerListener(this);

		text1.setOnClickListener(new clicker());

	}
	class clicker implements EditText.OnClickListener {

		public void onClick(View v) {
			label1.setText(text1.getText());

			ticker1.startTicker();

			label2.setText(“Ticking…”);

		}

	}
	public void onTickerFinished(Ticker view) {

		label2.setText(“Done!”);

	}
}

 

Demo 4 – Checkbox 

Copy this to tools\demo\res\layout\

 

<?xml version=”1.0″ encoding=”utf-8″?>

<AbsoluteLayout android:id=”@+id/widget1″

	android:layout_width=”fill_parent” android:layout_height=”fill_parent”

	xmlns:android=”http://schemas.android.com/ apk/res/android”>

	<CheckBox android:id=”@+id/check1″

		android:layout_width=”wrap_content”

		android:layout_height=”wrap_content” android:text=”java”

		android:layout_x=”50px” android:layout_y=”22px”>

	</CheckBox>

	<CheckBox android:id=”@+id/check2″

		android:layout_width=”wrap_content”

		android:layout_height=”wrap_content” android:text=”C#”

		android:layout_x=”50px” android:layout_y=”72px”>

	</CheckBox>
	<Button android:id=”@+id/button1″

		android:layout_width=”wrap_content”

		android:layout_height=”wrap_content” android:text=”Confirm”

		android:layout_x=”60px” android:layout_y=”122px”>

	</Button>
	<EditText android:id=”@+id/text1″

		android:layout_width=”wrap_content”

		android:layout_height=”wrap_content” android:text=”EditText”

		android:textSize=”18sp” android:layout_x=”60px”

		android:layout_y=”202px”>

	</EditText>

</AbsoluteLayout>

 

To be copied to tools\demo\mypack\mydemos

package mypack.mydemos;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.*;
public class demo extends Activity
{
	Button button1;

	CheckBox check1, check2;

	EditText text1;
	@Override

	public void onCreate(Bundle icicle)
	{

		super.onCreate(icicle);

		setContentView(R.layout.main);

		text1 = (EditText) this.findViewById(R.id.text1);

		check1 = (CheckBox) findViewById(R.id.check1);

		check2 = (CheckBox) findViewById(R.id.check2);
		button1 = (Button) findViewById(R.id.button1);

		button1.setOnClickListener(new clicker());
	}
	class clicker implements Button.OnClickListener
	{

		public void onClick(View v)
		{
			String r = “”;

			if (check1.isChecked())

			{

				r = r + “java” + “\n”;

			}

			if (check2.isChecked())

			{

				r = r + “c#”;

			}

			text1.setText(r);

		}
	}
}

 

This is just the usual Java code and needs very little explanation. The only difference is the way , the controls are defined ( through res\layout\xml file).

 

Demo 5 – RadioButtons

The next standard control is the RadioButton, within a RadioGroup.

To be placed in tools\demo\res\layout

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”

	android:orientation=”vertical” android:layout_width=”fill_parent”

	android:layout_height=”wrap_content”>

	<RadioGroup android:id=”@+id/group1″ android:layout_width=”fill_parent”

		android:layout_height=”wrap_content” android:orientation=”vertical”>

		<RadioButton android:id=”@+id/radio1″ android:text=”madras”

			android:layout_width=”wrap_content” android:layout_height=”wrap_content” />

		<RadioButton android:id=”@+id/radio2″ android:text=”bombay”

			android:layout_width=”wrap_content” android:layout_height=”wrap_content” />

	</RadioGroup>

	<Button android:id=”@+id/button1″ android:layout_width=”wrap_content”

		android:layout_height=”wrap_content” android:text=”Button” />

	<TextView android:id=”@+id/label1″ android:layout_width=”wrap_content”

		android:layout_height=”wrap_content” android:text=”where” />

	<EditText android:id=”@+id/text1″ android:layout_width=”wrap_content”

		android:layout_height=”wrap_content” android:text=”” android:textSize=”18sp”

		android:layout_x=”70px” android:layout_y=”182px” />

</LinearLayout>

The following Java code should be placed in tools\demo\src\mypack\mydemo

package mypack.mydemos;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.*;
public class demo extends Activity
{
	TextView label1;
	RadioGroup group1;
	RadioButton radio1, radio2;
	Button button1;
	EditText text1;
	@Override

	protected void onCreate(Bundle icicle)
	{
		super.onCreate(icicle);
		setContentView(R.layout.main);
		group1 = (RadioGroup)
		findViewById(R.id.group1);
		radio1 = (RadioButton)
		findViewById(R.id.radio1);
		radio2 = (RadioButton)
		findViewById(R.id.radio2);
		button1 = (Button) findViewById(R.id.button1);
		text1 = (EditText) findViewById(R.id.text1);
		text1.setText(“radio”);
		label1 = (TextView) findViewById(R.id.label1);
		label1.setText(“where?”);
		button1.setOnClickListener(new clicker());
	}
	// …inner class —follows ->
	class clicker implements Button.OnClickListener
	{
		public void onClick(View v)
		{
			if (v == button1)
			{
				if (radio1.isChecked())
				{

					text1.setText(“madras”);

				}
				if (radio2.isChecked())
				{

					text1.setText(“bombay”);

				}
			}
		}
	}
	// —-inner class ends here —
}

 

You would have observed that I am naming all my java files as ‘demo.java’. May be confusing at first but I am doing so with a purpose. First of all, the emulator screen gets cluttered with too many buttons if we go on adding my examples. What I have done is :

I have created a folder as d:\android\mydemos.

In mydemos folder, I have created subfolders such as (ex1,ex2 etc). But, within each folder, I have demo.java & main.xml.

This way, we can easily test each of our demos  by uniform procedure. In my system, I had the problem of insufficient memory. And, by the above step, I was able to test all my programs by the same name.

Here is an important tip however, if you choose to name the source files and xml files differently and want to reduce the clutter.

Demo 6 – Gallery 

Interestingly, there is a ready-made control in the toolbox, named ‘gallery’. Let us now learn to use this control, though the syntax is a bit difficult. This time, we will need demo.java, main.xml and also another folder in tools\demo\res\drawable. This special folder is to be created by us. You can read ‘img’ instead of ‘drawable’. So, we place all the image files to be displayed in the gallery, in this folder.

 

Let us as usual create the xml file by using DroidDraw as follows.

 

<?xml version=”1.0″ encoding=”utf-8″?>

<Gallery xmlns:android=”http://schemas.android.com/apk/res/android”

	android:id=”@+id/gallery” android:layout_width=”fill_parent”

	android:layout_height=”fill_parent” android:layout_alignParentBottom=”true”

	android:layout_alignParentLeft=”true” android:gravity=”center_vertical”

	android:spacing=”5″ />

 

The following class is to be placed in tools\demo\mypack\mydemos

package mypack.mydemos;

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

import android.view.View;

import android.view.ViewGroup;

import android.widget.*;

import android.widget.AdapterView.OnItemClickListener;
public class example extends Activity
{
	@Override

	public void onCreate(Bundle icicle) {
		super.onCreate(icicle);

		setContentView(R.layout.main);

		Gallery gallery = (Gallery)

		findViewById(R.id.gallery);

		gallery.setAdapter(new ImageAdapter(this));

		gallery.setOnItemClickListener(new OnItemClickListener()

		{
			public void onItemClick(AdapterView parent,

			View v,

			int position,

			long id)
			{
				Toast.makeText(example.this, “” + position,

				Toast.LENGTH_SHORT).show();

			}
		});
	}
	public class ImageAdapter extends BaseAdapter

	{
		public ImageAdapter(Context c)

		{

			mContext = c;

		}
		public int getCount()

		{

			return mImageIds.length;

		}
		public Object getItem(int position)

		{

			return position;

		}
		public long getItemId(int position)

		{

			return position;

		}
		public View getView(int position, View

		convertView, ViewGroup parent)

		{

			ImageView i = new ImageView(mContext);

			i.setImageResource(mImageIds[position]);

			i.setScaleType(ImageView.ScaleType.FIT_XY);

			i.setLayoutParams(new Gallery.LayoutParams(160, 200));

			return i;

		}
		public float getAlpha(boolean focused, int offset)

		{

			return Math.max(0, 1.0f – (0.2f * Math.abs(offset)));

		}
		public float getScale(boolean focused, int offset)

		{

			return Math.max(0, 1.0f – (0.2f *

			Math.abs(offset)));

		}

		private Context mContext;

		private Integer[] mImageIds = {

		R.drawable.cindy,

		R.drawable.clinton,

		R.drawable.ford,

		R.drawable.cybil,

		R.drawable.demi,

		R.drawable.colin,

		R.drawable.david,

		R.drawable.drew

		};
	}
}

How to uninstall an application from the emulator?

• Make sure your emulator is running
  
• Open a dos box in the android/tools folder  d:\android\tools>adb shell 
  
• You will get the shell prompt
   #cd /data/app
   #ls
   (It will list all the *.apk installed in your emulator)
  # rm  example.apk
  ( if you want to remove ‘example’)
  #exit
  
• You will see the application getting removed from the emulator at the same moment

 

That completes the first part of my introductory tutorial on Android SDK.