Layouts in Android

Android offers a collection of view classes that act as containers for views. These container classes are called layouts (or layout managers), and each implements a specific strategy to manage the size and position of its children. For example, the LinearLayout class lays out its children either horizontally or vertically, one after the other. All layout managers derive from the View class, therefore you can nest layout managers inside of one another.

The layout managers that ship with the Android SDK

  • LinearLayout organizes its children either horizontally or vertically.
  • TableLayout organizes its children in tabular form.
  • RelativeLayout organizes its children relative to one another or to the parent.
  • FrameLayout allows you to dynamically change the control(s) in the layout.
  • GridLayout organizes its children in a grid arrangement.

LinearLayout

The LinearLayout layout manager is the most basic. This layout manager organizes its children either horizontally or vertically based on the value of the orientation property. Listing below shows LinearLayout with a horizontal configuration.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" 
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<!-- add children here -->
</LinearLayout>

You can use weight to assign size importance to a control relative to the other controls in the container. Suppose a container has three controls: one has a weight of 1, whereas the others have a weight of 0. In this case, the control whose weight equals 1 will consume the empty space in the container.

Gravity is essentially alignment. For example, if you want to align a label’s text to the right, you would set its gravity to right. There are quite a few possible values for gravity, including left, center, right, top, bottom, center_vertical, clip_horizontal, and others.

TableLayout

The TableLayout layout manager is an extension of LinearLayout. This layout manager structures its child controls into rows and columns.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" 
android:layout_height="fill_parent">
<TableRow>
<TextView android:text="First Name:" 
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<EditText android:text="John" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content"/>
</TableRow>

<TableRow>
<TextView android:text="Last Name:" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content"/>
<EditText android:text="Love" 
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</TableRow>
</TableLayout>

RelativeLayout

RelativeLayout layout manager implements a policy where the controls in the container are laid out relative to either the container or another control in the container.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="wrap_content">

<TextView android:id="@+id/lbName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Username: "
android:layout_alignParentTop="true"/>
<EditText android:id="@+id/edName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/lbName"/>
</RelativeLayout>

Besides these three layout attributes, you can also specify layout_above, layout_toRightOf, layout_toLeftOf, layout_centerInParent, and several more.

FrameLayout

The layout managers that we’ve see so far implement various layout strategies. In other words, each one has a specific way that it positions and orients its children on the screen. With these layout managers, you can have many controls on the screen at one time, each taking up a portion of the screen. Android also offers a layout manager that is mainly used to display a single item: FrameLayout. You mainly use this utility layout class to dynamically display a single view, but you can populate it with many items, setting one to visible while the others are invisible.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/loFrame"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<ImageView 
android:id="@+id/oneImgView"
android:src="@drawable/one"
android:scaleType="fitCenter"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>

<ImageView
android:id="@+id/twoImgView"
android:src="@drawable/two"
android:scaleType="fitCenter"
android:layout_width="fill_parent"
android:layout_height=""
android:visibility="gone"/>
</FrameLayout>

You can switch visability of ImageView with setVisibility(View.VISIBLE) (or setVisibility(View.GONE)).

GridLayout

Android 4.0 brought with it a new layout manager called GridLayout. As you might expect, it lays out views in a grid pattern of rows and columns, somewhat like TableLayout. However, it’s easier to use than TableLayout. With a GridLayout, you can specify a row and column value for a view, and that’s where it goes in the grid.

This means you don’t need to specify a view for every cell, just those that you want to hold a view.

comments powered by Disqus