XML layout in android

It can be supposed as a rack in which different widgets or elements that you see in the UI are kept. Let me define: “It is the architecture for the user interface in an Activity. It defines the layout structure and holds all the elements that appear to the user.

Actually, we can create our UI in two ways, that is, we can declare the layout in two ways:

1)   Programmatically

2)   Declaring the widgets or UI elements in XML.

The layout consists of Views and View Groups. They are defined using their corresponding tags.

Now let’s talk about View Groups.

Linear Layout: This is a View Group in which the child Views or View Groups are arranged either vertically or horizontally.

XML code is as follows:

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/txtvname"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text=" Name "
 android:textSize="20dip"
 />
 <EditText 
 android:id="@+id/edtvname"
 android:layout_width="120dip"
 android:layout_height="wrap_content"
 android:textSize="20dip"
 />
 <Button 
 android:id="@+id/btnsubmit"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text=" OK "
 />
</LinearLayout>

This is how the output looks like:

Relative Layout: This is a View Group in which the child Views are arranged relative to the positions of the previous Views.

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/txtvnamerl"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text=" Name "
 />
 <EditText 
 android:id="@+id/edtname"
 android:layout_width="120dip"
 android:layout_height="wrap_content"
 android:layout_toRightOf="@+id/txtvnamerl"
 android:textSize="20dip"
 />
 <Button 
 android:id="@+id/btnok"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_below="@+id/edtname"
 android:layout_marginLeft="25dip"
 android:text=" ok "
 />
</RelativeLayout>
The Output looks like:

Table Layout: This View Group displays the child Views in rows and columns.

The XML code is here:

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >
 <TableRow 
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 >
 <TextView 
 android:id="@+id/txtvnameab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text=" Name "
 />
 <EditText 
 android:id="@+id/edtnameab"
 android:layout_width="120dip"
 android:layout_height="wrap_content"
 android:textSize="20dip"
 />
 </TableRow>
 <TableRow 
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 >
 <Button 
 android:id="@+id/btnokab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:text=" ok "
 />
 </TableRow>
</TableLayout>

The Screen Shot of the Output is:

Absolute Layout: This View Group allows the child Views to be displayed in absolute positions or x/y coordinates.

The XML code is:

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >
 <TextView 
 android:id="@+id/txtvnameab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_x="30dip"
 android:layout_y="30dip"
 android:text=" Name "
 />
 <EditText 
 android:id="@+id/edtnameab"
 android:layout_width="120dip"
 android:layout_height="wrap_content"
 android:layout_x="30dip"
 android:layout_y="60dip"
 android:textSize="20dip"
 />
 <Button 
 android:id="@+id/btnokab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_x="30dip"
 android:layout_y="110dip"
 android:text=" ok "
 />
 </AbsoluteLayout>
The Output screen is shown below:

Frame Layout: This layout is used to allow a specific area on the screen for displaying a single item.

The XML code is:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent" >
 <TextView 
 android:id="@+id/txtvnameab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="left"
 android:gravity="center"
 android:layout_marginLeft="30dip"
 android:text=" Name "
 />
 <EditText 
 android:id="@+id/edtnameab"
 android:layout_width="120dip"
 android:layout_height="wrap_content"
 android:layout_gravity="right"
 android:layout_marginRight="100dip"
 android:gravity="center_vertical"
 android:textSize="20dip"
 />
 <Button 
 android:id="@+id/btnokab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center"
 android:layout_marginBottom="150dip"
 android:gravity="center"
 android:text=" ok "
 />
</FrameLayout>
The Output is shown below:

Hey now just try by yourselves. Hope this post was useful.
Advertisements

, , , , , , , , , , , , , , , , , , , , ,

  1. #1 by mahbubzaman on April 23, 2012 - 1:59 pm

    great tutorial!

    • #2 by Deepthi G on April 23, 2012 - 9:56 pm

      Hey, Thanks a bunch.. 🙂 Keep Reading 🙂

  2. #3 by Vaishalie Sharma on December 5, 2012 - 7:41 pm

    so basically there is nothing special with view group apart from that they are just of different views that we define in xml, or i can say each layout’s parent view is a view group(like linear/relative/absolute layout) that contains other views(like textview/button etc.)..

  3. #4 by tabrez on November 5, 2013 - 3:32 pm

    i wanted to start a new activity after pressing the three buttons …please let me know how can i achieve this?
    thanks

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

%d bloggers like this: