Building Your Android Development Environment
Define the User Interface
The center of the workbench becomes a WYSIWYG representation of the application, as you can see in Figure 4. It’s SDA for the Android phone! Actually, it’s quite a bit more sophisticated than that because of the number of widgets it supports and the hierarchical nature of an Android display, but it’s the same principle. Add some things to the UI and see how it looks. It’s just a bit more interactive, as we’ll see. One note: Like All Eclipse displays, it’s very easy to modify the layout as you need. Figure 4 also shows how I widen the palette; since I typically have more width than I need for the black WYSIWYG rectangle that represents the actual device, I make the palette wider to make it easier to work with.
While the WYSIWYG designer is very powerful and you can actually drag and drop UI elements right onto the screen, an alternate method exists that I find a lot easier to use—the Outline view. Figure 5 shows how easy it is to do things with the Outline. In this case, I’m switching the orientation of the layout from horizontal to vertical (orientation addresses how things are laid out, whether the various widgets go from right to left first, or stack on each other from top to bottom).
While you can change some things using the context menu (the menu that pops up when you right-click on something), most of your changes need to be made using either the Properties view or directly in the source code. Figure 6 shows the property view. Double-clicking on the TextView widget (the one that says Hello World, IBMi22Activity!”) brings up the Properties view at the bottom of the workbench and populates it with all the properties and values of that widget. Now you can scroll through the properties to change the things you want to change.
Figure 7 shows me changing the value of the Text property to “Hot Orders.” Other things that need to change are the color, which I change to a standard HTML value of #FF0000 (which translates to “red”). Another thing that needs to change is a property named “gravity.” You can probably best think of gravity as the analog of alignment in a Word document. Since Android is all about nested containers, you must address both the gravity of objects within a container and the gravity of an object within its parent container. A full discussion of all the ramifications can’t be done here, but gravity is very important. If you really want to gain some understanding of the topic, I suggest this blog post as a great starting point. Anyway, you’ll see in Figure 8 that I’ve changed the test of the application to “Hot Orders,” colored it red and centered it. Time to add some more content.
The TextView used as the title was automatically added for me when I created the application. Now I need to add my own widgets. At this point, I need to have some idea of what the application will look like. Designing an Android application is still something of an artistic endeavor, just as it is to design a good subfile application. Many of the same concepts apply, including corporate standards and drawing mockups. A whole cottage industry has grown around helping you design your applications, including both free and for-fee sites. This page might give you a little idea of what’s out there. In my case, though, I already know what I want to do: I want to have a table of orders with columns for order number, salesperson and a description of what makes this order hot. To do that, I need to add a table layout and then modify it. Layout components are in the palette drawer labeled “Layouts,” so I expand that drawer and drag a TableLayout component over to the Outline view. I position it right under the TextView and drop it. Note that dark horizontal line; it’s a standard GUI widget for placing elements within an outline and it provides fine-grained positioning in a manner I find easier to use than trying to drop it onto the WYSIWYG. Your preferences may vary, and it’s nice to have both options.