Designing User Interfaces with Layouts

In this chapter,we discuss how to design user interfaces for Android applications. Here we focus on the various layout controls you can use to organize screen elements in different ways.We also cover some of the more complex View objects we call container views. These are View objects that can contain other View objects and controls. Creating User Interfaces in Android Application user interfaces can be simple or complex, involving many different screens or only a few. Layouts and user interface controls can be defined as application resources or created programmatically at runtime. Creating Layouts Using XML Resources As discussed in previous chapters,Android provides a simple way to create layout files in XML as resources provided in the /res/layout project directory.This is the most common and convenient way to build Android user interfaces and is especially useful for defining static screen elements and control properties that you know in advance, and to set default attributes that you can modify programmatically at runtime. Warning The Eclipse layout resource designer can be a helpful tool for designing and previewing layout resources. However, the preview can’t replicate exactly how the layout appears to end users. For this, you must test your application on a properly configured emulator and, more importantly, on your target devices. You can configure almost any ViewGroup or View (or View subclass) attribute using the XML layout resource files.This method greatly simplifies the user interface design process, moving much of the static creation and layout of user interface controls, and basic definition of control attributes, to the XML, instead of littering the code.Developers reserve theability to alter these layouts programmatically as necessary, but they can set all the defaults in the XML template.

This block of XML shows a basic layout with a single TextView.The first line, which you might recognize from most XML files, is required. Because it’s common across all the files, we do not show it in any other examples. Next,we have the LinearLayout element. LinearLayout is a ViewGroup that shows each child View either in a single column or in a single row.When applied to a full screen, it merely means that each child View is drawn under the previous View if the orientation is set to vertical or to the right of the previous View if orientation is set to horizontal. Finally, there is a single child View—in this case, a TextView.A TextView is a control, which is also a View.A TextView draws text on the screen. In this case, it draws the text defined in the “@string/hello” string resource. Creating only an XML file, though,won’t actually draw anything on the screen.A particular layout is usually associated with a particular Activity. In your default Android project, there is only one activity, which sets the main.xml layout by default.To associate the main.xml layout with the activity, use the method call setContentView() with the identifier of the main.xml layout.

Creating Layouts Programmatically

You can create user interface components such as layouts at runtime programmatically, but for organization and maintainability, it’s best that you leave this for the odd case rather than the norm.The main reason is because the creation of layouts programmatically is onerous and difficult to maintain, whereas the XML resource method is visual, more organized, and could be done by a separate designer with no Java skills.The code examples provided in this section are taken from the SameLayout application. This source code for the SameLayout application is provided for download on the book website. The following example shows how to programmatically have an Activity instantiate a LinearLayout view and place two TextView objects within it. No resources whatsoever are used; actions are done at runtime instead.

The XML property name is usually similar to the method calls for getting and setting that same control property programmatically. For instance, android:visibility maps to the methods setVisibility() and getVisibility(). In the preceding example TextView, the methods for getting and setting the TextSize property are getTextSize() and setTextSize(). To display the TextView objects appropriately,we need to encapsulate them within a container of some sort (a layout). In this case,we use a LinearLayout with the orientation set to VERTICAL so that the second TextView begins beneath the first, each aligned to the left of the screen.The two TextView controls are added to the LinearLayout in the order we want them to display. Finally,we call the setContentView() method, part of your Activity class, to draw the LinearLayout and its contents on the screen. As you can see, the code can rapidly grow in size as you add more View controls and you need more attributes for each View.