Google has recently released the Android platform for developing mobile applications. The language used for developing Android programs is Java, but it is not Java Micro Edition. No wireless application developer can ignore Android. Google is the best known brand name, among the users of the web and Android comes from Google.
I am presenting this hands-on tutorial, as a sequel to my j2me series. Adequate knowledge of core-java ,especially Event-handling, Swing and inner-classes is assumed. Though Android does not make use of Swing, it uses similar ideas.
We can develop Android lessons and applications in Eclipse environment. Google have provided an Eclipse-plugin for Android. This is the popular method. Google has not given direct support to Netbeans. But some Netbeans users have developed a method for running Android in Netbeans . It is available at http://undroid.nolimit.cz/. You can find more screenshots and guidance in http://eppleton.com/blog/.
We can develop Android lessons without using either Eclipse or Netbeans. The necessary command-line tools have been provided by Google. I found that using these command-line tools is easier than either Eclipse or Netbeans method. So, I am basing all the following lessons on these tools. I think, most readers will agree with my view, after they try this method as well as Eclipse method. The Android site at 'code.google.com/android' has already given step-by-step instructions about Android in Eclipse. You can also get more details with screen shots from a wonderful website at www.tanguay.info/web/welcome.php titled 'Edward's Web Developer site'. He gives excellent guidance with plenty of screen shots
The Android site lacks clarity about the command-line method. Hence, I think I am adding something useful by writing on the command-line method instead of simply repeating the material in Android site.
Let us start from the beginning. The first step is downloading the Android SDK (version m5-rc14, Feb-12, 2008). Android was released in November, 2007 . It has been revised in the Feb-2008 version.Some of the earlier examples may not work in the newer version.
I am working in Windows-2000 and so I downloaded the windows version. The supported platform in Windows is either Windows-XP or Vista.(Mac OS 10 & Ubuntu Linux are the other platforms mentioned). However, it works well in my Win-2000. It is advisable to have at least 512MB memory. The android SDK is a zip file. I unzipped it to C:\unzipped\android and later, I copied that folder to D:\android. If you want, you can simply copy it to another drive like G:\android also. In the following lessons D:\android is used.
If you want to develop using Eclipse, you must have installed either Eclipse3.2 or Eclipse3.3(Europa). I have tested with Eclipse3.2. No problem.It works. But, we require ADT (ie) Android Development Tools plugin for Eclipse, if you are using Eclipse.You can get this plugin from http://code.google.com/android/adt_download.html. You have to be careful about the ADT version number.It is ADT-0.3.3.
As my present focus is on command-line method, let me begin straight away and give a simple demo.The procedure given here is common for all our experiments and so I will not be repeating it in each demo. So, please note it down carefully.
Demo 1 - TextBox
In my first demo, I will have a customary button and textbox ( called EditField in Android). When I click the button, I want the message "SUCCESS!" to be displayed in textbox. Just as an exercise, I am using two buttons and two textboxes.
The first step is to start the Emulator
cd to d:\android\toolsd:\android\tools>emulator
It will take a long time to get started. Do not be in a hurry. Wait till it gets fully started. And do not close that window carelessly by mistake. In that case, you will have to start it again and wait for a long time again. Finally, we get the emulator screen
The second step is to give the following command, from another command window.
d:\android\tools>activityCreator --out demo mypack.mydemos.demo
This means that my project is 'demo' and my package is 'mypack.mydemos'. A number of folders are created automatically by this command:
- tools\demo\src
- tools\demo\bin
- tools\demo\res.
We need to note the src and res folders carefully. We will place the java source file in src folder and main.xml file in res\layout, overwriting any files that are generated automatically. For the moment, we can think of the res\layout folder as the one which decides the gui design. As in asp.net, flex etc, the gui details are specified in xml file. But how shall we write the XML file? by hand? Not too difficult .But....luckily, there is an open-source gui designer named 'DroidDraw' available in http://www.droiddraw.org/ .It is a nice tool and if you like it, you can send your appreciation to brendan.d.burns@gmail.com . He has given a simple tutorial too, on how to use this gui tool.
I downloaded this software from the above site. I unzipped it. ( any folder). When we click on the icon, we get the screen as given below.
Thus we get a window, showing the drawing canvas on leftside and toolbox and a blank area in the rightside. ( for printing purpose, I have split them into two screens) as above.
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\demoGive 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
adapter = new ArrayAdapter (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.
0 comments:
Post a Comment