Post
Ask Question

Linear Layout In Android

Introduction

 
In this article, I explain the Linear Layout in Android. In Linear Layout we can use two types of views, one is horizontal and the other is vertical. When we want a linear design or simple design, we use this type of Linear Layout otherwise a Relative Layout is usually used in Android view displays.
 
Here I will show you how to use a Linear Layout in Android. In this article I will take a Linear Layout and one inner Linear Layout as shown in the output below, the main layout will be a vertical layer and the inner one will be a horizontal layer.
 
Step 1
 
First of all, create a new Android application project as shown below.
 
LinearLayout.jpg
 
Step 2
 
Now open the XML file as "res/layout/activity_main.xml" and update it with the following code. This XML code is only for the Linear Layout and the view inside it.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!-- Parent linear layout with vertical orientation -->  
  3. <LinearLayout  
  4.   xmlns:android="http://schemas.android.com/apk/res/android"  
  5.   android:orientation="vertical"  
  6.   android:layout_width="match_parent"  
  7.   android:layout_height="match_parent">  
  8.   <TextView  
  9.       android:id="@+id/textview1"  
  10.       android:layout_width="fill_parent" android:layout_height="wrap_content"  
  11.             android:text="Email:" android:padding="5dip"/>  
  12.   <EditText  
  13.       android:id="@+id/edittext1"  
  14.       android:layout_width="fill_parent"  
  15.       android:layout_height="wrap_content"  
  16.       android:layout_marginBottom="10dip"  
  17.       android:text="@string/email" />  
  18.   <EditText  
  19.       android:id="@+id/edittex2"  
  20.       android:layout_width="fill_parent"  
  21.       android:layout_height="wrap_content"  
  22.       android:layout_marginBottom="10dip" />  
  23.   <Button  
  24.       android:id="@+id/enter_btn"  
  25.       android:layout_width="fill_parent"  
  26.       android:layout_height="wrap_content"  
  27.       android:text="Enter" />  
  28.   <!-- Child linear layout with horizontal orientation -->  
  29.   <LinearLayout android:layout_width="fill_parent"  
  30.               android:layout_height="wrap_content"  
  31.               android:orientation="horizontal" android:background="#2a2a2a"  
  32.               android:layout_marginTop="25dip">  
  33.   <TextView  
  34.       android:id="@+id/home_btn"  
  35.       android:layout_width="fill_parent"  
  36.       android:layout_height="wrap_content"  
  37.       android:layout_weight="1"  
  38.       android:gravity="center"  
  39.       android:padding="15dip"  
  40.       android:text="Home"  
  41.       android:textColor="#ffffff" />  
  42.   <TextView  
  43.       android:id="@+id/reset_btn"  
  44.       android:layout_width="fill_parent"  
  45.       android:layout_height="wrap_content"  
  46.       android:layout_weight="1"  
  47.       android:gravity="center"  
  48.       android:padding="15dip"  
  49.       android:text="Reset"  
  50.       android:textColor="#ffffff" />  
  51.    </LinearLayout>  
  52.    <TextView  
  53.        android:id="@+id/result_txtview"  
  54.        android:layout_width="fill_parent"  
  55.        android:layout_height="match_parent"  
  56.        android:text=" " />  
  57. </LinearLayout> 
Step 3
 
Now Open the "MainAcivity.java" file and update it with your logic.
  1. package com.example.linearlayout;  
  2. import android.R.string;  
  3. import android.app.Activity;  
  4. import android.app.backup.RestoreObserver;  
  5. import android.os.Bundle;  
  6. import android.view.Menu;  
  7. import android.view.View;  
  8. import android.view.View.OnClickListener;  
  9. import android.widget.Button;  
  10. import android.widget.TextView;  
  11. public class MainActivity extends Activity {  
  12.       Button home_btn,entr_btn,rst_btn;  
  13.       TextView tv1,tv2,rslt_tv;  
  14.       String tv,s1,s2;  
  15.       @Override  
  16.       protected void onCreate(Bundle savedInstanceState) {  
  17.             super.onCreate(savedInstanceState);  
  18.             setContentView(R.layout.activity_main);  
  19.             tv1=(TextView) findViewById(R.id.edittext1);  
  20.             tv2=(TextView) findViewById(R.id.edittex2);  
  21.             entr_btn=(Button) findViewById(R.id.enter_btn);  
  22.             home_btn=(Button) findViewById(R.id.home_btn);  
  23.             rst_btn=(Button) findViewById(R.id.reset_btn);  
  24.             rslt_tv=(TextView) findViewById(R.id.result_txtview);  
  25.             entr_btn.setOnClickListener(new OnClickListener() {  
  26.                  @Override  
  27.                   public void onClick(View v) {  
  28.                         // TODO Auto-generated method stub  
  29.                         s1= tv1.getText().toString();  
  30.                         s2=tv2.getText().toString();  
  31.                         rslt_tv.setText(s1+s2);  
  32.                   }  
  33.             });  
  34.       }  
  35.        @Override  
  36.       public boolean onCreateOptionsMenu(Menu menu) {  
  37.             // Inflate the menu; this adds items to the action bar if it is present.  
  38.             getMenuInflater().inflate(R.menu.activity_main, menu);  
  39.             return true;  
  40.       }  
  41.    
  42. } 
Step 4
 
Open the "strings.xml" file and update it as given below.
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <string name="app_name">LinearLayout</string>  
  4.     <string name="hello_world">Hello world!</string>  
  5.     <string name="menu_settings">Settings</string>  
  6.     <string name="email"></string>  
  7.     <string name="button"></string>  
  8.    
  9. </resources> 
Step 5
 
Output
 
In the output you will see in the Outer Linear Layout I defined a vertical text view, two edit texts, one button and one inner Linear Layout with two horizontal buttons inside it.
 
LinearLayout_output.jpg


Similar Articles