Here's an example of a super-basic layout XML file:
The first line is a typical XML declaration statement. The next line is the start of a LinearLayout view object, which serves as a visual container for other view objects. The first attribute of the LinearLayout tag defines the XML namespace (that has to be the first attribute of the first view object of every Android layout file you create). This LinearLayout container is set to fill the entire width and height of its parent container. In this case, since it is the main container object, it fills the whole screen. The "android:orientation" attribute is set to "vertical" which means that all of the child objects within the LinearLayout will be arranged vertically, even if one or more objects could fit together horizontally. Seeing the LinearLayout for the first time reminded me of the VBox and HBox layout elements in Adobe Flex, which also uses a domain-specific XML language to define screen layouts.
The second object in the layout (the first within the LinearLayout) is a TextView object, which as you might guess displays text. The "android:id" attribute assigns an id value of "exampleText" to the TextView object. The "android:layout_height" and "android:layout_width" attributes are set to "wrap_content." Normally, that means that the object will only be large enough to contain whatever's inside of it plus any padding, but it won't be in this case (which I'll explain shortly). The left and right padding are set to 5dip (density-independent pixels), a pixel scale used by Android to accomodate the different device screen sizes. The other attributes are fairly self-explanatory except for "android:layout_weight", which is something more easily explained by the examples coming up shortly.
The third and final object is the Button object, and you can guess what it does. Note that its "android:layout_width" attribute is set to "fill_parent", so it will be as wide as the screen is, even if the Android device is re-oriented from portrait to landscape.
Now, here's how the layout looks in the Android emulator that comes with the Android Eclipse plugin:
As I mentioned before, the height and width of the TextView object was set to "wrap_content", meaning that the TextView should be just as wide and as tall as it needs to be to enclose whatever is inside it plus the padding. The width is just long enough to contain the content horizontally, but why is it so tall? It's because of the "android:layout_weight" attribute. In Android, you cannot do percentage-based heights and widths like you can with HTML elements. Instead, you can assign layout weight values to view objects to assign a level of "importance." More important objects take up more of the available layout space, while less important objects take up the remainder.
The default layout weight of all view objects is zero. An "android:layout_weight" value of 1 denotes a more important object, while a value of 2 denotes an even more important object. Right now, both the TextView and the Button have a layout weight of 1, so they take up an equal amount of vertical space (because they are in a vertically-organized LinearLayout). If the Button's layout weight was changed to 0, however:
...then the Button's height gets reduced in deference to the importance of the TextView.
Personally, I'm still getting the hang of using layout weights. Fortunately, I don't have to run the layout through the emulator every time I want to see the results of my latest change to the XML. The Android plugin for Eclipse lets you view layouts either as raw XML or within a graphical layout view that lets you add view objects to your layout via drag-and-drop and see the results of the property changes you make as you make them:
It's not as nice as the layout designer in Flex/Flash Builder, but it's still nice to have.
In my next Android post, I'll show how to attach this layout to an Activity object, and make a few changes to the layout object programmatically.
No comments:
Post a Comment