Creating Android Layout

// By:Team // No Comment

Email this to someonePrint this pageShare on Google+0Share on Facebook0Tweet about this on TwitterShare on LinkedIn0Share on Reddit0Pin on Pinterest0Share on StumbleUpon2

Android layout is a class that handles arranging the way its children appear on the screen.  Anything that is a View can be a child of a layout. All of the layouts inherit from ViewGroup so you can nest layouts.  You could also create your own custom layout by making a class that inherits from ViewGroup.

Some Layouts are below:

  1. AbsoluteLayout
  2. FrameLayout
  3. LinearLayout
  4. RelativeLayout

1-AbsoluteLayout

AbsoluteLayout is based on idea of placing each control at an absolute position.  You specify the exact x and y coordinates on the screen for each control.  This is not recommended for most UI development since absolutely positioning every element on the screen makes an inflexible UI that is much more difficult to maintain.  Consider what happens if a control needs to be added to the UI. You would have to change the position of every single element that is shifted by the new control.

Here is a sample Layout XML using AbsoluteLayout.

Note how each element has android:layout_x and android:layout_y specified. Android defines the top left of the screen as (0,0) so the layout_x value will move the control to the right, and the layout_y value will move the control down. Here is a screenshot of the layout produced by this XML.

AbsoluteLayout

2-FrameLayout

FrameLayout is designed to display a single item at a time. You can have multiple elements within a FrameLayout but each element will be positioned based on the top left of the screen. Elements that overlap will be displayed overlapping. I have created a simple XML layout using FrameLayout that shows how this works.

Here is the result of this XML.

framelayout

If I had not set a gravity then the text would have appeared at the top left of the screen.

FrameLayout can become more useful when elements are hidden and displayed programmatically. You can use the attribute android:visibility in the XML to hide specific elements. You can call setVisibility from the code to accomplish the same thing. The three available visibility values are visible, invisible (does not display, but still takes up space in the layout), and gone (does not display, and does not take space in the layout).

3-LinearLayout

LinearLayout organizes elements along a single line. You specify whether that line is verticle or horizontal using android:orientation. Here is a sample Layout XML using LinearLayout.

Here is a screenshot of the result of the above XML.

LinearLayout

Here is a screenshot of the same XML except that the android:orientation has been changed to horizontal.

LinearLayout

You might note that the EditText field at the end of the line has had its width reduced in order to fit. Android will try to make adjustments when necessary to fit items on screen. The last page of this tutorial will cover one method to help deal with this.

4-RelativeLayout

RelativeLayout lays out elements based on their relationships with one another, and with the parent container. This is arguably the most complicated layout, and we need several properties to actually get the layout we want.

Relative To Container

These properties will layout elements relative to the parent container.

  • android:layout_alignParentBottom – Places the bottom of the element on the bottom of the container
  • android:layout_alignParentLeft – Places the left of the element on the left side of the container
  • android:layout_alignParentRight – Places the right of the element on the right side of the container
  • android:layout_alignParentTop – Places the element at the top of the container
  • android:layout_centerHorizontal – Centers the element horizontally within its parent container
  • android:layout_centerInParent – Centers the element both horizontally and vertically within its container
  • android:layout_centerVertical – Centers the element vertically within its parent container

Relative To Other Elements

These properties allow you to layout elements relative to other elements on screen. The value for each of these elements is the id of the element you are using to layout the new element. Each element that is used in this way must have an ID defined using android:id=”@+id/xxx” where xxx is replaced with the desired id. You use “@id/xxx” to reference an element by its id. One thing to remember is that referencing an element before it has been declared will produce an error.

  • android:layout_above – Places the element above the specified element
  • android:layout_below – Places the element below the specified element
  • android:layout_toLeftOf – Places the element to the left of the specified element
  • android:layout_toRightOf – Places the element to the right of the specified element

Alignment With Other Elements

These properties allow you to specify how elements are aligned in relation to other elements.

  • android:layout_alignBaseline – Aligns baseline of the new element with the baseline of the specified element
  • android:layout_alignBottom – Aligns the bottom of new element in with the bottom of the specified element
  • android:layout_alignLeft – Aligns left edge of the new element with the left edge of the specified element
  • android:layout_alignRight – Aligns right edge of the new element with the right edge of the specified element
  • android:layout_alignTop – Places top of the new element in alignment with the top of the specified element

Here is a sample XML Layout

Here is the screen produced by that XML.

Relative

The problem here is that when Android draws the TextView lastName below the TextView firstName it only sets aside the space it needs for the TextView. Android only reads the Layout XML one time so it doesn’t know that an EditView is the next item and doesn’t plan for it. So when the EditView is drawn to the right of the TextView it only has the height of the TextView to work with so it overlaps the EditView above it. Here is the Layout XML I wrote to create the form the way it should look.

You probably noticed that I had to rearrange the elements in the XML since, as I already mentioned, you cannot reference an element that has not already been laid out. Here is what the updated RelativeLayout produces.

Relative

Email this to someonePrint this pageShare on Google+0Share on Facebook0Tweet about this on TwitterShare on LinkedIn0Share on Reddit0Pin on Pinterest0Share on StumbleUpon2

About Team

Browse Archived Articles by Team

Related

Sorry. There are no related articles at this time.