Relative Layout and Just Maths Screen Layouts

In the previous post, we looked at Linear Layout. There is another layout which is extremely helpful and flexible in designing good looking apps i.e. Relative Layout. This layout arranges your views relative to its parent or other child views. You can say something like - align this TextView to the left of EditText or align this Button below EditText.

To position views inside Relative Layout, child views have to specify layout attributes which align them inside relative layout. If you do not specify any layout attributes for child views, all the child views will be aligned at the top-left corner of the relative layout.

Attributes to define position

As discussed above, you can align views relative to parent or any other child view. Below attributes are used to align the edge of the view to the parent's edge. For example: android:layout_alignParentTop means align the top edge of the child view with the top edge of the parent and same goes for other attributes. For these acceptable value is either true or false.

1. android:layout_alignParentTop 
2. android:layout_alignParentRight 
3. android:layout_alignParentBottom 
4. android:layout_alignParentLeft

Below attributes are self explanatory. They allow us to center the child view in the parent. android:layout_centerInParent means center horizontally and vertically inside parent layout. For these acceptable value is either true or false.

1. android:layout_centerInParent
2. android:layout_centerHorizontal
3. android:layout_centerVertical

Below attributes are used to align the edge of the view to the child's edge. For these attributes acceptable value is the id of the view to which you want to anchor your view. For example: android:layout_alignTop = "@id/btn_send" means view's top edge should align to the btn_send top edge. In simple words, top edge of the view must be same as the top edge of the btn_send.

1. android:layout_alignTop
2. android:layout_alignRight
3. android:layout_alignBottom
4. android:layout_alignLeft

Below attributes are used to say something like - below this view, above this view, to the right of this view and to the left of the view. For these acceptable value is the id of the view to which you want to anchor to.

1. android:layout_above
2. android:layout_below
3. android:layout_toLeftOf
4. android:layout_toRightOf

These are again self explanatory. If you say something like - android:layout_below = "@id/btn_send" then it means align the top edge of your view to the bottom edge of btn_send. It is simple as put your view below btn_send. Same goes for other attributes.

Oh God !! So many attributes. Once you start using them, you will get familiar with them and Android Studio Design View (Drag and Drop Controls) helps a lot in placing your controls where you want them.

Enough theory. Let's put this knowledge into practice with our Just Maths App Screen Layouts. Below you can find the source code for this. We will design the layout for our game screen as it has both layouts - Relative Layout and Linear Layout. Other screens are easy to design (Refer source code).

Filename - activity_game.xml

<?xml version="1.0" encoding="utf-8"?>
<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:background="#DFDED4"
    tools:context="cheezycode.com.justmaths.GameActivity">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true">

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/btnCorrect"
            android:layout_weight="1"
            android:background="#CA171B"
            android:src="@drawable/ic_check_white_36dp"
            android:paddingTop="25dp"
            android:layout_marginRight="1dp"
            android:paddingBottom="25dp"/>

        <ImageButton
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/btnIncorrect"
            android:layout_weight="1"
            android:background="#CA171B"
            android:src="@drawable/ic_close_white_36dp"
            android:layout_marginLeft="1dp"
            android:paddingTop="25dp"
            android:paddingBottom="25dp"/>
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:padding="20dp"
        android:id="@+id/topContainer"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TIME : 05"
            android:id="@+id/txtTime"
            android:layout_weight="1"
            android:gravity="left"
            android:textColor="#CA171B"
            android:textSize="25sp"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="SCORE: 00"
            android:id="@+id/txtScore"
            android:layout_weight="1"
            android:gravity="right"
            android:textColor="#CA171B"
            android:textSize="25sp" />
    </LinearLayout>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="11+64"
        android:id="@+id/txtViewQuestion"
        android:layout_below="@id/topContainer"
        android:layout_centerHorizontal="true"
        android:textSize="70sp"
        android:layout_marginTop="100dp"
        android:textIsSelectable="true"
        android:textColor="#432F21" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="=75"
        android:id="@+id/txtViewResult"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/txtViewQuestion"
        android:textSize="70sp"
        android:textIsSelectable="true"
        android:textColor="#432F21" />

</RelativeLayout>

Above layout will have display like this

Icons used in this project can be found at this URL - https://design.google.com/icons/. Just download, extract and paste them in resources folder (res). You can use Font Awesome as well, if you do not want to use image files. You can find the post related to it at Font Awesome. Let us know if you have any concerns. Happy Reading

Source Code

Previous: Just Maths - Views, View Groups and Layouts

Next: Android Button Click and Android Intent Example