Relative and Linear Layouts

This article covers the RelativeLayout and LinearLayout which are the basic Android layouts. In the last article Android – Hello, world!, I gave a sample problem to develop. The same screen shot is attached here to explain the needs for layouts.

Android Hello world

You can see that the TextViews “Username” or “Password” are not in the same horizontal level of their relative EditTexts. When the device is rotated (use Ctrl + F12 command to rotate the emulator), the button and check box were overlapped to each other. If you have tried that sample project, you might faced some difficulties in resizing the components. Even adjusting the location would be a troublesome task, if you are working with a single layout. Layouts are containers; used to align other user interface components inside them. If you are familiar with Java swing framework, compare the layouts with JPanels in Java.

RelativeLayout
As the name suggests it defines the location of sub components, relative to each other or relative to their parent. For example a Button can be placed above or below an EditText. Here the location of the Button is determined by the location of EditText. Even you can place the components relative to their parent RelativeLayout. For example android:align_parent_bottom=”true”, is used to set the location of a component at the bottom of its parent.

LinearLayout
If there is a need to have items linearly (either horizontal or vertical), LinearLayout is the choice we have. Other than linear arrangement, LinearLayout is used to distribute available spaces among the components using android:layout_weight attribute.

Now have a look at the following screen shot.

Android Layouts Sample

We are going to design this activity using both RelativeLayout and LinearLayout. In this activity, there is an EditText at the top of the activity. At the bottom there are two equally distributed buttons. Between the EditText and the buttons, there is another EditText which acquires the full screen. The arrangement is maintained in both portrait and landscape view of the device.

Let's plan the design.
The first EditText is always at the top of its activity. Here the location is relative to its parent component. Therefore, the parent of the first EditText must be a RelativeLayout. The buttons are always at the bottom and they are distributed in a ratio of 1:1. If there is a ratio based distribution, the parent must be a LinearLayout. Additionally, those buttons are arranged horizontally, so buttons must be inside a LinearLayout and the LinearLayout must be at the bottom of its parent. The next EditText  adopts the full screen but it is below the first EditText but above the buttons, it shows that the arrangement is relative to other components. So the design must have a super parent RelativeLayout and a LinearLayout for the buttons.

1. Create a new Android project named "LayoutsSample" with a blank activity.

2. Delete the default “Hello world” TextView and then drag and drop a 'Phone' EditText from the palette.

3. Move to the XML view of the designer and modify the attributes of EditText as show below. (Notice that by default the parent is a RelativeLayout).
Highlight: android:layout_alignParentTop="true"

<EditText
    android:id="@+id/etPhone"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:ems="10"
    android:hint="To"
    android:inputType="phone" />

Android Layouts Sample

4. Move to the Design view, drag and drop a LinearLayout (Horizontal) and change its attributes as given below.
Highlight: android:layout_alignParentBottom="true"

<LinearLayout
    android:id="@+id/layoutBottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal">

</LinearLayout>

5. Drag and drop two buttons inside the LinearLayout. If it is hard to drop into the LinearLayout, drop them anywhere and then, cut and paste their XML code inside the LinearLayout. Modify their code as shown here.
Highlight: android:layout_width="0dp" and android:layout_weight="1"

<LinearLayout
    android:id="@+id/layoutBottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal">

    <Button
        android:id="@+id/btnCancel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_weight="1"
        android:text="Cancel" />

    <Button
        android:id="@+id/btnSend"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_weight="1"
        android:text="Send" />
</LinearLayout>

Android Layouts Sample

If you want to distribute the width of buttons, then set "0dp" to layout_width. In the same way to distribute the height, the layout_height must be "0dp". Use  layout_weight to define  the ratio. Suppose if it is 1:2, then the layout_weight of first and second buttons must be 1, 2 respectively. You can use the attributes for more than two components as well (For example 1:2:3 for three buttons).

6. Drag and drop a 'Multiline Text' EditText and change its XML as given below.
Highlight: android:layout_above="@id/layoutBottom" and android:layout_below="@+id/etPhone"

<EditText
    android:id="@+id/etText"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@id/layoutBottom"
    android:layout_below="@+id/etPhone"
    android:gravity="top"
    android:hint="Enter message here"
    android:inputType="textMultiLine" />

Android Layouts Sample

Your final XML code must be something like this:

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/etPhone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:ems="10"
        android:hint="To"
        android:inputType="phone" />

    <LinearLayout
        android:id="@+id/layoutBottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btnCancel"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:text="Cancel" />

        <Button
            android:id="@+id/btnSend"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_weight="1"
            android:text="Send" />
    </LinearLayout>

    <EditText
        android:id="@+id/etText"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/layoutBottom"
        android:layout_below="@+id/etPhone"
        android:gravity="top"
        android:hint="Enter message here"
        android:inputType="textMultiLine" />
</RelativeLayout>

Once you have completed, run your application and test the output.

Sample Problem
In the last tutorial, I gave a sample problem to design a login activity. (The very first screen shot in this tutorial). However there are some design faults as descried earlier. Now try to enhance its appearance further by introducing proper layouts. The expected design must look like this.

Android Layouts Problem

A template for the problem is given to you at this link. Run the given template and try to improve the appearance by adding suitable layouts.


Find the projects at Git Hub.
Previous
Next Post »

Contact Form

Name

Email *

Message *