There are two more layouts we’d like you to know about: relative layouts and grid layouts. They’ve largely been superseded by the constraint layout, but we have a soft spot for them, and we think they’ll stay around for a few more years.
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:
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:
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.
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:
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.
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" 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.
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”:
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
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:
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
A grid layout splits the screen up into a grid of rows and columns, and allocates views to cells:
You define a grid layout in a similar way to how you define the other types of layout, this time using the
You specify how many columns you want the grid layout to have using:
number is the number of columns. You can also specify a maximum number of rows using:
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.
You add views to a grid layout in a similar way to how you add views to a linear layout:
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.
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.
The grid layout needs two columns:
We can position our views how we want if we use a grid layout with two columns:
Now that we have the basic grid layout defined, we can start adding views.
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_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.
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:
We want our view to go across two columns, and we can do this using the
android:layout_columnSpan attribute like this:
number is the number of columns we want the view to span across. In our case, this is:
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.
We need the button to be centered horizontally across the two columns like this:
We wrote some code to center the Send button in the third row of the grid layout, but a sudden breeze blew some of it away. See if you can reconstruct the code using the magnets below.
Here’s the full code for the grid layout.