Post
Ask Question

Working With LinearLayout in Android Using Visual Studio 2010 - Part 2

Introduction

 
We have already discussed in my previous article that the LinearLayout arranges views in a single column or single row. It displays child View elements in a linear direction, either vertically or horizontally. Like a box it contains controls inside; controls are drawn one after each other either horizontally or vertically according to the Orientation of the layout.
 
When dealing with Linear layout there are five properties that we can deal with:
  1. Orientation
  2. Fill model
  3. Weight
  4. Gravity
  5. padding
As you have already learned the first three categories, in this article, I am going to explain the remaining two categories Gravity and Padding.
  1. Gravity: By default, widgets are positioned in the top-left of the screen but if you want you can specify the "gravity" for each component that's in the LinearLayout. This determines whether the component is left or right-aligned, and top or bottom aligned, or a combination of these.
     
    Basically, we use six types of gravity properties with LinearLayout:
     
    --left
    --center
    --center_vertical 
    --center_horizontal
    --right
    --bottom
     
    I know based on the above documentation it was not very clear how the above layout parameters work. So, I read and find out more details and finally understood how to use gravity with LinearLayout. I will explain these properties with examples:
     
    left gravity
    1. <TextView  
    2.       android:layout_gravity="left"  
    3.       android:background=    "#aa0000"  
    4.       android:textColor="#ffffffff"  
    5.       android:text="TextView with Left Gravity"  
    6.       android:layout_width="wrap_content"  
    7.       android:layout_height=    "wrap_content"/>
    Output
     
    Gravity Left property
     
    center gravity
    1. <TextView  
    2.       android:layout_gravity="center"  
    3.       android:background=    "#00aa00"  
    4.       android:textColor="#ffffffff"   
    5.       android:text="TextView with center Gravity"  
    6.       android:layout_width="wrap_content"  
    7.       android:layout_height="wrap_content"/> 
     Output:
     
    Gravity Center property
     
    center_vertical gravity
    1. <TextView   
    2.       android:layout_gravity="center_vertical"   
    3.       android:background=    "#0000aa"   
    4.       android:textColor="#ffffffff"   
    5.       android:text="TextView with center vertical Gravity"   
    6.       android:layout_width=    "wrap_content"  
    7.       android:layout_height=    "wrap_content"  /> 
    Output:
     
    Gravity Center Vertical property
     
    center_horozontal gravity
    1. <TextView  
    2.       android:layout_gravity="center_horizontal"  
    3.       android:background="#00FFFF"  
    4.       android:textColor="#ffffffff"  
    5.       android:text="TextView with center horizontal Gravity"   
    6.       android:layout_width= "wrap_content"  
    7.       android:layout_height="wrap_content"  />  
    Output:
     
    Gravity Center Horizontal property
     
    right gravity
    1. <TextView   
    2.       android:layout_gravity="right"   
    3.       android:background=    "#FF00FF"   
    4.       android:textColor="#ffffffff"   
    5.       android:text="TextView with right Gravity"   
    6.       android:layout_width=    "wrap_content"  
    7.       android:layout_height=    "wrap_content"  />  
    Output:
     
    Gravity Right property
     
    bottom
    1. <TextView  
    2.       android:layout_gravity="bottom"  
    3.       android:background=    "#0999ff"   
    4.       android:textColor="#ffffffff"  
    5.       android:text="TextView with bottom Gravity"   
    6.       android:layout_width=    "wrap_content"  
    7.       android:layout_height=    "wrap_content"  />  
    Output:
     
    Gravity Bottom property
     
    Here is the complete application to understand all properties of gravity in a single application:
    1. <?xml version="1.0" encoding="utf-8"?>  
    2.    
    3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
    4.     android:orientation="vertical"   
    5.     android:layout_width="fill_parent"  
    6.     android:layout_height="fill_parent">  
    7.    
    8.   <TextView   
    9.       android:layout_gravity="left"   
    10.       android:background=    "#aa0000"  
    11.       android:textColor="#ffffffff"   
    12.       android:text="TextView with Left Gravity"   
    13.       android:layout_width="wrap_content"   
    14.       android:layout_height=    "wrap_content"/>  
    15.    
    16.   <TextView   
    17.       android:layout_gravity="center"   
    18.       android:background=    "#00aa00"   
    19.       android:textColor="#ffffffff"   
    20.       android:text="TextView with center Gravity"   
    21.       android:layout_width=    "wrap_content"   
    22.       android:layout_height=    "wrap_content"/>  
    23.    
    24.   <TextView   
    25.       android:layout_gravity="center_vertical"   
    26.       android:background=    "#0000aa"   
    27.       android:textColor="#ffffffff"   
    28.       android:text="TextView with center vertical Gravity"   
    29.       android:layout_width=    "wrap_content"   
    30.       android:layout_height=    "wrap_content"  />  
    31.    
    32.   <TextView  
    33.       android:layout_gravity="center_horizontal"  
    34.       android:background=    "#00FFFF"   
    35.       android:textColor="#ffffffff"   
    36.       android:text="TextView with center horizontal Gravity"   
    37.       android:layout_width=    "wrap_content"  
    38.       android:layout_height=    "wrap_content"  />  
    39.    
    40.   <TextView   
    41.       android:layout_gravity="right"   
    42.       android:background=    "#FF00FF"   
    43.       android:textColor="#ffffffff"   
    44.       android:text="TextView with right Gravity"   
    45.       android:layout_width=    "wrap_content"   
    46.       android:layout_height=    "wrap_content"  />   
    47.   
    48.   <TextView   
    49.       android:layout_gravity="bottom"  
    50.       android:background=    "#0999ff"  
    51.       android:textColor="#ffffffff"  
    52.       android:text="TextView with bottom Gravity"  
    53.       android:layout_width=    "wrap_content"   
    54.       android:layout_height=    "wrap_content"  />  
    55. </LinearLayout >  
    Output: 
     
    textviewG.gif
     
  2. Padding: The "android:padding" property sets the padding between widgets. If you specify the padding property to the container then the container with all of its widgets would be shifted by the value, if you specify it to a single widget then the contents of that widget would be shifted by the specified value.
     
    I set the layout_height property to "wrap_content" which means the height of the TextView should be increased according to the size of text, but because I use the padding property the height of the TextView is increased according to the size of the text as well as the value of "android:paddingTop".
    1. <?xml version="1.0" encoding="utf-8"?>  
    2.    
    3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
    4.     android:orientation="vertical"   
    5.     android:paddingTop="20px"   
    6.     android:layout_width="fill_parent"  
    7.     android:layout_height="fill_parent">  
    8.    
    9.   <TextView   
    10.       android:text=    "First Layout"   
    11.       android:background=    "#aa0000"   
    12.       android:textColor="#ffffffff"   
    13.       android:layout_width=    "fill_parent"   
    14.       android:paddingTop="20px"   
    15.       android:layout_height=    "wrap_content"/>  
    16.    
    17.   <TextView   
    18.       android:text=    "Second Layout"   
    19.       android:background=    "#00aa00"   
    20.       android:textColor="#ffffffff"   
    21.       android:layout_width=    "fill_parent"   
    22.       android:paddingTop="20px"   
    23.       android:layout_height=    "wrap_content"/>  
    24.    
    25.   <TextView   
    26.       android:text=    "Thired Layout"   
    27.       android:background=    "#0000aa"   
    28.       android:textColor="#ffffffff"   
    29.       android:layout_width=    "fill_parent"   
    30.       android:paddingTop="20px"  
    31.       android:layout_height=    "wrap_content"  />  
    32.    
    33. </LinearLayout>   
    Output:
     
    Padding Property
I hope you enjoy learning how to work with LinearLayout in Android using Visual Studio 2010.  


Similar Articles