Taking Advantage of Android OS
A lot cleaner, isn’t it? Of course you’ll need to actually define that style somewhere, and that brings us to the values folder.
If you take a look at Figure 1, you’ll see the directory structure of the res folder. You’ve already seen this folder; one of its subfolders is layout, which in turn contains the main.xml file we’re currently working with. The drawable folders contain images and I’ll touch on those in a moment, but for now direct your focus to the values folder. You’ll see that it contains two files, strings.xml and styles.xml. By default, only the strings.xml file exists; it’s meant to contain all the literal strings that you use on your display. That’s very important for internationalization, but for the purposes of this article I’m going to ignore that file and stick with hardcoded literals. I added a file called styles.xml and in that file I defined all of my styles. You can see styles.xml in Figure 2.
The styles.xml file acts very much like a CSS file. It works as a layer of abstraction, letting me define sets of attributes that together identify a specific look and feel for a business widget, such as “title” or “tablerow.” Because of this, I was able to greatly reduce my main.xml, as shown in Figure 3.
This provides more benefits than just reduced code. By using a style sheet concept, if I decide I want my headings to be green rather than yellow all I have to do is modify one line in my styles.xml file (changing the android:textColor attribute of style heading from #FFFF00 to #00FF00). That’s a big productivity enhancement.
Add Some Functionality
The only downside to all of this is that I haven’t actually added anything! Now I’m going to do so by adding a new widget called a QuickContactBadge. I can start by using the WYSIWYG editor. Let me drag the new QuickContactBadge onto the UI along with a TextView to act as a label. First, though, I should add a layout to group everything.
I need to drag a linear layout from the palette onto the UI. (Refer to the previous article for an introduction to the palette.) I prefer to drag new elements onto the Outline view rather than the WYSIWYG editor; I seem to have finer grained control. In fact, Figure 4 shows an important technique. You’ll see a solid horizontal black bar that represents the insertion point of the new linear layout widget. The vertical bar on the left of the horizontal bar indicates where the new widget will be inserted. Since it’s all the way to the left of the icon that represents the table layout, it’ll be inserted underneath the table layout, rather than within the table layout. To insert the widget within the table layout, gently move your cursor until the vertical bar lines up with the icon for the table row rather than the table layout. You may want to take some time practicing this, as it’s a very important skill to master and not always intuitive.
Once that’s done, drag a medium text view into the newly added linear layout and change the text to “Click to contact:”. Then drag a quick contact badge as shown in Figure 5.
Your UI will change as shown in Figure 6. Note that the quick connect badge has no image. This means it’s time to introduce the drawable folders. I don’t want to spend a lot of time with these now, because Android has a somewhat complicated way of accessing them. For our purposes, though, refer to Figure 1 and the drawable folder. This folder has a single file in it called contact.png, which is a free icon I found on the Internet for contacts. I’m going to make that the icon for the new quick contact badge. All I do is right-click on the badge and from the popup menu select Edit Src as shown in Figure 7.
The Reference Chooser dialog appears as shown in Figure 8 and I can drill into my resources folder to find the icon I want. Then, my WYSIYWG designer changes to show what I’ve selected. You can see the result in Figure 9.
I can do several things to clean this up. I should probably add some padding to the top of the new layout to separate it from the table, and I should also center the text vertically. All of this is relatively easy, and I can do it all through styles leaving my main.xml clean. And while this is all we’re going to do for this article, the work we’ll do on the UI in the next article will be a lot easier without clutter in my main.xml file.