Post
Ask Question

RelativeLayout in Android Using Visual Studio 2010

Introduction

 
Here I am discussing the second type of view; for the first see my previous article.
 

RelativeLayout

 
The RelativeLayout organizes layout components in relation to each other. This provides more flexibility of component positioning than LinearLayouts. The position of a view can be specified relative to sibling elements or in positions relative to the RelativeLayout area; while working with this layout we need to have a very clear idea of how the elements of the screen are going to be displayed.
 
The drawback of this layout is that you cannot have a circular dependency between the size of the RelativeLayout and the position of its children. For example, you cannot have a RelativeLayout whose height is set to WRAP_CONTENT and a child set to ALIGN_PARENT_BOTTOM.
The relative layout widgets can be placed in one of two ways; these are:
  1. Relative to the container.
  2. Relative to other widgets.
Relative to the container: When we talk about container relative layout it means the widgets are placed in positions relative to their container. We can place the widgets in seven different positions by using these following seven properties:
  1. android:layout_alignParentTop  
  2. android:layout_alignParentLeft  
  3. android:layout_centerVertical  
  4. android:layout_centerHorizontal  
  5. android:layout_centerInParent  
  6. android:layout_alignParentRight  
  7. android:layout_alignParentBottom 
Let's see the example one-by-one:
 
android:layout_alignParentTop
  1. <TextView   
  2.       android:layout_alignParentTop="true"   
  3.       android:text=    "layout align Top"   
  4.       android:textSize="30px"   
  5.       android:background=    "#c0c0c0ff"   
  6.       android:layout_width=    "wrap_content"   
  7.       android:layout_height=    "wrap_content"/>  
Output:
 
layout alignParentTop
 
android:layout_alignParentLeft
  1. <TextView   
  2.       android:layout_alignParentLeft="true"   
  3.       android:text=    "layout align Left"   
  4.       android:textSize="30px"   
  5.       android:background=    "#c0c0c0ff"   
  6.       android:layout_width=    "wrap_content"  
  7.       android:layout_height=    "wrap_content"/> 
Output:
 
layout align ParentLeft
 
android:layout_centerVertical
  1. <TextView   
  2.       android:layout_centerVertical="true"   
  3.       android:text=    "layout center Vertical"   
  4.       android:textSize="30px"   
  5.       android:background=    "#c0c0c0ff"   
  6.       android:layout_width=    "wrap_content"   
  7.       android:layout_height=    "wrap_content"/>  
Output:
 
layout align centerVertical
 
 android:layout_centerHorizontal
  1. <TextView   
  2.       android:layout_centerHorizontal="true"   
  3.       android:text=    "layout center Horizontal"   
  4.       android:textSize="30px"   
  5.       android:background=    "#c0c0c0ff"   
  6.       android:layout_width=    "wrap_content"  
  7.       android:layout_height=    "wrap_content"/>  
Output:
 
layout align centerHorizontal
 
android:layout_centerInParent 
  1. <TextView   
  2.       android:layout_centerInParent="true"   
  3.       android:text=    "layout aligh center In Parent"   
  4.       android:textSize="30px"   
  5.       android:background=    "#c0c0c0ff"   
  6.       android:layout_width=    "wrap_content"  
  7.       android:layout_height=    "wrap_content"/>  
Output:
 
layout align centerInParent
 
android:layout_alignParentRight
  1. <TextView    
  2.       android:layout_alignParentRight="true"   
  3.       android:text=    "layout align Right"   
  4.       android:textSize="30px"   
  5.       android:background=    "#c0c0c0ff"   
  6.       android:layout_width=    "wrap_content"  
  7.       android:layout_height=    "wrap_content"/>  
Output:
 
layout align ParentRight
 
android:layout_alignParentBottom
  1. <TextView   
  2.       android:layout_alignParentBottom="true"   
  3.       android:text=    "layout align Bottom"   
  4.       android:textSize="30px"   
  5.       android:background=    "#c0c0c0ff"   
  6.       android:layout_width=    "wrap_content"   
  7.       android:layout_height=    "wrap_content"/> 
Output:
 
layout align ParentBottom
 
Relative to other widgets: There are four properties that determine the position of the widget in relation to other widgets:
  1. android:layout_above  
  2. android:layout_below  
  3. android:layout_toRightOf  
  4. android:layout_toLeftOf 
Example:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.    
  3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"   
  4.     android:layout_width="fill_parent"   
  5.     android:orientation="vertical"   
  6.     android:layout_height="fill_parent">  
  7.    
  8.   <TextView   
  9.       android:id="@+id/text1"   
  10.       android:text=    "First"   
  11.       android:textSize="30px"   
  12.       android:background=    "#c0c0c0ff"   
  13.       android:layout_width=    "wrap_content"  
  14.       android:layout_height=    "wrap_content"/>  
  15.    
  16.   <TextView   
  17.       android:id="@+id/text2"   
  18.       android:text=    "second"   
  19.       android:textSize="30px"   
  20.       android:background=    "#ffffffff"   
  21.       android:layout_width=    "wrap_content"   
  22.       android:layout_height=    "wrap_content"  
  23.      android:layout_below="@id/text1"/>  
  24.    
  25.   <TextView   
  26.       android:id="@+id/text3"   
  27.       android:text=    "Third"   
  28.       android:textSize="30px"   
  29.       android:background=    "#ff0fffff"   
  30.       android:layout_width=    "wrap_content"   
  31.       android:layout_height=    "wrap_content"   
  32.       android:layout_toRightOf="@id/text2"/>  
  33.   
  34. </RelativeLayout> 
Output:
 
Position align
 
Have a nice learning.....


Similar Articles