Android Relative Layout basics


Relative Layout, as the name suggests you can place widgets relative to other widgets. The widget ID is used to refer to it. To refer to a ID, it should be defined earlier than it is used, since the parsing of the xml file is top to bottom. From 1.6 its not needed to declare the widget id before its used (http://android-developers.blogspot.com/2009/10/ui-framework-changes-in-android-16.html). I guess from 1.6 they now double parse the xml file.

This blog post will (hopefully) make it easy for you to understand this layout. The widgets are placed relative to already defined ones. You can place widgets using any or all of the 3 (at a high level) relations.

1) Where to place the widget “within” the parent ? In other words, align the widget to which wall of the parent.

layout_alignParentRight – Will stick the widget to the inner right wall of the parent
layout_alignParentLeft – Will stick the widget to the innerleft wall of the parent
layout_alignParentTop – Will stick the widget to the inner top wall of the parent
layout_alignParentBottom – Will stick the widget to the inner bottom wall of the parent

2) Where to place this widget in relation to “another” widget (already defined). Specifying one of the below parameters will place the widget outside (obviously since the widget is not the parent) the relative widget

layout_bottom – Will stick the widget top wall, to the outer bottom wall of the relative
layout_top – Will stick the widget bottom wall, to the outer top wall of the relative
layout_toRight  – Will stick the widget left wall, to the outer right wall of the relative
layout_toLeft – Will stick the widget right wall, to the outer left wall of the relative

3) Where to place this widget in relation to “another” widget (already defined). Specifying one of the below parameters will place the widget outside (obviously since the widget is not the parent) the relative. These parameters are a bit different as compared to the ones explained in 2). This tells the widget to align with a wall of the relative, not stick to it.  Now, this parameter should be used in conjunction with other parameters for sake of clarity in code. As you read thru you will understand why.

layout_alignBottom – Will stick (or may not) the widget left / right wall, to the right / left wall of the relative, and align the bottom walls of both widgets. Kinda like keeping 2 objects on a dining table. Both share the same bottom alignment.
layout_alignTop – Will stick (or may not) the widget left / right wall, to the right / left wall of the relative, and align the top walls of both widgets. Kinda like keeping 2 objects suspended from the roof with ropes of same length. Both share the same top alignment.
layout_alignRight  – Will stick (or may not) the widget top / bottom wall, to the bottom / top wall of the relative, and align the right walls of both widgets. Kinda like keeping 2 objects one above another stuck to the same wall. Both share the same right alignment.
layout_alignLeft – Will stick (or may not) the widget top / bottom wall, to the bottom / top wall of the relative, and align the left walls of both widgets. Kinda like keeping 2 objects one above another stuck to the same wall. Both share the same left alignment.

4) Special Alignments – Where to place the widget within the parent. To center is horizontally, vertical or bang on center (both vertical and horizontal).

layout_centerHorizontal, layout_centerVertical, layout_centerInParent

I cant explain everything to you :). Your homework, explain layout_alignBaseline to me and others.

Advertisements

One thought on “Android Relative Layout basics

  1. I’m not sure of the entire range of uses of layout_alignBaseline, however one application that I have found is to align an EditText box with a TextView label to it’s left. The alignBaseline will ensure that the EditText box is located such that the bottom of the text in the box is aligned with the bottom of the text in the adjacent label.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s