Creating the User Interface - Building and Publishing Your First Application - Android Application Development For Dummies, 3rd Edition (2015)

Android Application Development For Dummies, 3rd Edition (2015)

Part II. Building and Publishing Your First Application

Chapter 4. Creating the User Interface

In This Chapter

arrow Setting up the Silent Mode Toggle application

arrow Designing the layout

arrow Developing the user interface

arrow Adding an image and a button widget

arrow Making a launcher icon

arrow Previewing your work

In Chapter 3, you discover what Android is and how to build your first application. Chapter 4 helps you delve into the fun stuff: building a real application and publishing it to the Google Play Store.

The application you build in this chapter allows the user to toggle the ringer mode on the phone by simply pressing a button. This application seems simple, but it solves a real‐world problem.

Creating the Silent Mode Toggle Application

Create the new application by choosing File⇒New Module from inside the project you created in Chapter 3. Choose Phone and Tablet Application from the list, and then click Next. Use Table 4-1 for your module settings.

Table 41 Project Settings for Silent Mode Toggle

Setting

Value

Application Name

Silent Mode Toggle

Module Name

Silent Mode Toggle

Package Name

com.dummies.silentmodetoggle

Minimum Required SDK

API 21: Android 5.0 Lollipop

On the Add an Activity page, choose Blank Activity and click Next. Use the settings in Table 4-2 to create your activity.

Table 42 Settings for Blank Activity

Setting

Value

Activity Name

MainActivity

Layout Name

activity_main

Title

MainActivity

Menu Resource Name

menu_main

Now click Finish. You should now have the Silent Mode Toggle application in your Project view, as shown in Figure 4-1.

image

Figure 41: The Silent Mode Toggle application in Android Studio.

Laying Out the Application

When you have the Silent Mode Toggle application created inside Android Studio, it’s time for you to design the application’s user interface, the part of an application that users interact with.

Your application will have a single image centered in the middle of the screen to toggle silent mode. The image will also provide visual feedback to let the user know whether the phone is in silent mode or normal ringer mode. Figure 4-2 shows what the finished application will look like.

image

Figure 42: The Silent Mode Toggle application in (left) normal ringer mode and in silent ringer mode (right).

It’s time to start developing the user interface. First, open the user interface layout file that you created when you created the new blank activity in the previous section. The file is called activity_main.xml, and you can find it by expanding SilentModeToggle, res, andlayout as in Figure 4-1. Double‐click it to open it.

Then make sure that you’re in the Text tab of your layout by clicking the Text tab as in Figure 4-3.

image

Figure 43: The Text tab for the activity_main.xml layout file.

When you’re on the Text tab, delete the XML and replace it with the ­following. Your layout should now look like this:

<?xml version="1.0" encoding= encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" >


</FrameLayout>

A view occupies a rectangular space on the screen and is responsible for drawing and event handling. All items that can show up on a device screen are views. The View class is the superclass that all items inherit from in Android. This includes all layout classes, such as the FrameLayout used in this example.

The first line in every XML file provides the default XML declaration, letting text editors such as Android Studio and platforms such as Android know what type of file it is:

<?xml version="1.0" encoding="utf‐8"?>

Working with views

As stated in the previous section, views in Android are the basic building blocks of user interface components. Any time you implement a user ­interface component in Android such as a layout or TextView, you’re using a view. Every view must be configured, and the next sections explain the ­configuration you created for your FrameLayout. You can also see them summarized in Table 4-2.

Setting layout_width and layout_height values

Before a view can be presented to the screen, a couple of settings must be configured on the view so that Android knows how to lay out the view on the screen. The attributes that are required, layout_width and layout_height, are part of the LayoutParams in the Android SDK.

The layout_width attribute specifies the given width of a view, and the layout_height attribute specifies the given height of a view.

Setting match_parent and wrap_content values

The layout_width and layout_height attributes can take any pixel value or density‐independent pixel value to specify their respective dimensions. However, two of the most common values for layout_width and layout_height are the match_parent andwrap_content constants.

The match_parent value informs the parent view to make this view the same width/height as itself. The wrap_content value informs Android to occupy only as much space as needed to show the view’s content. As the view’s content grows, as would happen with aTextView when text is added, the view’s dimension grows (see Table 4-3).

Table 43 XML Layout Attributes

Layout

What It Does

xmlns:android=". . ."

Defines the XML namespace for android:. . . that you will use in your XML elements. This will always be http://schemas.android.com/apk/res/android.

android:id=" @+id/content"

Sets the ID of this view to id/content. All references to resources in Android XML files start with the @ symbol. And because you are defining a new ID resource, you must also have a + symbol after the @.

android:layout_width="match_parent"

Informs the view that it should fill as much horizontal space as it can, up to the size of its parent, to make its own width the same as its parent’s.

android:layout_height="match_parent"

Informs the view that it should fill as much vertical space as it can, up to the size of its parent, to make its own height the same as its parent’s.

In general, you will set your view parameters in XML. If you’re creating views dynamically via code, though, you can configure the layout parameters via Java code. To find out more about dynamic creation of views, see the API samples that come with the Android SDK.

Using Android layouts

When you create a user interface, you sometimes have to lay out components relative to each other, or in a table, or in a list or grid. Thankfully, the engineering geniuses at Google who created Android thought of all this and provided the necessary tools to create those types of layouts. Table 4-4 briefly introduces the common types of layouts available in Android.

Table 44 Android SDK Layouts

Layout

What It Does

FrameLayout

Designed to block out an area on the screen to display a single item. You can add multiple children to a FrameLayout, but all children are pegged to the upper left area of the screen by default. Children are drawn in a stack, with the most recently added child at the top of the stack.

This layout is commonly used as a way to lay out views on top of each other, or to lay them out relative to their parent.

LinearLayout

Arranges its children in a single row or column.

RelativeLayout

Lets the positions of the children be described in ­relation to each other or to the parent.

GridLayout

Arranges its children into a grid.

Other, different types of layout tools exist, such as a TabHost for creating tabs and DrawerLayout for side “drawers” that hide and display views. Programmers tend to use these layout tools in special‐case scenarios. The items in Table 4-4 outline the most commonly used layouts.

For now, this example uses the simplest layout, the FrameLayout. You’ll use more advanced layouts in later chapters.

Adding an Image to Your Application

You will add a ringer icon to your app, so first you need to download the icon, of course. You can download the image from this book’s source code, available from this book’s website (at http://www.dummies.com/go/androidappdevfd3e), or you can use your own.

Adding images to a project is simple: Drag them from the folder where they’re stored to the src/main/res/drawable‐xxhdpi folder, as shown in Figure 4-4.

image

Figure 44: Dragging the image file into the src/main/res/drawable‐xxhdpi folder.

For the Silent Mode Toggle application, you need two ringer images: off and on. Be sure to put both images in the src/main/res/drawable‐xxhdpi folder.

Why you should worry about density folders

Android supports various screen sizes and densities. Elsewhere in this chapter, we mention placing an image in the xxhdpi folder, which is for extra‐high‐density devices. What about low‐ and high‐density devices? If Android cannot find the requested resource in the desired density, it uses whatever density resource it can find and scales it appropriately. If your device has a higher pixel density than Android can find, Android scales the image up to the necessary size, resulting in resize “jaggies.” To avoid this problem, create multiple versions of your image to target multiple screen densities. For more information, see the Supporting Multiple Screens page in the Android documentation at http://d.android.com/guide/practices/screens_support.html. And to see a list of which are the most common screen densities, visit http://d.android.com/about/dashboards/index.html.

To follow along in the rest of the chapter, be sure that the images are named this way:

· Normal mode image: ringer_on.png

· Silent mode image: ringer_off.png

If your images aren’t named correctly, you can rename them now.

When you drag images into Android Studio, it regenerates the build/­generated folder, and the R.java file is updated to include a reference to the two new images you added.

You can use the references to these resources to add images to your layout in code or in XML definition. You declare them in the XML layout in the ­following section.

To add an image to the layout, type the following into the activity_main.xml file, overwriting the current content of the file:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:foreground="?android:attr/selectableItemBackground"
>

<ImageView
android:id="@+id/phone_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ringer_on"/>

</FrameLayout>

This code adds the ImageView inside the FrameLayout. An ImageView allows you to project an image to the screen on the device.

Setting image properties

Your ImageView contains a few new parameter attributes:

· The android:id="@+id/phone_icon" property: The id attribute defines the unique identifier for the view in the Android system. You can find an in‐depth explanation of the android:id value nomenclature at http://d.android.com/guide/topics/ui/declaringlayout.html.

· The layout_width and layout_height properties: You used layout_width and layout_height in your FrameLayout, but there you set them to match_parent. For the ImageView, we want the ImageView’s size to be the same as the image it’s showing, so we’ll set it to have a layout_width and layout_height of wrap_content to “wrap” the content inside the view. If we had set the height and width to be match_parent, Android would have scaled the image up much too large to take up the full screen. Try it!

· The layout_gravity property: This property defines how to place the view (both its x‐ and y‐axes) with its parent. In this example, the value is defined as the center constant. Since the ImageView is smaller than the FrameLayout, usinglayout_gravity=center instructs the Android system to place the ImageView in the center of the FrameLayout rather than in the default location of the upper left. You can use many other constants, such as center_vertical, center_horizontal, top,bottom, left, right, and many more. See the FrameLayout.LayoutParams Android documentation for a full list.

· The android:src="@drawable/ringer_on" property: You use this property to set the image that you want to show up on the screen.

Notice the value of the src property — "@drawable/ringer_on". You can reference drawable resources via XML by typing the “at” symbol (@) and the type and id of the resource you want.

Certain Android attributes begin with the layout_ prefix — android: layout_width, android:layout_height, and android:layout_ gravity are all examples. The layout_ convention tells you that the attribute relates to the view’s parent. Attributes that don’t begin with layout_ pertain to the view itself. So the ImageView’s android:src attribute tells the ImageView which image to use, but its android:layout_gravity tells the ImageView’s parent (the FrameLayout, in this case) to lay out the ImageView in the center of the parent.

Setting drawable resources

In your ImageView, you set your image src to @drawable/ringer_on. You don’t type @drawable‐xxhdpi/ringer_on for the drawable resource identifier, because it’s Android’s job (not yours) to figure out the correct size image for the current device’s screen. At runtime, Android determines which density is correct for that device, and loads the closest matching drawables.

For example, if the app is running on a medium‐density device and the requested drawable resource is available in the drawable‐mdpi folder, Android uses that resource. Otherwise, it uses the closest match it can find. Support for various screen sizes and densities is a broad topic (and can be complex!). For an in‐depth view into this subject, read the “Supporting Multiple Screens” article in the Android documentation at http://d.android.com/guide/practices/screens_support.html.

The ringer_on portion of the identifier identifies the drawable you want to use. The image filename is ringer_on.png. If you were to open the R.java file in the build/generated folder, you would see a static field with the name phone_on.

You can use code completion to see the available resources in Android Studio. Place the cursor directly after @drawable/ in the src property of the ImageView in the Android Studio editor, and press Ctrl+spacebar. The code‐completion window opens, as shown in Figure 4-5. The other resource names in the window are other options you could choose for the src portion of the drawable definition.

image

Figure 45: Code ­completion, with resources.

Creating a Launcher Icon for the Application

When your app is installed, its icon helps users identify its presence in the application launcher. When you create the Silent Mode Toggle application, Android Studio automatically includes a default launcher icon, as shown on the left in Figure 4-6.

image

Figure 46: The default icon (left) and a unique icon (right).

You should change this icon to one of your own. You can create your own (as shown in the following section) or use the one from the downloaded source code at http://www.dummies.com/go/androidappdevfd3e.

Designing a custom launcher icon

Creating your own launcher icons is fairly easy, thanks to the Android project. The article “Iconography” in the Android documentation covers all aspects of icon design — a how‐to manual for creating icons for the Android platform, a style guide, a list of do’s and don’ts, materials and colors, size and positioning guidelines, and (best of all) icon templates that you can use. You can find useful resources for designing icons at www.google.com/design/spec/style/icons.html and http://d.android.com/design/style/iconography.html.

Working with templates

After you download the Android SDK, these icon templates and materials are available for you to use immediately on your computer’s hard drive. Navigate to your Android SDK installation directory (see Chapter 2), and from there navigate to the docs/shareables directory. You’ll find various .zip files that contain templates and samples. Open the templates in the image editing program of your choice, and follow the design guidelines in the documentation to create your next rockin’ icon set.

Matching icon sizes with screen densities

Because every screen density requires an icon in a different size, you, as the designer, need to know how large the icon should be. Each density must have its own icon size to look appropriate (no pixilation, stretching, or compressing) on the screen.

Table 4-5 summarizes the finished icon sizes for each of the three generalized screen densities.

Table 45 Finished Icon Sizes

Screen Density

Icon Size in Pixels

Low‐density screen (ldpi)

36 x 36

Medium‐density screen (mdpi)

48 x 48

High‐density screen (hdpi)

72 x 72

Extra‐high‐density screen (xhdpi)

96 x 96

Extra‐extra‐high density screen (xxhdpi)

144 x 144

Extra‐extra‐extra‐high density screen (xxxhdpi)
In general, xxxhdpi is not currently used for more assets. It’s only used for providing extra‐large launcher icons on some devices.

192 x 192

In general, you won’t need to supply most of your assets in xxxhpi (triple‐x). The only asset you should use xxxhdpi for is your launcher icon. Some Android devices use the additional resolution to provide an extra‐large launcher icon. On these devices, adding anxxxhdpi launcher icon will make your app icon look pretty. But don’t bother adding xxxhdpi assets for other images because the highest resolution that’s currently used in devices is only xxhdpi (double‐x).

Adding a custom launcher icon

To place your custom launcher icon into the project, follow these steps:

1. Rename the image icon to ic_launcher.png.

2. Create the drawable‐xxxhdpi folder in src/main/res.

3. Drag your icon into the drawable‐xxxhdpi folder.

Android Studio asks whether you want to overwrite the existing ic_launcher.png.

4. Click Yes.

The ic_launcher.png file is now in the drawable‐xxxhdpi folder.

You’re not done yet! For the other drawable folders, you need to delete the other versions of ic_launcher.png or provide your own versions.

If you don’t delete the icons of other densities in their respective folders, users who have a low‐ or high‐density device receive the default launcher icon (refer to Figure 4-6), whereas the xxhdpi‐density devices receive the new icon that you included in the project.

Previewing the Application in the Visual Designer

To take a look at what the layout looks like in the visual designer, click the Design tab to view it, as shown in Figure 4-7.

image

Figure 47: The Design view of the layout.

The visual designer has many different possible configurations.

Selecting the Devices drop‐down list in the visual designer shows you which devices you can simulate your layout on. You can test out what your app will look like on many different kinds of phones and tablets.

Selecting the Orientation drop‐down list allows you to see what your app looks like in portrait and landscape modes.

You can also preview what your app looks like in other languages, on older versions of Android (if you enabled backward compatibility), and on devices that have different default themes.

Using the visual designer allows you to quickly test out your app on various configurations so you can fix bugs quickly without having to load up an emulator for each and every one of those configurations. It’s not a substitute for actually testing on a device, but it can make your development much quicker.

Try out a few other configurations!