Different Types of Layouts in Android

LAYOUTS

Layout is a most important view container that is hold the controls to design the effective UI. The Layout is called ViewGroup. All the view control  like TextView, EditText, Button, CheckBox etc. are contained in Layout. An Android Activity use the Layout and show the view.

Android Provide us Various Layout . These are-

1. RelativeLayout
2. LinearLayout
3. FrameLayout
4. TableLayout
5. GridLayout

1. RELATIVE  LAYOUT

RelativeLayout is one of the Layout in which the view are arranged by reference of  sibling of  the view. The position of each view can be specified as relative to sibling element by using toLeftOf, toRightOf, above and below.

In Relative Layout , you can also position of view with respect to its parent by  using attribute  layout_alignParentLeft,  layout_alignParent Right,  layout_alignParent Top and layout_alignParent.

Here I am going to create Relative Layout in activity_relative_layout.xml
first, I show you basic structure design of Layout below:

 
Basic Steps to create the layout.

First step: open the activity.xml file that is in res/layout/activity.xml.
here my activity file name is activity_relative_layout.xml.

second step: define the Relative Layout in your xml file

you can define as below:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#3c00ff"
    tools:context=".RelativeLayoutActivity">
</RelativeLayout>

Step 3: Now you have to define the child view control in Relative Layout


activity_relative_layout.xml


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#3c00ff"
    tools:context=".RelativeLayoutActivity">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Login Here"
        android:id="@+id/tvHeader"
        android:layout_marginTop="20dp"
        android:padding="10dp"
        android:textColor="#6300ff"
        android:background="#ffffff"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="UserName"
        android:id="@+id/tvUser"
        android:padding="10dp"
        android:textColor="#6300ff"
        android:background="#ffffff"
        android:layout_below="@+id/tvHeader"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="10dp"
        android:layout_alignParentStart="true"
        android:layout_marginTop="49dp" />

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/etUser"
        android:padding="10dp"
        android:singleLine="true"
        android:background="#ffffff"
        android:layout_marginLeft="30dp"
        android:layout_marginRight="10dp"
        android:layout_alignTop="@+id/tvUser"
        android:layout_alignLeft="@+id/tvHeader"
        android:layout_alignStart="@+id/tvHeader" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Password"
        android:id="@+id/tvPassword"
        android:padding="10dp"
        android:textColor="#6300ff"
        android:background="#ffffff"
        android:layout_marginLeft="10dp"

        android:layout_below="@+id/tvUser"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="40dp" />

    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/etPassword"
        android:background="#ffffff"

        android:layout_marginRight="10dp"
        android:singleLine="true"
        android:padding="10dp"
        android:layout_alignTop="@+id/tvPassword"
        android:layout_alignLeft="@+id/etUser"
        android:layout_alignStart="@+id/etUser" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Login"
        android:id="@+id/button"
        android:padding="10dp"
        android:background="#ffffff"
        android:textColor="#6300ff"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_below="@id/tvPassword"
        android:layout_centerVertical="true"
 />
</RelativeLayout>


In the demo project I have used option menu to nevigate to other Layout

2. LINEAR LAYOUT

Linear Layout is a view group that orginize the child view control either in Linear or Vertical manner. When you set Layout Orientation in veritacal, all the child view control are arranged in column wise. When you set Layout Orientation in  Horizantal manner, all child view controls are arrange in row wise.
This Laout is Frequent use while you develop a project for multiple Sereen.


Here I am going to create Linear  Layout in activity_linear_layout.xml
first, I show you basic structure design of Layout below:

Basic Steps to create the layout.

First step: open the activity.xml file that is in res/layout/activity.xml.
here my activity file name is activity_linear_layout.xml.

second step: define the Lineare Layout in your xml file

you can define as below:

<LinearLayout 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"
    tools:context="program.androidheight.layoutdemo.LinearLayoutActivity"
    android:orientation="horizontal">
</LinearLayout>


Step 3: Now you have to define the child view control in Linear Layout. It is not necssary that layout always be Root View, you can defines it within Layout means it can be child of View Group.
like this:


activity_linear_layout.xml

<LinearLayout 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"
    tools:context="program.androidheight.layoutdemo.LinearLayoutActivity"
    android:background="#99e632"
    android:orientation="horizontal">

    <ScrollView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_margin="10dp">


            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:padding="10dp"
                android:text="Register Here"
                android:gravity="center"
                android:textColor="#99e632"
                android:background="#ffffff"
                android:id="@+id/ltvHeader" />
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            >

            <EditText
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:id="@+id/letName"
                android:padding="10dp"
                android:layout_margin="10dp"
                android:hint="NAME"
                android:background="#ffffff"

                />
        </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                >

                <EditText
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/letEmail"
                    android:inputType="textEmailAddress"
                    android:padding="10dp"
                    android:layout_margin="10dp"
                    android:hint="EMAIL"
                    android:background="#ffffff"

                    />
            </LinearLayout>

            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                >

                <EditText
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/letPassword"
                    android:padding="10dp"
                    android:layout_margin="10dp"
                    android:hint="PASSWORD"
                    android:inputType="textPassword"
                    android:background="#ffffff"

                    />
            </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                >

                <EditText
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:id="@+id/letAddress"
                    android:padding="10dp"
                    android:layout_margin="10dp"
                    android:hint="ADDRESS"
                    android:background="#ffffff"
                    android:inputType="text"
                    />
            </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                >


                <Button
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:text="REGISTER"
                    android:padding="10dp"
                    android:layout_margin="10dp"
                    android:background="#ffffff"
                    android:textColor="#99e632"
                    android:id="@+id/lbtnRegister" />
            </LinearLayout>
        </LinearLayout>
        </ScrollView>


</LinearLayout>




3.FRAMELAYOUT
  FrameLayout  is a ViewGroup .  Generally,FrameLayout hold the single child View item, Because it is difficult to manage to child views for different screens. You can control by using android:gravity attribute to assign each child view.

Here I am going to create Relative Layout in activity_frame_layout.xml
first, I show you basic structure design of Layout below:

Basic Steps to create the layout.

First step: open the activity.xml file that is in res/layout/activity.xml.
here my activity file name is activity_frame_layout.xml.

second step: define the FrameLayout in your xml file

you can define as below:
<FrameLayout 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"
    tools:context="program.androidheight.layoutdemo.FrameLayoutActivity">
</FrameLayout>

Step 3: Now you have to define the child view control in FrameLayout

activity_frame_Layout.xml

<FrameLayout 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"
    tools:context="program.androidheight.layoutdemo.FrameLayoutActivity">
<ImageView
    android:id="@+id/ivimage"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/mountain"/>

<TextView
    android:id="@+id/tvtext"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Mountain"
    android:layout_gravity="bottom"
    android:gravity="center"
    android:textSize="20sp"
    android:textColor="#ffffff"
    android:background="#6b000000"/>
    <TextView
        android:id="@+id/tvtext2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Mountain View"
        android:layout_gravity="top|right"
        android:gravity="center"
        android:textSize="20sp"
        android:textColor="#ffffff"
        android:background="#6b000000"/>
</FrameLayout>



4. TABLE LAYOUT

Table Layout is a View Group. In the Table Layout the child views are arrange in rows and coloumn s.In the Table Layout do not display the border lines , cell specing and cell padding. You can manage it by margin  and padding attribute.

In the Table Layout, a child View TableRow is used to define a single row. Within the TableRow you can manage column by other view control like textView, ImageView etc.

Here I am going to create Relative Layout in activity_relative_layout.xml
first, I show you basic structure design of Layout below:

Basic Steps to create the layout.

First step: open the activity.xml file that is in res/layout/activity.xml.
here my activity file name is activity_table_layout.xml.

second step: define the TableLayout in your xml file

you can define as below:
<TableLayout android:stretchColumns="*"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">

</TableLayout>

Step 3: Now you have to define the child view control in TableLayout

<TableLayout android:stretchColumns="*"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">


    <TableRow android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:background="#EAE9E9"
        android:layout_margin="1px"
        android:id="@+id/tableRow1">

    <TextView android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:id="@+id/tv_RowHeader1"
        android:text="FRUIT"
        android:textColor="#333333"
        android:textSize="11sp"
        android:gravity="center"
        android:textStyle="bold"
        android:layout_weight="1"/>

    <TextView android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:id="@+id/tv_RowHeader2"
        android:text="FLOWER"
        android:textColor="#333333"
        android:textSize="11sp"
        android:gravity="center"
        android:textStyle="bold"
        android:layout_weight="1"/>

    <TextView android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:id="@+id/tv_RowHeader3"
        android:text="ANIMAL"
        android:textColor="#333333"
        android:textSize="11sp"
        android:gravity="center"
        android:textStyle="bold"
        android:layout_weight="1"/>

    <TextView android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:id="@+id/tv_RowHeader4"
        android:text="VEGITABLE"
        android:textColor="#333333"
        android:textSize="11sp"
        android:gravity="center"
        android:textStyle="bold"
        android:layout_weight="1"/>

</TableRow>

    <TableRow android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:layout_margin="1px"
        android:background="#EAE9E9"
        android:id="@+id/tableRow2">

        <TextView android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:id="@+id/tv_fruit1"
            android:text="Mango"
            android:textColor="#003366"
            android:textSize="11sp"
            android:gravity="center"
            android:textStyle="bold"
            android:layout_weight="1"/>

        <TextView android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:id="@+id/tv_flower1"
            android:text="Rose"
            android:textColor="#003366"
            android:textSize="11sp"
            android:gravity="center"
            android:textStyle="bold"
            android:layout_weight="1"/>

        <TextView android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:id="@+id/tv_animal1"
            android:text="Tiger"
            android:textColor="#003366"
            android:textSize="11sp"
            android:gravity="center"
            android:textStyle="bold"
            android:layout_weight="1"/>

        <TextView android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:id="@+id/tv_vegitable"
            android:text="Patato"
            android:textColor="#003366"
            android:textSize="11sp"
            android:gravity="center"
            android:textStyle="bold"
            android:layout_weight="1"/>

    </TableRow>

    <TableRow android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:background="#EAE9E9"
        android:layout_margin="1px"
        android:id="@+id/tableRow3">

        <TextView android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:id="@+id/tv_fruit2"
            android:text="Apple"
            android:textColor="#003366"
            android:textSize="11sp"
            android:gravity="center"
            android:textStyle="bold"
            android:layout_weight="1"/>

        <TextView android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:id="@+id/tv_flower2"
            android:text="Lotous"
            android:textColor="#003366"
            android:textSize="11sp"
            android:gravity="center"
            android:textStyle="bold"
            android:layout_weight="1"/>

        <TextView android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:id="@+id/tv_animal2"
            android:text="Lion"
            android:textColor="#003366"
            android:textSize="11sp"
            android:gravity="center"
            android:textStyle="bold"
            android:layout_weight="1"/>

        <TextView android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:id="@+id/tv_vegitable2"
            android:text="Onion"
            android:textColor="#003366"
            android:textSize="11sp"
            android:gravity="center"
            android:textStyle="bold"
            android:layout_weight="1"/>

    </TableRow>

</TableLayout>


GRIDLAYOUT

In Grid Layout, it create a rectangular cell in which we  placed the childrenView. The grid is seprated by a thin line.
GridLayout uses a grid of infinitely -thin lines to separate its drawing area into: rows ,column, and cells. It supports both row and column spanning, which together allow a widgit to occupy a ractangular range of cells that are next to each other.  


You can downLoad The source code  from  GitHub

SHARE

About prabhakar jha