Choose Window➪Show View➪Other. 2. Expand Java and choose Properties.

105

Chapter 4: Designing the User Interface

Placing an image on the screen The first thing you add is the phone image to the screen. This is the phone image that you see in Figure 4-4, earlier in this chapter. First you need uh, yeah the phone image. You can download that from the book’s source code that is available online, or you can use your own. Adding images to your project is simple. We simply drag them over and then reference them in the project. 1. Drag the phone image into the resdrawable-mdpi folder in the Eclipse project, as shown in Figure 4-8. Figure 4-8: Dragging the image file into the res draw- able- mdpi folder. Notice that you see two states of the application: regular, as shown earlier in Figure 4-2, and silent, as shown earlier in Figure 4-3. 2. Drag the other phone image — the silent one or one of your own — into the resdrawable-mdpi folder. To follow along with the rest of the chapter, the names of the images should be as follows: • Regular mode image: phone_on.png • Silent mode image: phone_silent.png If your images are not named accordingly, you can rename them now. Your Eclipse project should now look like what is shown in Figure 4-9. 106 Part II: Building and Publishing Your First Android Application Figure 4-9: The Silent Mode Toggle project with the phone images. When you dragged the images into Eclipse, the ADT recognized that the proj- ect file structure changed. At that time, the ADT rebuilt the project because the Build Automatically selection is enabled in the Project menu. This regen- erated the gen folder, where the R.java file resides. The R.java file now includes a reference to the two new images that were recently added. You may now use these references to these resources to add images to your layout in code or in XML definition. You’re going to declare them in XML layout in the following section. Adding the image to the layout Now it’s time to add the image to the layout. To do that, you need to type the following into the main.xml file, overwriting the current contents of the file: ?xml version=”1.0” encoding=”utf-8”? LinearLayout xmlns:android=”http:schemas.android.comapkresandroid” android:orientation=”vertical” android:layout_width=”fill_parent” android:layout_height=”fill_parent” ImageView android:id=”+idphone_icon” android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_gravity=”center_horizontal” android:src=”drawablephone_on” LinearLayout 107

Chapter 4: Designing the User Interface