Understanding Different Android Layouts

Android Layouts

In this post I will discuss about different layouts you can use to provide your Android Application different look and feel.

What is a Layout?

A Layout dictates the alignment of elements (such as Text, Buttons, EditText) in the Android Application.

Layout is defined in a XML file which is located in res/layout folder.

You can use anyone of the different layouts available. Some of them are:

1.Linear Layout

LinearLayout aligns all children in a single direction, vertically or horizontally.

2.Relative Layout

RelativeLayout displays child views in relative positions.

3.Table Layout

TableLayout groups views into rows and columns.

4.Absolute Layout

AbsoluteLayout enables you to specify the exact location of its children.

5.Frame Layout

The FrameLayout is a placeholder on screen that you can use to display a single view.

6.GridLayout

GridLayout is a ViewGroup that displays items in a two-dimensional, scrollable grid.







We will see the implementation of most commonly used layouts.

Linear Layout

In LinearLayout all the elements are displayed in a linear manner, either Vertically or Horizontally . This behaviour is set using android:orentation attribute.

linear-layout

Here are the steps to work with LinearLayout
1.Open your project
Android> app > java >package
2.Right click and create a new Activity>Blank Acitivty. Name it for example “LinearLayout.java”
3.Corresponding XML file will be created by name “activity_linear_layout.xml”
4.Open the xml file and type the following code.

<?xml version="1.0" encoding="utf-8"?>
<!-- Parent linear layout with vertical orientation -->
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:text="Email:" android:padding="5dip"/>

    <EditText android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:layout_marginBottom="10dip"/>

    <Button android:layout_width="fill_parent" android:layout_height="wrap_content"
        android:text="Login"/>

    <!-- Child linear layout with horizontal orientation -->
    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" android:background="#2a2a2a"
        android:layout_marginTop="25dip">

        <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:text="Home" android:padding="15dip" android:layout_weight="1"
            android:gravity="center"/>

        <TextView android:layout_width="fill_parent" android:layout_height="wrap_content"
            android:text="About" android:padding="15dip" android:layout_weight="1"
            android:gravity="center"/>

    </LinearLayout>

</LinearLayout>

5.Run the project
layout-2016-02-24-231254

As you can see in the above image elements placed in Parent layout with vertical orentation are aligned verticall whereas the elements in child layout are placed Horizontally.






Relative Layout

In a relative layout every element arranges itself relative to other elements or a parent element.
Here are the steps to work with RelativeLayout
1.Open your project
Android> app > java >package
2.Right click and create a new Activity>Blank Acitivty. Name it for example “RelativeLayout.java”
3.Corresponding XML file will be created by name “activity_relative_layout.xml”
4.Open the xml file and type the following code.

<?xml version="1.0" encoding="utf-8"?>
<!-- Relative Layout -->
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Email"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:textSize="40dp"/>

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_below="@+id/textView"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Login"
        android:id="@+id/buttonLogin"
        android:layout_below="@+id/editText" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sign Up"
        android:id="@+id/buttonSignUp"
        android:layout_alignTop="@+id/buttonLogin"
        android:layout_toRightOf="@+id/buttonLogin" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New User?"
        android:id="@+id/buttonNewUser"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
         />


</RelativeLayout>

5.Run the project.

layout-2016-02-24-233149

Here important arrtibutes used are as below
1.Sign up button is aligned with relative position of login button.
android:layout_alignTop="@+id/buttonLogin" – attribute is used to align the starting position of Signup button with respect to Login button

android:layout_toRightOf="@+id/buttonLogin" – attribute is used to align the Signup button to right of Login button
2.New user button is aligned to parent layout bottom and center horizontally with the below two layouts

android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"






TableLayout

Table layouts in Android works in the same way HTML table layouts work. You can divide your layouts into rows and columns. Its very easy to understand. The image below should give you an idea.

table_layout_sketch

Here are the steps to work with TableLayout
1.Open your project
Android> app > java >package
2.Right click and create a new Activity>Blank Acitivty. Name it for example ” TableLayout.java”
3.Corresponding XML file will be created by name “activity_table_layout.xml”
4.Open the xml file and type the following code.

<TableLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:shrinkColumns="*"  android:stretchColumns="*" android:background="#ffffff"> 
    <!-- Row 1 with single column -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:layout_width="match_parent" android:layout_height="wrap_content"
            android:textSize="18dp" android:text="Row1"  android:layout_span="3"
            android:padding="18dip" android:background="#b0b0b0"
            android:textColor="#000"/>  
    </TableRow>  
     
    <!-- Row 2 with 3 columns -->
    <TableRow 
        android:id="@+id/tableRow1" 
        android:layout_height="wrap_content" 
        android:layout_width="match_parent">  
        <TextView 
            android:id="@+id/TextView04" android:text="Row 2 column 1"
            android:layout_weight="1" android:background="#dcdcdc"
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>  
        <TextView 
            android:id="@+id/TextView04" android:text="Row 2 column 2"
            android:layout_weight="1" android:background="#d3d3d3"
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>
        <TextView 
            android:id="@+id/TextView04" android:text="Row 2 column 3"
            android:layout_weight="1" android:background="#cac9c9"
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>
    </TableRow> 
     
    <!-- Row 3 with 2 columns -->
    <TableRow 
        android:layout_height="wrap_content" 
        android:layout_width="fill_parent" 
        android:gravity="center_horizontal">  
        <TextView 
            android:id="@+id/TextView04" android:text="Row 3 column 1"
            android:layout_weight="1" android:background="#b0b0b0"
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>
             
        <TextView 
            android:id="@+id/TextView04" android:text="Row 3 column 2"
            android:layout_weight="1" android:background="#a09f9f"
            android:textColor="#000000"
            android:padding="20dip" android:gravity="center"/>  
    </TableRow>  
     
</TableLayout>

5.Run the project.
table_layout_output

Absolute Layout

Absolute Layout is now deprecated so we can safely skip the learning and implementation part.

We will see GridLayout and FrameLayout in next posts.So stay tuned