Professional Documents
Culture Documents
04 Laboratory Exercise PDF
04 Laboratory Exercise PDF
Laboratory Exercise # 6
Materials:
1 PC with pre-installed Microsoft Windows operating system and Eclipse Indigo (Classic 3.7.2) or
higher version.
Procedures:
Activity 1
*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.
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.
*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.
*Property of STI
Page 4 of 4