Archive‎ > ‎Fall 2009‎ > ‎Course Project‎ > ‎Buddy Suite‎ > ‎Tutorial #2‎ > ‎

Tutorial #2 - Hello World Program in Android

Hello World Program in Android
 
In this part of the tutorial we will see how to create a functional application in Android using Eclipse.
At the end of the tutorial you should be able to:
  • Create a new Android application
  • Understand the structure of the of such an Application
  • Place GUI components using the Eclipse editor
  • Write event handlers so that the application responds to user input.
 This tutorial covers the basic steps of Android programming so that you get started quickly. You will have to read the SDK documentation to complete the homework.
 
Creating a new Android application
Please refer to Tutorial 1 to learn how to create, compile and run a new Android application
 
The structure of the application
An Android application has the following directory structure.
  • /src: contains the sources of the application. This directory has the same structure as normal Java application, ie. it is organized in directories corresponding to package names.
    All your Java source files/directories should be located in this folder.
  • /gen: automatically generated files during compilation. Do not edit them, as your modification will most likely be lost.
  • /res: various resources like GUI layouts, icons, strings, etc. The Eclipse environment allows you to edit them graphically.
  • /assets: other resource files you may want to bundle with the application.
  • AndroidManifest.xml: contains the description of the project. Eclipse provides a user-friendly editor to edit this file. You can find more documentation here if you want to modify it manually.
Placing GUI components using the Eclipse editor
 
In this part of the tutorial we will add a button to the user interface and attach an action to it when the user clicks.
  • Open the file /res/layout/main.xml.
    A GUI editor should appear. If it doesn't and all you see is XML code, click on the "Layout" tab at the bottom of the code editor.
The GUI editor depicts the main window of the HelloWorld activity. The GUI has one label displaying "Hello World, HelloWorld", automatically generated by Eclipse during the creation of the project.
You can add to categories of components to the GUI: layouts and views. They are located in the corresponding lists on the left.
Select the Button view and drag it on the GUI layout window. A button called "Button01" should appear.
You can change the button's label by selecting it and changing the "Text" property. For this, open the "Properties" tab below the GUI editor and locate the "Text" property.
 
Reacting to user input
 
A component by itself does not do anything. You need to write code that will perform some action.
In this part of the tutorial, we will make the button display a random number each time it is pressed.
This task consists in extending the activity's source file by associating an event handler with the button in the GUI. In our case, the main activity is in the HelloWorld.java file, somewhere in the /src directory.
The main steps the code should carry out to perform this are the following:
  • Get the instance of the component to which the event handler should be associated.
    Each component that is created using the GUI has a corresponding component ID that can be used to retrive the instance of the corresponding class. The component IDs are stored in the automatically generated R.java file in the /gen directory.
    Since the components are created using the /res/layout/main.xml file, there is no explicit Java code that creates them. Instead, a component id is associated to these components.

    In our example, the instance of the button we created previously can be retrieved using
    Button myButton = (Button)findViewById(R.id.Button01);

    Make sure to save the GUI layout, enable automatic compilation and refresh the project so that R.id.Button1 field gets generated.
  • The last step is to associate an On Click event to the button. This can be done using the setOnClickListener of the Button class.
     

    On Click Event Handler

    package epfl.sweng.HelloWorld;

    import java.util.Random;
    import android.app.Activity;
    import android.content.DialogInterface;
    import android.view.View;
    import android.view.View.OnClickListener;
    import android.os.Bundle;
    import android.widget.Button;

    public class HelloWorld extends Activity {
     Random random;
     
        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
           
            Button myButton = (Button)findViewById(R.id.Button01);
            random = new Random();
            
            myButton.setOnClickListener(new OnClickListener() {
               @Override
               public void onClick(View v) {
               Button b = (Button)v;
               b.setText(Integer.toString(random.nextInt()));
              }
            });
        }

    }