Android Tutorial part-1 Introduction to Layout- Linear Layout

  Introduction to Layout -Linear Layout

Following are the layouts in android

• Linear Layout
• 
  
• Relative layout
• 
  
• Table Layout
• 
  
• Absolute Layout

Linear Layout

In Linear Layout the elements are arranged in a column or row .when we consider the linear layout there are number of properties to discussed. following are the important properties of Linear Layout.

1 orientation

In Linear Layout there are two types of orientations are there

•  Horizontal
•  Vertical

eg:

 android:orientation="vertical"

 or

 android:orientation="horizontal"

following is the example for the two orientation

Example for Linear Layout vertical  orientation

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

<TextView  

    android:layout_width="fill_parent" 

    android:layout_height="wrap_content" 

    android:text="@string/hello"

    />

<Button 

android:text="Button" 

android:id="@+id/button1" 

android:layout_width="wrap_content"

 android:layout_height="wrap_content">

</Button>

<Spinner 

android:layout_width="fill_parent" 

android:id="@+id/spinner1" 

android:layout_height="wrap_content">

</Spinner>

<EditText 

android:layout_height="wrap_content"

 android:id="@+id/editText1" 

android:layout_width="fill_parent" 

android:inputType="date">

  

</EditText>

<ImageView android:id="@+id/imageView1" 

android:layout_width="wrap_content"

android:src="@drawable/icon"

 android:layout_height="wrap_content">

</ImageView>

<VideoView android:layout_width="fill_parent"

 android:id="@+id/videoView1" 

android:layout_height="83dp">

</VideoView>

<ImageButton 

android:src="@drawable/icon" 

android:layout_width="wrap_content" 

android:layout_height="wrap_content"

 android:id="@+id/imageButton1">

</ImageButton>

</LinearLayout>

   

here is the next type of orientation ,horizontal  orientation .example for the horizontal orientation is given 

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="horizontal"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

    <ImageView 

android:id="@+id/imageView1"

 android:layout_width="wrap_content"

 android:src="@drawable/icon" 

android:layout_height="wrap_content">

</ImageView>

    <Button android:text="Button" 

android:id="@+id/button1" 

android:layout_width="wrap_content" 

android:layout_height="wrap_content">

</Button>

    <Spinner android:layout_weight="1"

 android:layout_width="wrap_content" 

android:id="@+id/spinner1" 

android:layout_height="wrap_content">

</Spinner>

    <Button android:text="Button"

 android:id="@+id/button2" 

android:layout_width="wrap_content"

 android:layout_height="wrap_content"></Button>

<TextView  

    android:layout_width="fill_parent" 

    android:layout_height="wrap_content" 

    android:text="@string/hello"

    />

<EditText 

android:layout_height="wrap_content" 

android:id="@+id/editText1" 

android:layout_weight="1"

android:layout_width="wrap_content">

</EditText>

</LinearLayout>

                                

the next property which is used in the layout is weight.the example is given below    

android layout:weight

android weight is used to give the size or the space of the widgets.the default value is 0.

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

    <Button 

    android:id="@+id/button1" 

  android:layout_height="wrap_content" 

  android:text="Button" 

   android:layout_width="298dp"

   >

</Button>

    <TextView 

    android:text="TextView" 

    android:id="@+id/textView1" 

    android:layout_height="wrap_content" 

    android:textAppearance="?android:attr/textAppearanceLarge" 

    android:layout_width="fill_parent">

    </TextView>

    <EditText 

    android:layout_height="wrap_content" 

    android:id="@+id/editText1" 

    android:layout_width="fill_parent"

   android:layout_weight="1">

        

    </EditText>

   

</LinearLayout>

android layout:Gravity

android layout:gravity will determine the position of the widgets.if it is aligned left or right or center.normally most of the widgets are aligned left/following is the example for the android gravity

following are the different types of android gravity

 android:layout_gravity="top"

 android:layout_gravity="bottom"

 android:layout_gravity="left"

 android:layout_gravity="right"

 android:layout_gravity="center_vertical"

 android:layout_gravity="fill_vertical"

 android:layout_gravity="center_horizontal"

 android:layout_gravity="fill_horizontal"

 android:layout_gravity="center"

 android:layout_gravity="fill"

 android:layout_gravity="clip_vertical"

 android:layout_gravity="clip_horizontal"

 android:layout_gravity="bottom"

 android:layout_gravity="@+id/button1"

 following is the example program

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

    <EditText

     android:layout_height="wrap_content" 

     android:id="@+id/editText1" 

     android:layout_width="fill_parent">

         </EditText>

    <Button android:text="Button" 

   

      android:layout_gravity="right"

    

     android:layout_width="wrap_content"

      android:layout_height="wrap_content">

      </Button>

    

  

</LinearLayout>

here the button gravity is set to right

android gravity and android:layout_gravity are different.

In android gravity the contents of the widget is placed.but in android :layout_gravity is based on the parent 

structure.