CHAPTER 5

Using XML‑Based Layouts

While it is technically possible to create and attach widgets to our activity purely through Java code, the way we did in Chapter 4, the more common approach is to use an XML‑based layout file. Dynamic instantiation of widgets is reserved for more complicated scenarios, where the widgets are not known at compile‑time (e.g., populating a column of radio buttons based on data retrieved off the Internet).

With that in mind, it’s time to break out the XML and learn how to lay out Android activities that way.

What Is an XML‑Based Layout?

As the name suggests, an XML‑based layout is a specification of widgets’ relationships to each other – and to their containers (more on this in Chapter 7) – encoded in XML format. Specifically, Android considers XML‑based layouts to be resources, and as such layout files are stored in the directory inside your Android project.

Each XML file contains a tree of elements specifying a layout of widgets and their containers that make up one view hierarchy. The attributes of the XML elements are properties, describing how a widget should look or how a container should behave. For example, if a element has an attribute value of , that means that the text appearing on the face of the button should be rendered in a boldface font style.

Android’s SDK ships with a tool () which uses the layouts. This tool should be automatically invoked by your Android tool chain (e.g., Eclipse, Ant’s ). Of particular importance to you as a developer is that generates the source file within your project, allowing you to access layouts and widgets within those layouts directly from your Java code.

Why Use XML‑Based Layouts?

Most everything you do using XML layout files can be achieved through Java code. For example, you could use to have a button render its text in bold, instead of using a property in an XML layout. Since XML layouts are yet another file for you to keep track of, we need good reasons for using such files.

Perhaps the biggest reason is to assist in the creation of tools for view definition, such as a GUI builder in an IDE like Eclipse or a dedicated Android GUI designer like DroidDraw[4]. Such GUI builders could, in principle, generate Java code instead of XML. The challenge is re‑reading the UI definition to support edits–that is far simpler if the data is in a structured format like XML than in a programming language. Moreover, keeping generated XML definitions separated from hand‑written Java code makes it less likely that somebody’s custom‑crafted source will get clobbered by accident when the generated bits get re‑generated. XML forms a nice middle ground between something that is easy for tool‑writers to use and easy for programmers to work with by hand as needed.

Also, XML as a GUI definition format is becoming more commonplace. Microsoft’s XAML[5], Adobe’s Flex[6], and Mozilla’s XUL[7]all take a similar approach to that of Android: put layout details in an XML file and put programming smarts in source files (e.g., JavaScript for XUL). Many less‑well‑known GUI frameworks, such as ZK[8], also use XML for view definition. While “following the herd” is not necessarily the best policy, it does have the advantage of helping to ease the transition into Android from any other XML‑centered view description language.

OK, So What Does It Look Like?

Here is the from the previous chapter’s sample application, converted into an XML layout file, found in the sample project. This code sample along with all others in this chapter can be found in the Source Code area of http://apress.com.

The class name of the widget – – forms the name of the XML element. Since is an Android‑supplied widget, we can just use the bare class name. If you create your own

widgets as subclasses of , you would need to provide a full package declaration as well (e.g., ).

The root element needs to declare the Android XML namespace:

All other elements will be children of the root and will inherit that namespace declaration.

Because we want to reference this button from our Java code, we need to give it an identifier via the attribute. We will cover this concept in greater detail later in this chapter.

The remaining attributes are properties of this instance:

• indicates the initial text to be displayed on the button face (in this case, an empty string)

• and tell Android to have the button’s width and height fill the “parent”, in this case the entire screen – these attributes will be covered in greater detail in Chapter 7.

Since this single widget is the only content in our activity, we only need this single element. Complex UIs will require a whole tree of elements, representing the widgets and containers that control their positioning. All the remaining chapters of this book will use the XML layout form whenever practical, so there are dozens of other examples of more complex layouts for you to peruse from Chapter 7 onward.

What’s with the @ Signs?

Many widgets and containers only need to appear in the XML layout file and do not need to be referenced in your Java code. For example, a static label () frequently only needs to be in the layout file to indicate where it should appear. These sorts of elements in the XML file do not need to have the attribute to give them a name.

Anything you do want to use in your Java source, though, needs an .

The convention is to use as the id value, where the represents your locally‑unique name for the widget in question. In the XML layout example in the preceding section, is the identifier for the widget.

Android provides a few special values, of the form . We will see some of these in various chapters of this book, such as Chapters 8 and 10.

We Attach These to the Java… How?

Given that you have painstakingly set up the widgets and containers in an XML layout file named stored in , all you need is one statement in your activity’s callback to use that layout: