Building Your Android Development Environment
The TableLayout comes with four predefined rows. I need one row of headings and three rows of data, so this is perfect for me. You’ll note that this is a hard-coded table, with exactly four rows. Don’t think that’s all you can do; Android supports lists with a variable number of rows but it takes a bit more work and a somewhat more in-depth understanding of the Android UI, which is why I’m going to save that for the next installment. This article is intended to introduce the tools and get something running that’s a little more sophisticated than Hello World, and for that a hard-coded table is adequate. Now I need to populate those rows, and I do that by dragging text elements. I have to re-open the Form Widgets drawer and drag a Medium text element (remember, in Android this is called a TextView) over to the row as shown in Figure 9. I use the Properties view to change the text to “Order” and to change the color to #FFFF00, which corresponds to yellow.
Then I start taking advantage of the editing capabilities of the Outline view. Much like a standard word processor, I can copy and paste and move things around within the editor using point-and-click techniques. Figure 10 shows me copying the TextView. Next I paste it in a couple of times under tableRow1 and change the text for the new elements to “Slsp” and “Reason” using the Properties view. I also change the padding-right value to 10px (10 pixels). This keeps the headings from being smashed together. Padding is the HTML way to position things for readability without having to hard-code widths. Once I’ve done that, I can block copy all three by clicking on the first TextView and then shift-clicking on the third; this marks all three TextViews. Right-click/copy, and then right-click on tableRow2 and paste, and voila I’ve got two rows populated.
Not exactly something to write home about; the two rows are exactly identical. Now it’s time to change things a little more, such as differentiating between the headings and the data. I could do that by going into the individual properties pages for each element in the second row, but I thought I’d show you the SEU analog for Android. Figure 11 shows not just the result, but it also shows me clicking on the main.xml tab on the bottom of the WYSIWYG design page. This brings up the source code as shown in Figure 12.
The WYSIWYG designer (the Graphical Layout tab of the editor) is like SDA; it shows what the source code will look like on the actual device. But the main./xml tab is the source code editor, which lets you manually modify the contents of the XML file. And just like manually editing the DDS of a display file, you can completely break your layout by incorrectly editing this file. That aside, it’s a lot easier to do some things. For example, I can easily change the text for each element in the second row and also change the ID. The ID is important; it’s equivalent to the field name in the DDS and is how your Java code will reference these fields. You can leave the generic names the tool generates, but that’s like leaving the name SDA generates (e.g., FLD001 and FLD002). Giving the fields more descriptive names makes the code easier to read and understand (and modify later). It takes a little getting used to; each element is an XML tag and through the tag are various attributes. But it’s not really all that difficult; android:text is the actual displayed text, while android:id is the field ID. After those changes, I did some more things. I removed the android:textColor attribute from all three elements of the second row, which caused them to default back to their basic style of white text. I then block copied those three elements to tableRow3 and tableRow4, changing both the text and the ID to give them unique names.
Figure 13 shows the WYSIWYG designer after I made all the changes. At this point the analogy to SDA breaks down a little bit, because unlike a display file, I actually have a complete working application that I can run. Granted the application only shows the default data I put into the design page, but we can address that in a moment. First, let’s fire up the application.