Your First User Interface Application in Android

W e all know that with the demand in applications for Smartphones, developers around the world are attracted towards developing applications for Android. First of all, Android is License free, royalty free, and open source. Secondly, Android applications are written in Java, that has a rich set of libraries and anyone with a small knowledge of Java can also get Android applications up and running with relative ease.

In this article, I am going to explain the procedure of creating a small user interface application in Android that will ask the user to enter a name. After entering a name, when user selects a button, a Welcome message will be displayed along with the user's name in response.

I assume Java, Android SDK and Eclipse are installed on your machine. In this article, we are going to create a small Android application that will ask user to enter a name and in return a welcome message will be displayed to the user. So, let's start with it.

Open Eclipse and select File->New->Android Project option to create a new project. We get a dialog box as shown in Figure 1.

In the Project name: box, enter the name of our project. Let's name our project as WelcomeMsg. Since, this is a new project, select Create new project in workspace radio button. Also, select the checkbox, Use default location to create the project files at the default location that was specified while opening Eclipse for the first time. From the Build Target section, select the version of Android that represents the device most commonly used by our target audience. Let's select the Android 1.5 as the target platform. In the Application name: box, specify the name of the application. Let's assign the application name the same as our project name i.e. WelcomeMsg. In Package name: box, enter the package name as com.androidbook.WelcomeMsg. Specify the activity name as WelcomeMsgActivity and check the checkbox Create Actvity: to create the default launch Activity class for our application. Finally, select the Finish button.

Our application will be created and the Package Explorer will show the files that are automatically created for us by Eclipse IDE. For our application, we only need to work with two files: main.xml and WelcomeMsgActivity.java. Let's begin with main.xml file. So, double click main.xml file and overwrite its default contents with the code shown below:

In the above XML file, the terms TextView, EditText and Button that we see are controls that will appear on the View and are meant for user interaction. All the controls are laid in some layout. Let's have a brief idea of different layouts used in an Android application :

• LinearLayout - In this layout, all elements are arranged in a descending column from top to bottom or left to right. Each element contains properties to specify how much of the screen space it will consume. Depending on the orientation parameter, elements are either arranged in row or column format.
• RelativeLayout - In this layout, each child element is laid out in relation to other child elements. That is, a child element appears in relation to the previous child.
• AbsoluteLayout - In this layout, each child is given a specific location within the bounds of the parent layout object. This layout is not suitable for devices with different screen size.
• TableLayout — In this layout, the screen is assumed to be divided in table rows and each of the child elements is arranged in the specific row and column.

Small description of the attributes used with the controls used in above main.xml file is as follows :

• @+id/string - assigns the specified string as ID to the control. The ID status will also be added to the R.java file if it doesn't exist there.
• fill_parent - Sets the height or width of the control equal to the height or width of its parent
• wrap_content - It binds the width or height of the control to the size of its content

The following is the list of the commonly used controls in an Android application:

• TextView — It is a read only text label. It supports multiline display, string formatting, and automatic word wrapping.
• EditText — It is an editable text box. It also accepts multiline entry and word-wrapping.
• ListView - Creates and manages a vertical list of Views.
• Spinner - Displays a Text View and an associated List View allowing us to select an item from a list
• Button — Displays a usual command button.
• CheckBox - A button allowing user to select (check) or unselect (uncheck).
• RadioButton — A mutually exclusive button which when selected, unselects all other buttons in the group.

Lets, now open the file, WelcomeMsgActivity.java and replace its default content with the code shown below :

package com.androidbook.WelcomeMsg;

Above code locates the button control that we created in main.xml file ( with ID click_btn) and assigns it to the instance “b” and attached an event listener to it. On occurrence of the event (click of the button), onClick() function will be executed where TextView and EditText controls of main.xml are located and accessed via variables resp and name respectively. The user name entered in the EditText control is fetched and displayed with welcome message via TextView control

Note: The class method, onCreate() is called when our activity is first created. It is used to initialize our activity and to create views of our application. Our application is complete. Lets run it

Running the application

To run the application, we need to create an Eclipse launch configuration, and a virtual device on which we wish to run our application. Lets first specify the virtual device. Select Window->Android SDK and AVD Manager option. We get a screen as shown in Figure 2(a)

We can see that no Virtual device exists by default. Select New button to create our AVD (Android Virtual Device). We get a screen as shown above (Figure 2(b)). Lets specify the Name of our AVD as demoAVD (any name). From the Target drop down list, select Android 1.5 — API Level 3. Lets set the Size of SD card as 512 (any value that is multiple of 512). From the Skin section, from the Built — in drop down select HVGA. Add few hardwares anything by selecting New button and selecting whatever options come up. Finally select Create AVD button to create the virtual device by name demoAVD for us. The final step is to define configuration file. So, select Run->Debug Configurations option. We get a dialog box as shown in below Figure 3(a):

Double click Android Application in the left pane. The wizard will insert a new configuration named New_configuration. Lets rename the configuration to our application name: WelcomeMsg. Select the Browse button to locate and select our project from our disk drive. From the Launch drop down list, select com.androidbook.WelcomeMsg.WelcomeMsgActivity option. Select Target tab to specify the device on which we wish to run our application. We get a list of existing AVDs defined on our machine (see above Figure 3(b)). Lets select the AVD that we just defined, demoAVD (it represents the device that is commonly used by our clients). Finally select the Apply button followed by Close button.

Since we have defined launch configuration and virtual device, we can run our application by selecting Run icon from the toolbar. The Android emulator gets loaded. We can see in the emulator (below Figure 4(a)) that a prompt message, Enter your name: appears via TextView control, a blank text box appears via EditText control where we will enter a name and a button appears via Button control. After entering user name say Caroline, when we select the Click Me button, a welcome message, Welcome Caroline! appears via the TextView control (below given Figure 4(b)). Recall, we defined all these controls in the file, main.xml