Using RelativeLayout

As mentioned in the Introduction, the RelativeLayout allows Views to be position-relative to each other and the parent. RelativeLayout is particularly useful for reducing the number of nested layouts, which is very important for reducing memory and processing requirements.

Getting ready

Create a new project and call it RelativeLayout. The default layout uses a RelativeLayout, which we will use to align Views both horizontally and vertically.

How to do it...

1. Open the res/layout/activity_main.xml file and change it as follows:

   <TextView
       android:id="@+id/textView1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Centered"
       android:layout_centerVertical="true"
       android:layout_centerHorizontal="true" />
   <TextView
       android:id="@+id/textView2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Below TextView1"
       android:layout_below="@+id/textView1"
       android:layout_toLeftOf="@id/textView1" />
   <TextView
       android:id="@+id/textView3"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Bottom Right"
       android:layout_alignParentBottom="true"
       android:layout_alignParentEnd="true" />

2. Run the code, or view the layout in the Design tab

How it works...

This is a very straightforward exercise but it demonstrates several of the RelativeLayout options: layout_centerVertical, layout_centerHorizontal, layout_below, layout_alignParentBottom, and so on.

The most commonly used RelativeLayout layout attributes include:

• layout_below: This View should be below the View specified
• layout_above: This View should be above the View specified
• layout_alignParentTop: Align this View to the top edge of the parent
• layout_alignParentBottom: Align this View to the bottom edge of the parent
• layout_alignParentLeft: Align this View to the left edge of the parent
• layout_alignParentRight: Align this View to the right edge of the parent
• layout_centerVertical: Center this View vertically within the parent
• layout_centerHorizontal: Center this View horizontally within the parent
• layout_center: Center this View both horizontally and vertically within the parent

  Note

  For the complete list of RelativeLayout parameters, visit: http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html.

There's more...

In contrast to what we saw earlier, here is an example using a LinearLayout just to center a TextView (creating the same effect as the layout_center parameter of RelativeLayout):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center" >
        <TextView
            android:id="@+id/imageButton_speak"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Centered" />
    </LinearLayout>
</LinearLayout>

Notice this layout is one level deeper than the equivalent RelativeLayout (which is a LinearLayout nested within the parent LinearLayout.) Though a simple example, it's a good idea to avoid unnecessary nesting as it can impact performance, especially when a layout is being repeatedly inflated (such as a ListItem).

See also

• The next recipe, Using LinearLayout, which will give you an alternative layout
• See the Optimizing layouts with the Hierarchy Viewer recipe for more information on efficient layout design