Just Simple Info

Pages

Android LinearLayout Example

LinearLayout in Android is a layout where children are vertically and horizontally aligned. The children are aligned base on layout orientation (vertical and horizontal). By default horizontal orientation is set. As you can see the image above, the children are horizontally aligned in gray background while green background children are vertically aligned. Like other layout we can also create LinearLayout by XML and Java code.
 Now we are going to :
  1. Create LinearLayout using xml
  2. Create LinearLayout using java code.
  3. Aligned children vertically and horizontally in xml layout.
  4. Aligned childred vertically and horizontally  programmatically.
Here is the horizontal_linearlayout.xml
file location : res/layout


<?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="horizontal" 
    android:background="#737373">
    
    <!-- GRAY BACKGROUND COLOR -->

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button A" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button B" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button C" />

</LinearLayout>

Here is the vertical_linearlayout.xml
file location : res/layout

<?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"
    android:background="#3cff00">
 
 <!-- GREEN BACKGROUND COLOR -->
 
    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button A" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button B" />

    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button C" />

</LinearLayout>

Now that we have xml file we can now load that layout in out application.

Load xml LinearLayout in to our interface.


// GET HORIZONTAL LINEAR LAYOUT FROM XML  
 LinearLayout horizontaLinearLayoutFromXml =  (LinearLayout) LayoutInflater.from(this).inflate(R.layout.horizontal_linearlayout, null, false);  
   
 // GET VERTICAL LINEAR LAYOUT FROM XML   
 LinearLayout verticalLinearFromXml =  (LinearLayout) LayoutInflater.from(this).inflate(R.layout.vertical_linearlayout, null, false);  
   
 // ADD LINEAR LAYOUT TO CONTENT VIEW  
 contentView.addView(horizontaLinearLayoutFromXml);  
 contentView.addView(verticalLinearFromXml);  

Here is the complete code of creating LinearLayout using xml.


package com.example.linearlayout;  
  
import android.app.Activity;  
import android.os.Bundle;  
import android.view.LayoutInflater;  
import android.widget.LinearLayout;  
  
public class MainActivity extends Activity {  
  
   
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
         
          
        LinearLayout  contentView = new LinearLayout(this);  
        contentView.setOrientation(LinearLayout.VERTICAL);  
        setContentView(contentView);  
          
          
          
        // GET HORIZONTAL LINEAR LAYOUT FROM XML  
        LinearLayout horizontaLinearLayoutFromXml =  (LinearLayout) LayoutInflater.from(this).inflate(R.layout.horizontal_linearlayout, null, false);  
          
        // GET VERTICAL LINEAR LAYOUT FROM XML   
        LinearLayout verticalLinearFromXml =  (LinearLayout) LayoutInflater.from(this).inflate(R.layout.vertical_linearlayout, null, false);  
          
        // ADD LINEAR LAYOUT TO CONTENT VIEW  
        contentView.addView(horizontaLinearLayoutFromXml);  
        contentView.addView(verticalLinearFromXml);  
          
    }  
}  

We are done creating and loading our LinearLayout using xml. And now we will create LinearLayout in java code and were are going to set the orientation also programmatically.
Let's start!!!

Create LinearLayout programmatically with horizontal orientation.
We will create a method that will return our LinearLayout with children horizontally aligned.


/** 
    * Horizontal LinearLayout 
    * @return 
    */  
   LinearLayout horizontalLinearLayout(){  
      
    LinearLayout linearLayout = new LinearLayout(this);  
      
    // SET HORIZONTAL ORIENTATION  
      
    linearLayout.setOrientation(LinearLayout.HORIZONTAL);  
      
    // SET GRAY BACKGROUND COLOR  
      
    linearLayout.setBackgroundColor(Color.parseColor("#737373"));  
      
    // CREATE BUTTON  
      
    Button buttonA = new Button(this);  
    Button buttonB = new Button(this);  
    Button buttonC = new Button(this);  
      
    // SET BUTTON TEXT  
      
    buttonA.setText("Button A");  
    buttonB.setText("Button B");  
    buttonC.setText("Button C");  
      
    // ADD BUTTON TO LINEAR LAYOUT  
      
    linearLayout.addView(buttonA);  
    linearLayout.addView(buttonB);  
    linearLayout.addView(buttonC);  
      
    return linearLayout;  
      
   }  

Create LinearLayout programmatically with vertical orientation.
and now let's create method that will return LinearLayout with children vertically aligned.

  /** 
    * Vertical LinearLayout 
    * @return 
    */  
   LinearLayout verticalLinearLayout(){  
      
    LinearLayout linearLayout = new LinearLayout(this);  
      
    // SET VERTICAL ORIENTATION  
      
    linearLayout.setOrientation(LinearLayout.VERTICAL);  
      
    // SET GREEN BACKGROUND COLOR  
      
    linearLayout.setBackgroundColor(Color.parseColor("#3cff00"));  
      
    // CREATE BUTTON  
      
    Button buttonA = new Button(this);  
    Button buttonB = new Button(this);  
    Button buttonC = new Button(this);  
      
    // SET BUTTON TEXT  
      
    buttonA.setText("Button A");  
    buttonB.setText("Button B");  
    buttonC.setText("Button C");  
      
    // ADD BUTTON TO LINEAR LAYOUT  
      
    linearLayout.addView(buttonA);  
    linearLayout.addView(buttonB);  
    linearLayout.addView(buttonC);  
    return linearLayout;  
   }  

Let's load our LinearLayout in our application interface.
here we going to do to load the LinearLayout in out main interface.
   @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
          
        // CREATE LINEARLAYOUT FOR OUR CONTENT VIEW  
       LinearLayout contentView = new LinearLayout(this);  
       contentView.setOrientation(LinearLayout.VERTICAL);  
          
        // CALL THE METHOD THAT CREATED OU HORIZONTAL LINEARLAYOUT  
       LinearLayout horizontaLinearLayout = this.horizontalLinearLayout();  
          
        // CALL THE METHOD THAT CREATE OUR VERTICAL LINEARLAYOUT  
        LinearLayout verticalLinearLayout =  this.verticalLinearLayout();  
          
        // ADD LINEAR LAYOUT TO CONTENT VIEW  
        contentView.addView(horizontaLinearLayout);  
        contentView.addView(verticalLinearLayout);  
          
        // SET CONTENT VIEW  
        setContentView(contentView);  
    }  

Here is the complete code of creating LinearLayout and arranged childred view programmatically.


package com.example.linearlayoutprogrammatically;  
  
import android.app.Activity;  
import android.graphics.Color;  
import android.os.Bundle;  
import android.widget.Button;  
import android.widget.LinearLayout;  
  
public class MainActivity extends Activity {  
  
   
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
          
        // CREATE LINEARLAYOUT FOR OUR CONTENT VIEW  
       LinearLayout contentView = new LinearLayout(this);  
       contentView.setOrientation(LinearLayout.VERTICAL);  
          
        // CALL THE METHOD THAT CREATED OU HORIZONTAL LINEARLAYOUT  
       LinearLayout horizontaLinearLayout = this.horizontalLinearLayout();  
          
        // CALL THE METHOD THAT CREATE OUR VERTICAL LINEARLAYOUT  
        LinearLayout verticalLinearLayout =  this.verticalLinearLayout();  
          
        // ADD LINEAR LAYOUT TO CONTENT VIEW  
        contentView.addView(horizontaLinearLayout);  
        contentView.addView(verticalLinearLayout);  
          
        // SET CONTENT VIEW  
        setContentView(contentView);  
    }  
    /** 
     * Horizontal LinearLayout 
     * @return 
     */  
    LinearLayout horizontalLinearLayout(){  
       
     LinearLayout linearLayout = new LinearLayout(this);  
       
     // SET HORIZONTAL ORIENTATION  
       
     linearLayout.setOrientation(LinearLayout.HORIZONTAL);  
       
     // SET GRAY BACKGROUND COLOR  
       
     linearLayout.setBackgroundColor(Color.parseColor("#737373"));  
       
     // CREATE BUTTON  
       
     Button buttonA = new Button(this);  
     Button buttonB = new Button(this);  
     Button buttonC = new Button(this);  
       
     // SET BUTTON TEXT  
       
     buttonA.setText("Button A");  
     buttonB.setText("Button B");  
     buttonC.setText("Button C");  
       
     // ADD BUTTON TO LINEAR LAYOUT  
       
     linearLayout.addView(buttonA);  
     linearLayout.addView(buttonB);  
     linearLayout.addView(buttonC);  
       
     return linearLayout;  
       
    }  
      
    /** 
     * Vertical LinearLayout 
     * @return 
     */  
    LinearLayout verticalLinearLayout(){  
       
     LinearLayout linearLayout = new LinearLayout(this);  
       
     // SET VERTICAL ORIENTATION  
       
     linearLayout.setOrientation(LinearLayout.VERTICAL);  
       
     // SET GREEN BACKGROUND COLOR  
       
     linearLayout.setBackgroundColor(Color.parseColor("#3cff00"));  
       
     // CREATE BUTTON  
       
     Button buttonA = new Button(this);  
     Button buttonB = new Button(this);  
     Button buttonC = new Button(this);  
       
     // SET BUTTON TEXT  
       
     buttonA.setText("Button A");  
     buttonB.setText("Button B");  
     buttonC.setText("Button C");  
       
     // ADD BUTTON TO LINEAR LAYOUT  
       
     linearLayout.addView(buttonA);  
     linearLayout.addView(buttonB);  
     linearLayout.addView(buttonC);  
     return linearLayout;  
    }  
}  

Download Source Code Of Creating LinearLayout using xml.
Download Source Code Of Creating LinearLayout programmatically.
Happy coding!!!

No comments:

Post a Comment