Logcat

for Android Developers

Basic Layout Attributes and How to Use Them

| 8 Comments

Dealing with Android layout xml files can be a bit daunting at first. It definitely takes some time to learn the ins-and-outs of layout parameters to get your UI looking just right. We previously discussed how to decide whether you should use RelativeLayout or LinearLayout. Now we’ve compiled an overview of basic layout attributes and how to use them.

First of all, layout attributes that start with “layout_” have to do with a View’s LayoutParams, which are used by views to tell their parents how they should be laid out. Now let’s take a look at some of the more commonly used attributes.

layout_width and layout_height

These two are without a doubt the most common layout parameters you will encounter. In fact, these attributes are required on every view, and define the width and height of the view. For these attributes, the most common used values are “match_parent”, which sets that dimension to be as big as its parent’s, and “wrap_content,” which sets the dimension to just enough to wrap the content. You may also be familiar with “fill_parent” which was deprecated in favor of “match_parent” at API Level 8. You can also set either to specific values such as “40dip”. Here are few examples of a simple layout with a TextView with different values for layout_width and layout_height.

layout_gravity and gravity

These two attributes can be incredibly confusing, but remember that the one with layout_ is a part of the LayoutParams, which deals with the view and its parent. So layout_gravity defines how the view is positioned in its parent, while gravity defines how content is positioned within the view itself. You can set gravity to any of these values. In RelativeLayout, rather than using layout_gravity, you can use the RelativeLayout-specific attributes, which will be described later.

In the below example, setting gravity=”center” on the vertical LinearLayout centers all the views vertically inside the LinearLayout. Setting layout_gravity=”right” on the green TextView makes it right-aligned. In the orange TextView, you can see that setting gravity in a TextView aligns the TextView contents, which is the text itself. For a more comprehensive explanation of how this works, check out this blog post, which has a great visual of layout_gravity and gravity.
layout_margin and padding

Margin specifies extra space outside of the view, similar to the idea of css margins. You can either specify layout_margin which will assign the value to all four sides of the view, or you can specify each side separately using layout_marginTop, layout_marginBottom, layout_marginRight and layout_marginLeft.

Padding specifies extra space inside the view, on any or all of the four sides. You can specify padding all around the view at once with padding or each side individually using paddingTop, paddingBottom, paddingLeft, and paddingRight. Here is an example with the same basic “Hello World” TextView with different values set for padding and layout_margin.
layout_weight

This layout parameter is used only in LinearLayouts and allows you to assign importance to child views within a LinearLayout. For example, if you have a few views in a horizontal LinearLayout, you can use layout_weight to specify how you want them to take up extra space. For example, the first image below shows three TextViews, each with layout_width=”wrap_content” and no layout_weight set (default value is 0). Below that, you can see how the layout_weight values determines how the views take up extra space in the LinearLayout.
RelativeLayout-specific attributes

RelativeLayouts have a set of rules that helps determine where to place child views in the RelativeLayout.

layout_alignParent[Top/Bottom/Left/Right] specifies the view’s alignment within the parent. For example, layout_alignParentRight=”true” would align the view with the right edge of the parent.

Another useful set of rules for aligning views with respect to one another (rather than the parent) is layout_to[Right/Left]Of and layout_above and layout_below. These are set to the id of another view and will position the view appropriately with respect to the referenced view.

The last set of RelativeLayout rules is layout_align[Bottom/Top/Left/Right]. These allow you to align an edge of the view with the corresponding edge of another view.

Here is an example that uses several of these rules:

Note: be careful of circular dependencies! For example, as noted in the documentation, you can’t have a RelativeLayout that has layout_height=”wrap_content” and a view within it that has layout_alignParentBottom=”true”.

Setting Layout Attributes Programmatically

Setting these attributes in xml is pretty straightforward, but it gets a little tricky when you set them programmatically. Here are some basic guidelines.

For any attributes that have to do with the view’s LayoutParam, you have to get the LayoutParam and set the values on it. Be sure to cast it to the appropriate LayoutParams depending on the parent view. For example, for a TextView within a LinearLayout:

TextView view = (TextView) findViewById(R.id.text);
LinearLayout.LayoutParams lp =
(LinearLayout.LayoutParams) view.getLayoutParams();
lp.height = LayoutParams.FILL_PARENT;
lp.topMargin = 50;

If the view is in a RelativeLayout, you will have to cast the LayoutParams to RelativeLayout. You can then set RelativeLayout-specific rules using addRule(), like so:

TextView view = (TextView) findViewById(R.id.text);
RelativeLayout.LayoutParams lp =
(RelativeLayout.LayoutParams) view.getLayoutParams();
lp.addRule(RelativeLayout.ALIGN_PARENT_TOP);
lp.addRule(RelativeLayout.RIGHT_OF, R.id.text2);

For other attributes that are not related to LayoutParams, you can set it directly on the view:

TextView view = (TextView) findViewById(R.id.text);
view.setPadding(10, 5, 10, 5);
view.setGravity(3);

Hopefully this overview of most-commonly used layout attributes is helpful, especially if you are just getting started with Android xml layouts. If you have any tips you’ve found to be especially helpful, feel free to chime in with a comment!

8 Comments

  1. Hi,

    thanks for the really clear and concise description of the layout stuff. Indeed, this can get tricky and confusing…

    Also I would like to say that I like your blog a lot.

    norman

  2. Great post, I’m learning Android and was looking for a great explanation like this. I try to visit this blog every few days, and I appreciate the information.

  3. Great work….! Thanks for this blog cos it helps to the beginners a lot.. Keep on posting new things.

  4. Good stuff

  5. Great Post…
    It would be really helpful if you guys speak more on developing web application in android.

  6. actually i wanted to know if it is possible to develop a mobile locking system using the thumb impression of the owner of that android phone so that the data is more secure. can it be developed? can someone help me a proof of such concept and its code and requirements?

  7. Excellent Post for layout uses with perfect explanation with diagrams.
    Thanks,Dude !!

  8. Hello,

    I’m a UCLA student in the Information Studies department, seeking to interview developers who have worked extensively with Android and might be able to answer a few questions, whether over the phone or email, about this process. Primarily I’m interested in understanding what their relationship is to Google in the decision making process as the company sets standards and boundaries for Android participation.

    Please let me know if one of your bloggers has some time to spare for this research – it would only be a few moments of your time. Thanks in advance!

    Best wishes,
    Morgan Currie

Leave a Reply

Required fields are marked *.