H0079

Laboratory Exercise # 6

Designing the User Interface

Objectives:
At the end of the exercise, the students should be able to:

create a new project,

change the layout properties,
add an image to the layout,
add a button to the layout,
use the Android Common XML Editor, and
run application.

Materials:

1 PC with pre-installed Microsoft Windows operating system and Eclipse Indigo (Classic 3.7.2) or
higher version.

Procedures:
Activity 1

Creating a New Project

1. Create a new project by selecting File > New> Project.

2. Expand the Android folder and select Android Project.

Figure 6.1 New Project

3. Click Next. The New Android App dialog box will appear.

Laboratory Exercise 6: Designing the User Interface

*Property of STI
Page 1 of 4

H0079

4. In the Application Name field, type Interface. You can also use this as its Project Name.
5. In the Package Name field, type net.develop.design.
6. Select Android 2.3.3 for the Build SDK.
7. In the Minimum Required SDK drop-down list, choose Android 2.0.

Figure 6.2 New Android App dialog box

8. Click Next three times.
9. In the New Blank Activity dialog box, change the Activity Name to Design.
10. Click Finish.

Activity 2
Laying out the application
1. Run the application. Observe the default layout of it.
2. Go back to the application.
3. Expand the res folder and double-click layout folder.
4. Right-click on activity_design.xml, click Open With and choose Text Editor.
5. Edit the default layout. From RelativeLayout, change it to LinearLayout.
6. Delete this from the code:
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
7. Run again the application. Notice the changes in the layout.

Laboratory Exercise 6: Designing the User Interface

*Property of STI
Page 2 of 4

H0079

Activity 3
Adding an Image
1. Expand the res folder and double-click drawable-mdpi folder.
2. Go to My Documents.
3. Locate the play.png file and drag it to the res/drawable-mdpi folder.
4. In the File Operation dialog box, choose Copy files and click OK.
5. Expand the res folder and double-click layout folder.
6. Right-click on activity_design.xml, click Open With and choose Text Editor.
7. Add the following to the code: (Below TextView)
<ImageView
android:id=@+id/play_icon
android:layout_width=wrap_content
android:layout_height=wrap_content
android:layout_gravity=center_vertical
android:src=@drawable/play />
8. Run the application. Notice the changes in the interface.
Activity 4
Adding a button
1. Expand the res folder and double-click layout folder.
2. Right-click on activity_design.xml, click Open With and choose Android Common XML Editor.
3. From the Palette section, click Form Widgets.
4. Drag a button to the interface.
5. Go to the Text Editor tab. Notice the changes in the code.
6. Change the name of the button by editing the following code:
android:text="Button" />
7. Change Button to Stop.
8. Run the application. Notice the changes in the application.
9. Change the layout and gravity using the following code:
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/hello_world"
tools:context=".Design" />
<ImageView
android:id="@+id/play_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center"
android:src="@drawable/play" />
<Button
android:id="@+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
Laboratory Exercise 6: Designing the User Interface

*Property of STI
Page 3 of 4

H0079

android:text="Stop" />
10. Save the application.

Laboratory Exercise 6: Designing the User Interface

*Property of STI
Page 4 of 4