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.