Android Layouts: Linear Layout, Relative Layout


In this post I will discuss about different layouts available in android application development.

The six different layouts are:

  1. LinearLayout
  2. RelativeLayout
  3. TableLayout
  4. FrameLayout
  5. GridView
  6. ListView

Android allows you to create layouts using XML file (we can also create a layout using java code). All the layouts must be placed in /res/layout folder.

layouts_directory1

Download Code

1.    Linear Layout

In a linear layout, all the elements are displayed in a linear fashion(below is an illustration of the linear layout), either Horizontally or Vertically and this behavior is set in android:orientation which is an attribute of LinearLayout.

Example of Vertical layout snippet


<LinearLayout android:orientation="vertical"> .... </LinearLayout>

Example of Horizontal layout snippet


<LinearLayout android:orientation="horizontal"> .... </LinearLayout>

android-linear-layout

Now that we know about linear layouts, here are the steps to create them

  1. Create new project Go to File->New->Android Application
  2. Now, after creating new project In Package Explorer right click on res/layout folder and create a new Android XML File and name it. I am naming it as “linear_layout.xml”.

res/layout -> Right Click -> New -> Android XML File

  1. Now open newly created xml file (in my case “activity_linear_layout_tutorial.xml”) and paste 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

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

<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:layout_marginTop="25dip"
android:background="#2a2a2a"
android:orientation="horizontal" >

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

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

</LinearLayout>

  1. To set this created view as the view of your activity, Open your LinearLayoutTutorial.java file. You will see the following line inside the onCreate function setContentView(R.layout. main). Change R.layout.main to R.layout.yourlinearviewname. In my case its R.layout. activity_linear_layout_tutorial.

package com.tutorial.layouttutorial;

import android.app.Activity;
import android.os.Bundle;

public class LinearLayoutTutorial extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_linear_layout_tutorial);
	}
}

  1. To run the application, right click on the project -> Run As -> 1. Android Application. You should see your newly created linear layout in the emulator.

linear_layout_output

2.    Relative Layout

A Layout where the positions of the children can be described in relation to each other or to the parent

RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).

Example code snippet

<Button android:id="@+id/btnLogin" ..></Button>

<Button android:layout_toRightOf="@id/btnLogin"
android:layout_alignTop="@id/btnLogin" ..></Button>
Courtesy:-http://developer.android.com/

Courtesy:-http://developer.android.com/

Now to create relative layout follow this steps:

  1. In Package Explorer right click on res/layout folder and create a new Android XML File and name it. I am naming it as “activity_relative_layout.xml”
    res/layout -> Right Click -> New -> Android XML File
  2. Now open created xml file (in my case “activity_relative_layout.xml”) and type the following code.

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

<TextView
android:id="@+id/label"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Email" />

<EditText
android:id="@+id/inputEmail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/label" />

<Button
android:id="@+id/btnLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="@id/inputEmail"
android:layout_marginRight="10px"
android:text="Login" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/btnLogin"
android:layout_toRightOf="@id/btnLogin"
android:text="Cancel" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Register new Account" />

</RelativeLayout>

  1. Same like before open your RelativeLayout.java file and set the layout to your newly created layout file. In my case its R.layout.activity_relative_layout
    setContentView(R.layout.activity_relative_layout);
    
  2. To run the application, right click on the project -> Run As -> 1. Android Application.

Your output would be

relative_layout_output

I have just discussed Linear Layout and Relative Layout in this post. The remaining Grid View, Tab Layout and List View will be covered in the next article. Stay tuned!

Download Code

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s