A relative layout displays views in relative positions

A relative layout allows you to position views relative to their parent layout, or relative to other views in the layout.

You define a relative layout using the <RelativeLayout> element like this:

Positioning views relative to the parent layout

If you want a view to always appear in a particular position on the screen, irrespective of the screen size or orientation, you need to position the view relative to its parent. As an example, here’s how you’d make sure a button always appears in the top-center of the layout:

The lines of code:

android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"

mean that the top edge of the button is aligned to the top edge of the layout, and the button is centered horizontally in the parent layout. This will be the case no matter what the screen size, language, or orientation of your device:

Positioning views to the left or right

You can also position a view to the left or right of the parent layout. There are two ways of doing this.

The first way is to explicitly position the view on the left or right using:

android:layout_alignParentLeft="true"

or

android:layout_alignParentRight="true"

These lines of code mean that the left (or right) edge of the view is aligned to the left (or right) edge of the parent layout, regardless of the screen size, orientation, or language being used on the device.

Use start and end to take language direction into account

For apps where the minimum SDK is at least API 17, you can position views on the left or right depending on the language setting on the device. As an example, you might want views to appear on the left for languages that are read from left to right such as English. For languages that are read from right to left, you might want them to appear on the right instead so that their position is mirrored.

To do this, you use:

android:layout_alignParentStart="true"

or:

android:layout_alignParentEnd="true"

android:layout_alignParentStart="true" aligns the start edge of the view with that of its parent. The start edge is on the left for languages that are read from left to right, and the right edge for languages that are read from right to left.

android:layout_alignParentEnd="true" aligns the end edge of the view with that of its parent. The end edge is on the right for languages that are read from left to right, and the left edge for languages that are read from right to left.

Attributes for positioning views relative to the parent layout

Here are some of the most common attributes for positioning views relative to their parent layout. Add the attribute you want to the view you’re positioning, then set its value to "true":

android:attribute="true"

Positioning views relative to other views

In addition to positioning views relative to the parent layout, you can also position views relative to other views. You do this when you want views to stay aligned in some way, irrespective of the screen size or orientation.

In order to position a view relative to another view, the view you’re using as an anchor must be given an ID using the android:id attribute:

android:id="@+id/button_click_me"

The syntax “@+id” tells Android to include the ID as a resource in its resource file R.java. You must include the “+” whenever you define a new view in the layout. If you don’t, Android won’t add the ID as a resource and you’ll get errors in your code. You can omit the “+” when the ID has already been added as a resource.

Here’s how you create a layout with two buttons, with one button centered in the middle of the layout, and the second button positioned underneath the first:

The lines:

ensure that the second button has its start edge aligned to the start edge of the first button, and is always positioned beneath it.

Attributes for positioning views relative to other views

Here are attributes you can use when positioning views relative to another view. Add the attribute to the view you’re positioning, and set its value to the view you’re positioning relative to:

A grid layout displays views in a grid

A grid layout splits the screen up into a grid of rows and columns, and allocates views to cells:

How you define a grid layout

You define a grid layout in a similar way to how you define the other types of layout, this time using the <GridLayout> element:

You specify how many columns you want the grid layout to have using:

android:columnCount="number"

where number is the number of columns. You can also specify a maximum number of rows using:

android:rowCount="number"

but in practice you can usually let Android figure this out based on the number of views in the layout. Android will include as many rows as is necessary to display the views.

Adding views to the grid layout

You add views to a grid layout in a similar way to how you add views to a linear layout:

<GridLayout ... >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/textview" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/click_me" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit" />

</GridLayout>

Just as with a linear layout, there’s no need to give your views IDs unless you’re explicitly going to refer to them in your activity code. The views don’t need to refer to each other within the layout, so they don’t need to have IDs for this purpose.

By default, the grid layout positions your views in the order in which they appear in the XML. So if you have a grid layout with two columns, the grid layout will put the first view in the first position, the second view in the second position, and so on.

The downside of this approach is that if you remove one of your views from the layout, it can drastically change the appearance of the layout. To get around this, you can specify where you want each view to appear, and how many columns you want it to span.

Let’s create a new grid layout

To see this in action, we’ll create a grid layout that specifies which cells we want views to appear in, and how many columns they should span. The layout is composed of a text view containing the text “To”, an editable text field that contains hint text of “Enter email address”, an editable text field that contains hint text of “Message”, and a button labeled “Send”:

We’ll start with a sketch

The first thing we’ll do to create our new layout is sketch it out. That way we can see how many rows and columns we need, where each view should be positioned, and how many columns each view should span.

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:columnCount="2"
    tools:context="com.hfad.gridlayout.MainActivity" >
</GridLayout>

Row 0: add views to specific rows and columns

The first row of the grid layout is composed of a text view in the first column, and an editable text field in the second column. You start by adding the views to the layout:

You can use android:gravity and android:layout_gravity attributes with grid layouts.

Then you use the android:layout_row and android:layout_column attributes to say which row and column you want each view to appear in. The row and column indices start from 0, so if you want a view to appear in the first column and first row, you use:

Let’s apply this to our layout code by putting the text view in column 0, and the editable text field in column 1.

Row and column indices start at 0. layout_column=“n” refers to column n+1 in the display.

Row 1: make a view span multiple columns

The second row of the grid layout is composed of an editable text field that starts in the first column and spans across the second. The view takes up all the available space.

To get a view to span multiple columns, you start by specifying which row and column you want the view to start in. We want the view to start in the first column of the second row, so we need to use:

android:layout_row="1"
android:layout_column="0"

We want our view to go across two columns, and we can do this using the android:layout_columnSpan attribute like this:

android:layout_columnSpan="number"

where number is the number of columns we want the view to span across. In our case, this is:

android:layout_columnSpan="2"

Putting it all together, here’s the code for the message view:

Now that we’ve added the views for the first two rows, all we need to do is add the button.

Row 2: make a view span multiple columns

We need the button to be centered horizontally across the two columns like this:

The full code for the grid layout

Here’s the full code for the grid layout.

The grid layout code (continued)