Types Of Layouts In Android 1

Different Types Of Layout In Android:

Layouts means in android are xml files,There are Following types of layouts.

1. Linear Layout
2. Relative Layout
3. Table Layout

4. Absolute Layout

5. Frame Layout
6. Grid View
7. Tab Layout

8. List View 

In project structure layouts resides in the layout folder as shown in the figure.

 Layout Attributes

Each layout has a set of attributes which define the visual properties of that layout. There are few common attributes among all the layouts and their are other attributes which are specific to that layout. Following are common attributes and will be applied to all the layouts:

Attribute	Description
android:id	This is the ID which uniquely identifies the view.
android:layout_width	This is the width of the layout.
android:layout_height	This is the height of the layout
android:layout_marginTop	This is the extra space on the top side of the layout.
android:layout_marginBottom	This is the extra space on the bottom side of the layout.
android:layout_marginLeft	This is the extra space on the left side of the layout.
android:layout_marginRight	This is the extra space on the right side of the layout.
android:layout_gravity	This specifies how child Views are positioned.
android:layout_weight	This specifies how much of the extra space in the layout should be allocated to the View.
android:layout_x	This specifies the x-coordinate of the layout.
android:layout_y	This specifies the y-coordinate of the layout.
android:layout_width	This is the width of the layout.
android:layout_width	This is the width of the layout.
android:paddingLeft	This is the left padding filled for the layout.
android:paddingRight	This is the right padding filled for the layout.
android:paddingTop	This is the top padding filled for the layout.
android:paddingBottom	This is the bottom padding filled for the layout.

LinearLayout (LL):

This type of a ViewGroup is set as default when creating new layout-files. It is really convenient and flexible enough to create screens of different complexity. LL has an Orientation property, which defines how will the child elements be positioned - in a vertical or horizontal line.

Let’s make a simple and clear example.

Create a project:

Project name: LinearLayouts
Build Target: Android 2.3.3
Application name: LayoutApp
Package name: com.ambillpur.sunil
Create Activity: MainActivity

Open activity_main.xml layout-file and place the following code inside:

 <?xml version="1.0" encoding="utf-8"?>

<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"
 android:orientation="vertical">
</LinearLayout>

Now we have a Linear Layout with  vertical orientation as a root element.

Drag three buttons from the left to the root Linear Layout. They are positioned horizontally.                     

                   

 <?xml version="1.0" encoding="utf-8"?>

<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"
 android:orientation="horizontal">
</LinearLayout>

Now change Orientation property to  horizontal orientation for LL in Properties and save (CTRL+SHIFT+S) - buttons are positioned horizontally

            

  

package com.ambilpura.sunil; import android.app.Activity; import android.os.Bundle; public class AndroidLayoutsActivity extends Activity {     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);     } }

5. 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.

Relative Layout:

In Android, RelativeLayout let you position your component base on the nearby (relative or sibling) component’s position. It’s the most flexible layout, that allow you to position your component to display in anywhere you want

In RelativeLayout, you can use “above, below, left and right” to arrange the component position, for example, display a “button1″ below “button2″, or display “button3″ on right of the “button1″.

We can use these properties in relative layout:

 

In this type of Layout, each View-element can be positioned in a specific way relatively to the specified View-element.

Types of relationships:

1) to the left, right, above or below the specified element (layout_toLeftOf, layout_toRightOf, layout_above, layout_below)

2) aligned by the left, right, top or bottom edge of the specified element (layout_alignLeft, layout_alignRight, layout_alignTop, layout_alignBottom)

3) aligned by the left, right, top or bottom edge of a parent (layout_alignParentLeft, layout_alignParentRight, layout_alignParentTop, layout_alignParentBottom)

4) centered vertically, centered horizontally, centered vertically and horizontally relative to its parent (layout_centerVertical, layout_centerHorizontal, layout_centerInParent)

More details are available in help.

Create activity_main.xml and copy and paste this xml-code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent">
<TextView
 android:id="@+id/label"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:text="Type here:">
</TextView>
<EditText
 android:id="@+id/entry"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_below="@+id/label"
 android:background="@android:drawable/editbox_background">
</EditText>
<Button
 android:id="@+id/ok"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentRight="true"
 android:layout_below="@+id/entry"
 android:layout_marginLeft="10dip"
 android:text="OK">
</Button>
<Button
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignTop="@+id/ok"
 android:layout_toLeftOf="@+id/ok"
 android:text="Cancel">
</Button>
</RelativeLayout>

package com.ambilpura.sunil; import android.app.Activity; import android.os.Bundle; public class AndroidLayoutsActivity extends Activity {     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);     } }

5. 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.     

                   

We are interested in xml-code. I will now shortly describe unknown attributes and their meanings:

android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:id="@+id/entry"

- the android word in the name of each element is a namespace, I will omit it in the explanations.
- id - the element ID,
- layout_width (the width of the element) and layout_height (the height of the element) can be specified in absolute values or can be the following: fill_parent (maximum available width or height in the bounds of its parent) and wrap_content (width of height is defined by the content of an element). Help states that there is also match_parent. It is the same as fill_parent. For some reasons, developers of the system decided that match_parent name is more convenient and they will stop using fill_parent soon. For now, it’s left for compatibility. So remember that match_parent = fill_parent and we will be trying to use match_parent further. Later we will stop on this and analyze it in more detail.

Now let’s get back to our elements. In the example we can see a TextView, EditText, and two Buttons - OK and Cancel. Let’s look through the attributes we are interested in.

TextView 
android:id="@+id/label" - ID
android:layout_width="match_parent" - occupies all the available width (even though, it’s not visible on the screen)
android:layout_height="wrap_content" - height defined by the content
it is not related to anything

EditText 
android:id="@+id/entry" - ID
android:layout_width="match_parent" - occupies all the available width
android:layout_height="wrap_content" - height defined by the content
android:layout_below="@id/label" - located below the TextView (reference by ID)

Button_OK 
android:id="@+id/ok" – ID
android:layout_width="wrap_content" - width defined by the content
android:layout_height="wrap_content" – height defined by the content
android:layout_below="@id/entry" - is located below EditText
android:layout_alignParentRight="true" - is aligned by the right edge of the parent
android:layout_marginLeft="10dip" – has a margin on the left (for Button_Cancel not to be adjacent)

Button_Cancel
android:layout_width="wrap_content" - width defined by the content
android:layout_height="wrap_content" – height defined by the content
android:layout_toLeftOf="@id/ok" - located to the left of Button_OK
android:layout_alignTop="@id/ok" - aligned by the top edge of Button_OK.

Table Layout:

TableLayout consists of rows TableRow (TR). And each TR contains View elements that form columns. So the number of Views in TR is a number of columns. But the number of columns in  a table must be equal for all rows. That’s why, when different TRs have different numbers of View-elements (columns), the overall number of columns is defined by the TR with the maximum number. Let’s observe an example.

Create layout-file tlayout.xml with TableLayout as a root element.

                     

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/TableLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <TableRow>

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />
    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />
    </TableRow>

    <TableRow>

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />
    </TableRow>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

</TableLayout>

 Add three TableRow rows into the root TableLayout (from Layouts section on the left) and add two buttons into each row. The result: our table has got three rows and two columns.

Add a few more buttons to the first row. The number of columns now equals 4, as it is defined by the row with the maximum number of elements and it is the first row in our case. For the second and the third rows the third and the fourth columns are empty.

 

Add a TextView and a Button to the second row and make text in the added TextView empty. Do the same with the third row. We can see that these elements are now placed in the third and the fourth column. And because TextView is empty and not seen on the screen, it seems like the third column in the second and third rows is empty.

The width of the column is defined by the widest element in this column. Enter some text into one of the TextViews and we can see that it has made a column wider.

Now I will remove elements of the fourth column and build a screen like this. Try to do it on your own as an exercise.

TL can contain not only TRs, but also simple Views. For example, add Button just into the TL, not into TR and you will see how it stretches to the width of the whole table.

 Absolute Layout:

Absolute Layout is based on the simple idea of placing each control at an absolute position.  You specify the exact x and y coordinates on the screen for each control.  This is not recommended for most UI development (in fact Absolute Layout is currently deprecated) since absolutely positioning every element on the screen makes an inflexible UI that is much more difficult to maintain.  Consider what happens if a control needs to be added to the UI. You would have to change the position of every single element that is shifted by the new control.

Here is a sample Layout XML using AbsoluteLayout.

<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/backbutton" android:text="Back" android:layout_x="10px" android:layout_y="5px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_x="10px" android:layout_y="110px" android:text="First Name" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <EditText android:layout_x="150px" android:layout_y="100px" android:width="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:layout_x="10px" android:layout_y="160px" android:text="Last Name" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <EditText android:layout_x="150px" android:layout_y="150px" android:width="100px" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </AbsoluteLayout>

package com.ambilpura.sunil; import android.app.Activity; import android.os.Bundle; public class AndroidLayoutsActivity extends Activity {     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);     } }

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.

Note how each element has android:layout_x and android:layout_y specified. Android defines the top left of the screen as (0,0) so the layout_x value will move the control to the right, and the layout_y value will move the control down. Here is a screenshot of the layout produced by this XML.

Frame Layout:

Frame Layout is designed to display a single item at a time. You can have multiple elements within a Frame Layout but each element will be positioned based on the top left of the screen. Elements that overlap will be displayed overlapping. I have created a simple XML layout using Frame Layout that shows how this works..

<FrameLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:src="@drawable/icon" android:scaleType="fitCenter" android:layout_height="fill_parent" android:layout_width="fill_parent"/> <TextView android:text="Learn-Android.com" android:textSize="24sp" android:textColor="#000000" android:layout_height="fill_parent" android:layout_width="fill_parent" android:gravity="center"/> </FrameLayout>

package com.ambilpura.sunil; import android.app.Activity; import android.os.Bundle; public class AndroidLayoutsActivity extends Activity {     @Override     public void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);     } }

5. 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.     

Here is the result of this XML.

 Remaining topics will be discussed in the next tutorials Grid View ,Tab Layout, List View 

Please Send Your Comments To ambilpura.sunil@gmail.com

NEXT Turotial : Types Of Layouts In Android 2