Android for Programmers Welcome App: Dive-Into Eclipse and the ADT Plugin

This chapter is from the book 

3.5 Building the Welcome App’s GUI with the ADT’s Visual Layout Editor

Next, you’ll create the GUI for the Welcome app. The ADT’s Visual Layout Editor allows you to build your GUI by dragging and dropping GUI components, such as Buttons, TextViews, ImageViews and more, onto an app. For an Android app that you create with Eclipse, the GUI layout is stored in an XML file called main.xml, by default. Defining the GUI in XML allows you to easily separate your app’s logic from its presentation. Layout files are considered app resources and are stored in the project’s res folder. GUI layouts are placed within that folder’s layout subfolder. When you double click the main.xml file in your app’s /res/layout folder, the Visual Layout Editor view is displayed by default (Fig. 3.7). To view the XML contents of the file (Fig. 3.8), click the tab with the name of the layout file (main.xml in this case). You can switch back to the Visual Layout Editor by clicking the Graphical Layout tab. We’ll present the layout’s XML in Section 3.6.

The Default GUI

The default GUI for a new Android app consists of a LinearLayout with a black background and contains a TextView with the text "Hello World, Welcome!" (Fig. 3.7). A LinearLayout arranges GUI components in a line horizontally or vertically. A TextView allows you to display text. If you were to execute this app in an AVD or on a device, you’d see the default black background and text.

Figure 3.9 lists some of the layouts from the android.widget package.¹ We’ll cover many more GUI components that can be placed in layouts—for a complete list, visit:

developer.android.com/reference/android/widget/package-summary.html

Fig. 3.9 Android layouts (package android.widget).

Layout	Description
FrameLayout	Allocates space for a single component. You can add more than one component to this layout, but each will be displayed from the layout’s upper-left corner. The last component added will appear on top.
LinearLayout	Arranges components horizontally in one row or vertically in one column.
RelativeLayout	Arranges components relative to one another or relative to their parent container.
TableLayout	Arranges components into a table of rows. You can then use the TableRow layout (a subclass of LinearLayout) to organize the columns.

Configuring the Visual Layout Editor to use the Appropriate Android SDK

If you’ve installed multiple Android SDKs, the ADT Plugin selects the most recent one as the default for design purposes in the Graphical Layout tab—regardless of the SDK you selected when you created the project. In Fig. 3.7, we selected Android 2.3.3 from the SDK selector drop-down list at the top-right side of the Graphic Layout tab to indicate that we’re designing a GUI for an Android 2.3.3 device.

Deleting and Recreating the main.xml File

For this application, you’ll replace the default main.xml file with a new one that uses a RelativeLayout, in which components are arranged relative to one another. Perform the following steps to replace the default main.xml file:

1. Make sure main.xml is closed, then right click it in the project’s /res/layout folder and select Delete to delete the file.
2. Right click the layout folder and select New > Other... to display the New dialog.
3. In the Android node, select Android XML File and click Next > to display the New Android XML File dialog.
4. Configure the file name, location and root layout for the new main.xml file as shown in Fig. 3.10, then click Finish.
   

   Fig. 3.10 Creating a new main.xml file in the New Android XML File dialog.

Configuring the Visual Layout Editor’s Size and Resolution

Figure 3.11 shows the new main.xml file in the Visual Layout Editor. Android runs on a wide variety of devices, so the Visual Layout Editor comes with several device configurations that represent various screen sizes and resolutions. These can be selected from the Device Configurations drop-down list at the top-left side of the Graphic Layout tab (Fig. 3.11). If these predefined configurations do not match the device you wish to target, you can create your own device configurations from scratch, or by copying and modifying the existing ones.

Our primary testing device for this book was the Samsung Nexus S, which has a 4-inch screen with 480-by-800 (WVGA) resolution. When designing an Android GUI, you typically want it to be scalable so that it displays properly on various devices. For this reason, the Visual Layout Editor’s design area does not need to precisely match your actual device’s. Instead, you can choose a similar device configuration. In Fig. 3.11, we selected the 3.7in WVGA (Nexus One) option—this device has the same WVGA resolution as the Nexus S, but a slightly smaller screen size. Many of today’s smartphones have 480-by-800 or 480-by-854 resolution.

Images and Screen Sizes/Resolutions

Because Android devices have various screen sizes, resolutions and pixel densities (that is, dots per inch or DPI), Android allows you to provide separate images (and other resources) that the operating system chooses based on the actual device’s pixel density. For this reason your project’s res folder contains three subfolders for images—drawable-hdpi (high density), drawable-mdpi (medium density) and drawable-ldpi (low density). These folders store images with different pixel densities (Fig. 3.12).

Fig. 3.12 Android pixel densities.

Density	Description
ldpi	Low density—approximately 120 dots-per-inch.
mdpi	Medium density—approximately 160 dots-per-inch.
hdpi	High density—approximately 240 dots-per-inch.
xhdpi	Extra high density—approximately 320 dots-per-inch.
nodpi	Indicates that a resource should not be scaled regardless of screen density.

Images for devices that are similar in pixel density to our testing device are placed in the folder drawable-hdpi. Images for medium- and low-density screens are placed in the folders drawable-mdpi and drawable-ldpi, respectively. As of Android 2.2, you can also add a drawable-xhdpi subfolder to the app’s res folder to represent screens with extra high pixel densities. Android will scale images up and down to different densities as necessary.

Step 1: Adding Images to the Project

You’ll now begin designing the Welcome app. In this chapter, we’ll use the Visual Layout Editor and the Outline window to build the app, then we’ll explain the generated XML in detail. In subsequent chapters, we’ll also edit the XML directly.

For this app, you’ll need to add the Deitel bug image (bug.png) and the Android logo image (android.png) to the project—we’ve provided these in the images folder with the book’s examples. Perform the following steps to add the images to this project:

1. In the Package Explorer window, expand the project’s res folder.
2. Locate and open the images folder provided with the book’s examples, then drag the images in the folder onto the res folder’s drawable-hdpi subfolder.

These images can now be used in the app.

Step 2: Changing the Id Property of the RelativeLayout

You can use the Properties window to configure the properties of the selected layout or component without editing the XML directly. If the Properties window is not displayed, you can display it by double clicking the RelativeLayout in the Outline window. You can also select Window > Show View > Other..., then select Properties from the General node in the Show View dialog. To select a layout or component, you can either click it in the Visual Layout Editor or select its node in the Outline window (Fig. 3.13). The Properties window cannot be used when the layout is displayed in XML view.

You should rename each layout and component with a relevant name, especially if the the layout or component will be manipulated programmatically (as we’ll do in later apps). Each object’s name is specified via its Id property. The Id can be used to access and modify component without knowing its exact location in the XML. As you’ll see shortly, the id can also be used to specify the relative positioning of components in a RelativeLayout.

Select the RelativeLayout, then scroll to the Id property in the Properties window and set its value to

@+id/welcomeRelativeLayout

The + in the syntax @+id indicates that a new id (that is, a variable name) should be created with the identifier to the right of the /. The Properties and Outline windows should now appear as in Fig. 3.14.

Step 3: Changing the Background Property of the RelativeLayout

The layout’s default background color is black, but we’d like it to be white. Every color can be created from a combination of red, green and blue components called RGB values—each is an integer in the range 0–255. The first value defines the amount of red in the color, the second the amount of green and the third the amount of blue. When using the IDE to specify a color you typically use hexadecimal format. In this case, the RGB components are represented as values in the range 00–FF.

To change the background color, locate the Background property in the Properties window and set its value to #FFFFFF (Fig. 3.15). This represents white in the hexadecimal format #RRGGBB—the pairs of hexadecimal digits represent the red, green and blue color components, respectively. Android also supports alpha (transparency) values in the range 0–255, where 0 represents completely transparent and 255 represents completely opaque. If you wish to use alpha values, you can specify the color in the format #AARRGGBB, where the first two hexadecimal digits represent the alpha value. For cases in which both digits of each component of the color are the same, you can use the formats #RGB or #ARGB. For example, #FFF will be treated as #FFFFFF.

Step 4: Adding a TextView

Next, we’ll add a TextView to the user interface. In the Form Widgets list at the left of the Visual Layout Editor window, locate TextView and drag it onto the design area (Fig. 3.16). When you add a new component to the user interface, it’s automatically selected and its properties are displayed in the Properties window.

Step 5: Configuring the TextView’s Text Property Using a String Resource

According to the Android documentation for application resources

developer.android.com/guide/topics/resources/index.html

it’s considered a good practice to “externalize” strings, string arrays, images, colors, font sizes, dimensions and other app resources so that you, or someone else on your team, can manage them separately from your application’s code. For example, if you externalize color values, all components that use the same color can be updated to a new color simply by changing the color value in a central resource file.

If you wish to localize your app in several different languages, storing the strings separately from the app’s code allows you to change them easily. In your project’s res folder, the subfolder values contains a strings.xml file that’s used to store strings. To provide localized strings for other languages, you can create separate values folders for each language. For example, the folder values-fr would contain a strings.xml file for French and values-es would contain a strings.xml file for Spanish. You can also name these folders with region information. For example, values-en-rUS would contain a strings.xml file for U.S. English and values-en-rGB would contain a strings.xml file for United Kingdom English. For more information on localization, see

developer.android.com/guide/topics/resources/
   providing-resources.html#AlternativeResources
developer.android.com/guide/topics/resources/localization.html

To set the TextView’s Text property, we’ll create a new string resource in the strings.xml file.

1. Ensure that the TextView is selected.
2. Locate its Text property in the Properties window, click its default value, then click the ellipsis button () at the right size of the property’s value field to display the Resource Chooser dialog.
3. In the Resource Chooser dialog, click the New String... button to display the Create New Android String dialog (Fig. 3.17).
   

   Fig. 3.17 Create New Android String window.

4. Fill the String and New R.string fields as shown in Fig. 3.17, then click OK to dismiss the Create New Android String dialog and return to the Resource Chooser dialog.
5. The new string resource named welcome is automatically selected. Click OK to select this resource.

In the Properties window, the Text property should now appear as shown in Fig. 3.18. The syntax @string indicates that an existing string resource will be selected from the strings.xml file, and the name welcome indicates which string resource to select.

A key benefit of defining your string values this way is that you can easily localize your app by creating additional XML resource files for string resources in other languages. In each file, you use the same name in the New R.string field and provide the internationalized string in the String field. Android can then choose the appropriate resource file based on the device user’s preferred language. For more information on localization, visit

developer.android.com/guide/topics/resources/localization.html

Step 6: Configuring the TextView’s Text size and Padding top Properties—Scaled Pixels and Density-Independent Pixels

The sizes of GUI components and text in Android can be specified in several different units (Fig. 3.19). The documentation for supporting multiple screen sizes

developer.android.com/guide/practices/screens_support.html

Fig. 3.19 Measurement units.

Unit	Description
px	pixel
dp or dip	density-independent pixel
sp	scale-independent pixel
in	inches
mm	millimeters

recommends that you use density-independent pixels for the dimensions of GUI components and other screen elements and scale-independent pixels for font sizes.

Defining your GUIs with density-independent pixels enables the Android platform to automatically scale the GUI, based on the pixel density of the actual device’s screen.

One density-independent pixel is equivalent to one pixel on a screen with 160 dpi (dots per inch). On a screen with 240 dpi, each density-independent pixel will be scaled by a factor of 240/160 (i.e., 1.5). So, a component that’s 100 density-independent pixels wide will be scaled to 150 actual pixels wide. On a screen with 120 dpi, each density-independent pixel is scaled by a factor of 120/160 (i.e., .75). So, the same component that’s 100 density-independent pixels wide will be 75 actual pixels wide. Scale-independent pixels are scaled like density-independent pixels, and they’re also scaled by the user’s preferred font size specified on the device. [Note: At the time of this writing, users cannot yet change the preferred font size on Android devices, but this feature is expected in the future.]

You’ll now increase the size of the TextView’s font and add some padding above the TextView to separate the text from the edge of the device’s screen.

1. To change the font size, ensure that the TextView is selected, then change its Text size property to 40sp.
2. To add some space between the top edge of the layout and the TextView, set the Layout margin top property in the Misc section of the Properties window to 10dp.

Step 7: Configuring Additional TextView Properties

Configure the following additional TextView’s properties as well:

1. Set its Id property to @+id/welcomeTextView.
2. Set its Text color property to #00F (blue).
3. Set its Text style property to bold. To do so, click the Value field for this property, then click the ellipsis button () to display the dialog for selecting the font style. Click the bold checkbox, then click OK to set the text style.
4. To center the text in the TextView if it wraps to multiple lines, set its Gravity property to center. To do so, click the Value field for this property, then click the ellipsis button to display a dialog with the Gravity property’s options (Fig. 3.20). Click the center checkbox, then click OK to set the value.
   

   Fig. 3.20 Options for the gravity attribute of an object.

The Visual Layout Editor window should now appear as shown in Fig. 3.21.

Step 8: Adding ImageViews to Display the Android Logo and the Deitel Bug Logo

Next, you’ll add two ImageViews to the GUI to display the images that you added to the project in Step 1. When you first drag an ImageView onto the Visual Layout Editor, nothing appears. For this reason, we’ll use the Outline window to add the ImageViews. Perform the following steps:

1. Drag an ImageView from the Images & Media category in the Visual Layout Editor’s Palette and drop it onto the Outline window as shown in Fig. 3.22. The new ImageView appears below the welcomeTextView node. This does not indicate that this component will appear below the TextView in the GUI. This requires setting the Layout below property, which we’ll do in a moment. [Note: If you drag the ImageView over the welcomeTextView and hover for a moment, a green rectangle with sections will appear around the welcomeTextView. If you then drag the ImageView over one of those sections and drop it, the Visual Layout Editor can set the relative positioning for you.]

   

   Fig. 3.22 Dragging and dropping an ImageView onto the Outline window.

2. Set the ImageView’s Id property to @+id/droidImageView. The Outline window now shows the object’s name as droidImageView.
3. Set the droidImageView’s Layout below property to @id/welcomeTextView to position the ImageView below the welcomeTextView. To do so, click the Value field for this property, then click the ellipsis button to display the Reference Chooser dialog (Fig. 3.23). The ID node contains the names of the objects in the GUI. Expand the ID node and select welcomeTextView.
   

   Fig. 3.23 Selecting the value for the droidImageView’s Layout below property.

4. Set the droidImageView’s Layout center horizontal property to true to center the ImageView in the layout.
5. Set the droidImageView’s Src property to the image that should be displayed. To do so, click the Value field for this property, then click the ellipsis button to display the Reference Chooser dialog (Fig. 3.24). The Drawable node contains the resources in your app’s drawable folders within the res folder. In the dialog, expand the Drawable node and select android, which represents the android.png image.
   

   Fig. 3.24 Selecting the value for the droidImageView’s Src property.

6. Repeat items 1–5 above to create the bugImageView. For this component, set its Id property to @+id/bugImageView, its Src property to bug and its Layout below property to droidImageView.

The Visual Layout Editor window should now appear as shown in Fig. 3.25.