Exploring user interface screen elements

Most Android applications inevitably need some form of user interface. In this chapter, we discuss the user interface elements available within the Android Software Development Kit (SDK). Some of these elements display information to the user, whereas others gather information from the user. You learn how to use a variety of different components and controls to build a screen and how your application can listen for various actions performed by the user. Finally, you learn how to style controls and apply themes to entire screens. Introducing Android Views and Layouts Before we go any further, we need to define a few terms.This gives you a better understanding of certain capabilities provided by the Android SDK before they are fully introduced. First, let’s talk about the View and what it is to the Android SDK. Introducing the Android View The Android SDK has a Java packaged named android.view.This package contains a number of interfaces and classes related to drawing on the screen. However, when we refer to the View object, we actually refer to only one of the classes within this package: the android.view.View class. The View class is the basic user interface building block within Android. It represents a rectangular portion of the screen.The View class serves as the base class for nearly all the user interface controls and layouts within the Android SDK. Introducing the Android Control The Android SDK contains a Java package named android.widget.When we refer to controls, we are typically referring to a class within this package.The Android SDK includes classes to draw most common objects, including ImageView, FrameLayout, Exploring User Interface Screen Elements 134 Chapter 7 Exploring User Interface Screen Elements EditText, and Button classes.As mentioned previously, all controls are typically derived from the View class. This chapter is primarily about controls that display and collect data from the user.We cover many of these basic controls in detail. Note Do not confuse the user interface controls in the android.widget package with App Widgets. An AppWidget (android.appwidget) is an application extension, often displayed on the Android Home screen. We discuss App Widgets in more depth in Chapter 22, “Extending Android Application Reach.” Introducing the Android Layout One special type of control found within the android.widget package is called a layout. A layout control is still a View object, but it doesn’t actually draw anything specific on the screen. Instead, it is a parent container for organizing other controls (children). Layout controls determine how and where on the screen child controls are drawn. Each type of layout control draws its children using particular rules. For instance, the LinearLayout control draws its child controls in a single horizontal row or a single vertical column. Similarly, a TableLayout control displays each child control in tabular format (in cells within specific rows and columns). In Chapter 8,“Designing User Interfaces with Layouts,” we organize various controls within layouts and other containers.These special View controls, which are derived from the android.view.ViewGroup class, are useful only after you understand the various display controls these containers can hold. By necessity, we use some of the layout View objects within this chapter to illustrate how to use the controls previously mentioned. However, we don’t go into the details of the various layout types available as part of the Android SDK until the next chapter. Note Many of the code examples provided in this chapter are taken from the ViewSamples application. This source code for the ViewSamples application is provided for download on the book website. Displaying Text to Users with TextView One of the most basic user interface elements, or controls, in the Android SDK is the TextView control.You use it, quite simply, to draw text on the screen.You primarily use it to display fixed text strings or labels. Frequently, the TextView control is a child control within other screen elements and controls.As with most of the user interface elements, it is derived from View and is within the android.widget package. Because it is a View, all the standard attributes such as width, height, padding, and visibility can be applied to the object. However, as a text-displaying control, you can apply many other TextView-specific attributes to control behavior and how the text is viewed in a variety of situations. Displaying Text to Users with TextView 135 First, though, let’s see how to put some quick text up on the screen. is the XML layout file tag used to display text on the screen.You can set the android:text property of the TextView to be either a raw text string in the layout file or a reference to a string resource. Here are examples of both methods you can use to set the android:text attribute of a TextView.The first method sets the text attribute to a raw string; the second method uses a string resource called sample_text, which must be defined in the strings.xml resource file. To display this TextView on the screen, all your Activity needs to do is call the setContentView() method with the layout resource identifier in which you defined the preceding XML shown.You can change the text displayed programmatically by calling the setText() method on the TextView object. Retrieving the text is done with the getText() method. Now let’s talk about some of the more common attributes of TextView objects.

Configuring Layout and Sizing

The TextView control has some special attributes that dictate how the text is drawn and flows.You can, for instance, set the TextView to be a single line high and a fixed width. If, however, you put a long string of text that can’t fit, the text truncates abruptly. Luckily, there are some attributes that can handle this problem. Tip When looking through the attributes available to TextView objects, you should be aware that the TextView class contains all the functionality needed by editable controls. This means that many of the attributes apply only to input fields, which are used primarily by the subclass EditText object. For example, the autoText attribute, which helps the user by fixing common spelling mistakes, is most appropriately set on editable text fields (EditText). There is no need to use this attribute normally when you are simply displaying text. The width of a TextView can be controlled in terms of the ems measurement rather than in pixels.An em is a term used in typography that is defined in terms of the point size of a particular font. (For example, the measure of an em in a 12-point font is 12 points.) This measurement provides better control over how much text is viewed, regardless of the 136 Chapter 7 Exploring User Interface Screen Elements font size.Through the ems attribute, you can set the width of the TextView.Additionally, you can use the maxEms and minEms attributes to set the maximum width and minimum width, respectively, of the TextView in terms of ems. The height of a TextView can be set in terms of lines of text rather than pixels.Again, this is useful for controlling how much text can be viewed regardless of the font size.The lines attribute sets the number of lines that the TextView can display.You can also use maxLines and minLines to control the maximum height and minimum height, respectively, that the Textview displays. Here is an example that combines these two types of sizing attributes.This TextView is two lines of text high and 12 ems of text wide.The layout width and height are specified to the size of the TextView and are required attributes in the XML schema: Instead of having the text only truncate at the end, as happens in the preceding example, we can enable the ellipsize attribute to replace the last couple characters with an ellipsis (…) so the user knows that not all text is displayed.

Creating Contextual Links in Text

If your text contains references to email addresses, web pages, phone numbers, or even street addresses, you might want to consider using the attribute autoLink (see Figure 7.1). The autoLink attribute has four values that you can use in combination with each other. When enabled, these autoLink attribute values create standard web-style links to the application that can act on that data type. For instance, setting the attribute to web automatically finds and links any URLs to web pages. Your text can contain the following values for the autoLink attribute: n none: Disables all linking. n web: Enables linking of URLs to web pages. n email: Enables linking of email addresses to the mail client with the recipient filled. n phone: Enables linking of phone numbers to the dialer application with the phone number filled out, ready to be dialed. n map: Enables linking of street addresses to the map application to show the location. n all: Enables all types of linking. Turning on the autoLink feature relies on the detection of the various types within the Android SDK. In some cases, the linking might not be correct or might be misleading.