The most common of the default resources (/res) subfolders are shown in the Figure 4-1. The following are the eight provided when you create a project in Eclipse:

Let's examine the res/values folder in more detail. This is where you place predefined application values in the form of XML files that define the variable names (x or y, for instance) and their values that are later referenced in your Java code. For example, these values might be strings (collections of text characters) or constants (hard-coded values that your Java code uses in its program logic and can't change).

Think of the values folder as holding all of your constant values for your application in one place. This way, if you need to adjust them during application development and testing, you make the changes in a single location.

Figure 4-2 shows examples of files that can be placed in this folder:

Notice the Android file name conventions for the different types of XML files in the values folder, adding another level of complexity.

Figure 4.2. Files in the res/values folder. These files contain constants for an Android application.

Because UI designs can be defined precisely by an XML file, it's easy to deal with the variety of screen sizes available on Android devices today. Let's say that you want to do a custom layout for each of the three primary screen sizes used in Android phones:

How does XML provide a solution? Simply create a UI design in XML for each size and use Java to determine the screen resolution of the phone.

As another example of how XML can be leveraged, let's take a look at a few lines of code that define an important utility: Android's popular desktop clock. (In Chapter 6, you'll learn how to create your own custom desktop clocks.)

The XML tag for an Android program function usually has the same name as its Java counterpart, so you can access the power of the programming language from simple XML. For example, here is the XML tag that corresponds to Java's AnalogClock:

<AnalogClock />

Android's XML tags start with a left-angle bracket (<), followed immediately (no space) by a class name, a space, a slash mark, and a right-angle bracket (/>).

To customize an AnalogClock, you must add attributes to the AnalogClock tag, inserting them before the closing part of the tag (/>). Suppose you want to add an ID to reference the utility from other parts of the application. Here's how:

<AnalogClock android:id="@+id/AnalogClock />

This adds an ID to your AnalogClock with the name AnalogClock, which you can use to reference it elsewhere in your application.

For each XML tag in Android, there are dozens of parameters that allow you to control the tag's appearance and implementation, including its positioning, naming (used in the Java code), and other options.

In real-life, for readability, programmers usually write this code with each configuration parameter indented on a separate line, like this:

<AnalogClock
        android:id="@+id/AnalogClock,
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
/>

The Android compiler considers everything inside the AnalogClock tag to be a parameter, or a customization option, until it reaches a closing tag (/>). The fill_parent parameter stretches content to fill a container, and the wrap_content parameter tiles the content. We'll cover these and other view and layout concepts in Chapter 6.

Let's look at an example of a common application resource: the bitmap image. Your PNG or JPEG bitmap image goes into the /res/drawable folder. It can then be referenced by its file name only (excluding its extension) in the Java code as well as in the XML. For this reason, be sure not to give a PNG file and a JPG file the same name.

Also, contrary to normal file-naming conventions, image file names can contain only numbers and lowercase letters, so make sure to remember this rule (one of the many anomalies of Android programming).

In summary, to set up bitmap images to be used in your application, do the following:

Another great example of resource usage is supplying different UI screen layouts for portrait and landscape orientations. Usually, we will set our default screen UI for phones to portrait mode, as most people use their phone in this way (turning it sideways only to view video).

Android provides support for alternate resources. If you set these up correctly, Android will determine the current settings and use the correct resource configurations automatically. In other words, you provide resources for each orientation, and Android uses the correct resources as the user changes from one orientation to another.

Each set of alternative resources is in its own folder, where it can be referenced and located later on in your Java code. We can provide resources for different screen orientations and resolutions in this fashion, and have Android decide which folders to look in for our application resources based on each user's smartphone model.

Android offers three screen resolutions: low resolution (320 × 240), medium resolution (320 × 480), and high resolution (800 × 480).

To add an alternate resource folder, create a directory under /res with the form <resource_name>-<config_qualifier>. For instance, create/res/drawable-hdpi.

This creates an alternate resource folder for high-density dots per inch (hdpi) images. The alternate folder will be used automatically if the Android smartphone screen uses a WVGA (800 × 480) screen high-end model. Otherwise, it will use the normal HVGA (320 × 480) screen images, located in the default /res/drawable folder.

If you want to also support low-end screens, you can use the low-density dots per inch qualifier, ldpi. There is a medium dots per inch qualifier, mdpi, as well.

So, to have images for QVGA, HVGA, and WVGA screens arranged in folders in a way that allows Android to automatically recognize the folder hierarchy, set up your folder structure as follows:

You're well on your way to correctly setting up your Android application's resources. One more file we need to examine is AndroidManifest.xml.

The first step is to launch Eclipse. From there, you'll create a project to house the application.

To launch Eclipse, find and click the Eclipse shortcut launch icon on your workstation. If a security warning dialog like the one shown in Figure 4-3 appears, click Run. If you don't want to see this dialog every time you start Eclipse, uncheck the box that reads "Always ask before opening this file."

Figure 4.3. The Windows Security Warning dialog

Next you will see the Eclipse startup screen. Then, in a few more seconds, a dialog will appear, allowing you to tell Eclipse where your projects folder is kept on your hard disk drive. Mine is kept on my C: drive and is called Projects, so the entry is C:Projects, as shown in Figure 4-4. If you don't want to specify this each time you start Eclipse, you can check the "Use this as the default and do not ask again" option. Once you click the OK button, Eclipse will start, and the IDE will appear.

Figure 4.4. The Eclipse Workspace Launcher dialog

Once the IDE has launched, select File

Figure 4.5. The Eclipse New Project dialog

You'll see the New Android Project dialog, which allows you to specify all sorts of important variables for your applications. Let's address them one by one.

Figure 4-6 shows the completed New Android Project dialog for this example. When you are finished filling it out, click the Finish button. Eclipse will create your first Android project for you.

Figure 4.6. The New Android Project dialog for your first Android app

After you click Finish in the New Android Project dialog, you are returned to Eclipse. In the IDE, you can navigate through the project using the Package Explorer pane.

Let's look at the folder hierarchy that Eclipse has automatically created for our project. Click the arrow icons next to the HelloWorldAndroid folder, and then click the arrow icons next to the src and res folders under it.

Going further, click the open folder arrows next to the Hello.World, drawable, layout, and values folders, so you can see the Java and XML files that Eclipse has so kindly created for us. Figure 4-7 shows the Package Explorer pane at this point.

Figure 4.7. The Eclipse Package Explorer pane

Now let's open some of these files and see just how much coding Eclipse has done for this project.

To open any of the files listed in the Package Explorer, select the file by clicking once on it (the icon will turn blue), and then press F3. Alternatively, right-click the file name to get a context-sensitive menu, and then select the Open option.

The MyHelloWorld.java file holds our activity class. Right-click it and select Open to explore it now. As shown in Figure 4-8, Eclipse has already written the code to create a UI screen for the application and set its content to the UI defined in the main.xml file (with the R.layout.main text), which we will look at next.

Figure 4.8. Our MyHelloWorld activity

Let's examine this in a little more detail:

package Hello.World;

import android.app.Activity;
import android.os.Bundle;

public class MyHelloWorld extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

As you can see, Eclipse used the information in our New Android Project dialog to create a usable Java file, which includes a Hello.World package declaration, import statements, a MyHelloWorld activity class, and an onCreate() method.

Next, let's take a look at our UI interface markup code in the main.xml file in the layout folder, as shown in Figure 4-9. The XML code in the main.xml file is quite a bit different from the Java code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
>
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/hello"
    />
</LinearLayout>

It uses tags like those in HTML to define structures that you will be using in your applications. In this case, it is a UI structure that contains a LinearLayout tag, which keeps our UI elements in a straight line, and a TextView tag, which allows us to put our text message on the application screen.

Figure 4.9. The XML UI layout for our activity

Notice that the TextView tag uses an attribute called android:text, which is set equal to @string/hello. This is a reference to the strings.xml file, which we are going to look at next.

So far, we have looked at the Java code, which points to the main.xml file, which in turn points to the strings.xml file. Open that file now (right-click the file's icon in the Package Explorer and select Open). The file will open in a third tab within the Eclipse IDE, as shown in Figure 4-10.

Figure 4.10. The strings.xml file when it first opens

When you open the strings.xml file, you will see that Eclipse has already added two variables: hello and app_name. The string variable named hello is to hold the text that we want our application to display. The app_name variable is to hold the string data that will appear in the title bar at the top of the application. We already specified it in the New Android Project dialog as Hello Great Big Android World Out There!.

Notice the tabs at the bottom of the editing pane labeled Resources and strings.xml. These tabs allow you to switch between the actual XML code and the more user-friendly interface that you see in Figure 4-10, which makes editing Android resources a bit easier than coding straight XML.

Since the app_name value is already specified thanks to our New AndroidProject dialog, let's leave it alone and set the value of hello.

To set the value of hello, all you need to do is to click its name in the left pane of the Resources view and edit its text. Once you click hello, two fields will appear. One contains the string variable name (hello), and the other has its value. In the Value field, type Hello Android World, Here I Come!, as shown in Figure 4-11.

Figure 4.11. Editing the value of hello

Once you have entered a string for the hello variable, click the strings.xml tab at the bottom of the editing pane and take a look at the XML code that Eclipse has generated, as shown in Figure 4-12.

Figure 4.12. The updated XML code

In this view, you can see the actual XML code for the string tags, which are nested inside the <resources> tags that allow us to define resources for our Android application.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello Android World, Here I Come!</string>
    <string name="app_name">Hello Great Big Android World Out There!</string>
</resources>

Each <string> tag has a variable name attribute so we can refer to it by name in our Java code. Tags are ended by the same tag that started them with the addition of a forward slash, like this: <string>XXX</string>.

As you can see in the XML code, Eclipse has created the correct XML code for us to use to write our Hello World message to the smartphone screen. The code reads as follows:

<string name="hello">Hello Android World, Here I Come!</string>

Now it's time to compile and run the application.

To compile and run the application, right-click the HelloWorldAndroid folder icon in the Eclipse Package Explorer and select Run As

Eclipse will compile your app, and then open a version 1.5 emulator window to display a virtual phone on which to run it. When the emulator first starts up, it will display the standard smartphone screen, simulating a background image and standard Android icons for system time, signal strength, and so on.

To actually run the app in the emulator, you need to click the Menu button in the middle-bottom area of the screen, or use the Home button to display your application icons and then select an icon to run. So, your application will not just run in the emulator automatically. You must use the phone interface, finding and running the app as you would in real life. Give it a shot now. Figure 4-13 shows Hello World running in the emulator.

Figure 4.13. Running Hello World in the emulator

Congratulations, you have created your first application. Next, we'll customize its Android icon.

The final thing that we are going to do in this chapter is give our application an icon that will show up on users' Android devices and can be used by them to launch the application. We'll use what you have learned about defining alternate resources by creating an icon that works on small, medium, and large screens. We'll add the appropriate icon files into the correct alternate folders so that Android automatically finds and uses the correct icon for each type of Android screen:

Not surprisingly, this is done by giving your icon an exact name and file format, and putting it into an exact directory. When Android finds an icon file there, it automatically puts it into play as your application's icon. The file must follow these rules:

Here, I'll use my 3D company logo, but you can use any image you like. Also, I use Photoshop for this type of image editing, but you can use any image-editing program you prefer.

The first thing we need to do is to put the logo onto a transparency. Here are the steps to remove the white background from the logo (illustrated in Figure 4-14):

Figure 4.14. Steps to extracting artwork on a solid color background into a transparency mask (alpha channel)

Now, we'll create three standard Android-sized icons by using the Image

Figure 4.15. Using the Image Size command to create a high-resolution, 72-pixel square application icon

Figure 4-16 shows the three different icon.png files, illustrating their relative sizes to the original. Android will now pick the appropriate icon when your application is run.

Figure 4.16. High-, medium-, and low-resolution icons in Photoshop, with transparency (checkerboard)