Creating Screen Layouts in Android Using XML

Android development Add comments

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.

12 responses to “Creating Screen Layouts in Android Using XML”

  1. Garry Schafer Says:
    Hey - exactly how do you get this view? I can't seem to set my eclipse to this view..?
  2. Asma-ull-Hosna Says:
    Hi,
    How can I set video object vertically in screen.
  3. Nividica Says:
    @Gary: To get this view you need to click the tab located at the bottom of the editor from "main.xml" to "Layout". In the picture shown it is in the bottom left corner.
  4. Manoj Says:
    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?
  5. Phil Says:
    Use something like:

    <Button
    android:id="@+id/widget96"
    android:layout_width="50dip"
    android:layout_height="50dip"
    android:text="OK"
    android:layout_x="250dip"
    android:layout_y="150dip"
    >
    </Button>

    Hope that helps.

    Phil
  6. Rodney Barbati Says:
    You get the layout designer by right clicking on your res/layout directory in your android project and then selecting new Layout. You will have to provide the layout name, and then you will be placed in the designer. It is here that you can switch back and forth from the xml tab to the WYSIWYG designer.
    If you create any custom Views, you can add them to a layout as they will be found in the custom area on the tool palette - You will want to do this before adding code to your custom views as anything you do will almost certainly blow up the layout designer.
  7. Rodney Barbati Says:
    You get the layout designer by right clicking on your res/layout directory in your android project and then selecting new XML File. A dialog will appear where you will select the Layout option and give the xml file a name, and then you will be placed in the designer. It is here that you can switch back and forth from the xml tab to the WYSIWYG designer.
    If you create any custom Views, you can add them to a layout as they will be found in the custom area on the tool palette - You will want to do this before adding code to your custom views as anything you do will almost certainly blow up the layout designer.
  8. Bubbie Says:
    If iofnrmaiton were soccer, this would be a goooooal!
  9. Gayle Says:
    How would you do something like this? Using "percents" just because they are easiest to view.

    Button 50 and Button 50.
    Button 25 and Button 75.
    Button 10 and Button 90.

    I set my layout_weights to those numbers and its all just a mess. Many buttons disappear entirely.
  10. Brian Swartzfager Says:
    @Gayle: you wouldn't set the layout_weight to those numbers. For your first example (two buttons that each take up half the horizontal width), you'd create a LinearLayout with the orientation property set to "horizontal", then put the buttons inside that LinearLayout, set their height and width to "fill_parent" and both their layout weights to "1". Being of equal weight and with both trying to take up all available space, then should come out 50-50.

    You should be able to use a similar technique, but with uneven weights, (like a weight of 3 on one and a weight of 1 on the other) to get the other proportions you listed.
  11. juanma Says:
    i work with layout dynamic, my question is, how i can read from xml attribute and create a dynamic layout view with this xml parse (sax) ?
  12. Brian Swartzfager Says:
    @Juanma: If you're asking how to create a layout that changes based on XML data from some datasource, I don't have an answer for that. There are XML parsing libraries, and you might be able to inflate a layout from XML data, but I would think that the time it would take to parse the data and generate the layout would make it impractical.

Leave a Reply