Brian Swartzfager has been developing web applications using ColdFusion, CSS, and Javascript (with a clear bias towards jQuery) for 8 years at the University of Maryland, College Park. He also dabbles in Android application development in his spare time. Brian is a DZone MVB and is not an employee of DZone and has posted 35 posts at DZone. You can read more from them at their website. View Full User Profile

Creating Screen Layouts in Android Using XML

04.12.2011
| 12352 views |
  • submit to reddit

In my last post, I alluded to the fact that you can lay out your visual elements and controls on your Android application screens (your Activity objects) using XML. In this post, I'm going to give you a peek at what that XML looks like.

Here's an example of a super-basic layout XML file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" >
	    <TextView android:id="@+id/exampleText"
	    	android:layout_width="wrap_content" 
		android:layout_height="wrap_content"
		android:text="Push the button"
		android:background="#ffff00" 
		android:textColor="#000000" 
		android:textStyle="bold" 
		android:paddingLeft="5dip" 
		android:paddingRight= "5dip"
		android:layout_weight="1"/>
	    <Button android:id="@+id/exampleButton"
                android:layout_width="fill_parent"
	    	android:layout_height="wrap_content"
	    	android:text="The button"
	    	android:layout_weight="1" />
</LinearLayout>

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:

Layout example 1

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:

Layout example 2

...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:

Android Eclipse layout tool

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.



References
Published at DZone with permission of Brian Swartzfager, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Shoaib Almas replied on Sat, 2012/08/25 - 6:53am

I am trying to place a TextView or button in the middle of the screen, but it does not stay there. It goes to the upper corner always. How can we place the controls anywhere freely?

Java Forum

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.