Android Linear Layout Example

person folder_openAndroidaccess_time March 23, 2015

LinearLayout is one of the basic layouts in Android. We are going to learn how to use various orientations of LinearLayout.
See flowing Steps :

  1. Create layout files to demonstrate different orientations of linear layout.

1. Manifest file

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.stackandroid.linearlayout"
    android:versionCode="1"
    android:versionName="1.0" >
    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="19" />
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="VerticalLayoutActivity"
            android:label="@string/app_name" android:parentActivityName="com.stackandroid.linearlayout.MainActivity">
          </activity>
          <activity
            android:name="HorizontalLayoutActivity"
            android:label="@string/app_name" android:parentActivityName="com.stackandroid.linearlayout.MainActivity">
          </activity>
          <activity
            android:name="VerticalHorizontalActivity"
            android:label="@string/app_name" android:parentActivityName="com.stackandroid.linearlayout.MainActivity">
          </activity>
    </application>
</manifest>

2. Activity layout file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="30dp"
    android:orientation="vertical" >
    <Button
        android:id="@+id/horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="horizontalLayout"
        android:paddingTop="10dp"
        android:text="LinearLayout Horizontal" />
    <Button
        android:id="@+id/vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="verticalLayout"
        android:paddingTop="10dp"
        android:text="LinearLayout Vertical" />
    <Button
        android:id="@+id/both"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:onClick="bothLayout"
        android:paddingTop="10dp"
        android:text="Vertical and Horizontal" />
</LinearLayout>

3. Main Activity code

package com.stackandroid.linearlayout;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
public class MainActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}
	public void horizontalLayout(View v){
		Intent horizontalIntent=new Intent(this,HorizontalLayoutActivity.class);
		startActivity(horizontalIntent);
	}
	public void verticalLayout(View v){
		Intent verticalIntent=new Intent(this,VerticalLayoutActivity.class);
		startActivity(verticalIntent);
	}
	public void bothLayout(View v){
		Intent bothIntent=new Intent(this,VerticalHorizontalActivity.class);
		startActivity(bothIntent);
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}
}

4. LinearLayout with Horizontal Orientation

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="30dp"
    android:orientation="horizontal"
    android:weightSum="3" >
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingLeft="10dp"
        android:paddingTop="10dp"
        android:text="Button 1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingLeft="10dp"
        android:paddingTop="10dp"
        android:text="Button 2" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingLeft="10dp"
        android:paddingTop="10dp"
        android:text="Button 3" />
</LinearLayout>

Now create a new activity named HorizontalLayoutActivity.java and set the content view to display the above layout xml file.

package com.stackandroid.linearlayout;
import android.app.Activity;
import android.os.Bundle;
public class HorizontalLayoutActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.linear_horizontal);
		getActionBar().setDisplayHomeAsUpEnabled(true);
	}
}

5. LinearLayout with Vertical Orientation

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="30dp"
    android:orientation="vertical" >
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingLeft="10dp"
        android:paddingTop="10dp"
        android:text="Button 1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingLeft="10dp"
        android:paddingTop="10dp"
        android:text="Button 2" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingLeft="10dp"
        android:paddingTop="10dp"
        android:text="Button 3" />
</LinearLayout>

Now create a new activity named VerticalLayoutActivity.java and set the content view to display the above layout xml file.

package com.stackandroid.linearlayout;
import android.app.Activity;
import android.os.Bundle;
public class VerticalLayoutActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.linear_vertical);
		getActionBar().setDisplayHomeAsUpEnabled(true);
	}
}

6. Combining both Horizontal and Vertical Orientations

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center"
    android:orientation="vertical" >
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingLeft="10dp"
        android:paddingTop="20dp"
        android:text="LOGIN" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="20dp" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingTop="20dp"
            android:text="Username" />
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="40dp"
            android:layout_weight="0.50"
            android:hint="Enter Username"
            android:paddingTop="20dp" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="20dp" >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingTop="20dp"
            android:text="Password" />
        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginLeft="40dp"
            android:layout_weight="0.50"
            android:hint="Enter Password"
            android:paddingTop="20dp" />
    </LinearLayout>
    <Spinner
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingBottom="20dp"
        android:paddingTop="20dp" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingLeft="20dp"
        android:text="Click" />
</LinearLayout>

Now create a new activity named VerticalHorizontalActivity.java and set the content view to display the above layout xml file.

package com.stackandroid.linearlayout;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
public class VerticalHorizontalActivity extends Activity{
	Spinner spinner;
	String[] celebrities = {
			"Chris Hemsworth",
			"Jennifer Lawrence",
			"Jessica Alba",
			"Brad Pitt",
			"Tom Cruise",
			"Johnny Depp",
			"Megan Fox",
			"Paul Walker",
			"Vin Diesel"
	};
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		setContentView(R.layout.vertical_horizontal);
		spinner = (Spinner)findViewById(R.id.spinner);
		ArrayAdapter<String> adapter = new ArrayAdapter<String>(
				this, android.R.layout.simple_spinner_item, celebrities);
		spinner.setAdapter(adapter);
		getActionBar().setDisplayHomeAsUpEnabled(true);
	}
}

7. Demonstration
Linear with Vertical Orientation

Linear Layout
Linear Layout

Linear with Horizontal Orientation

Linear Horizontal
Linear Horizontal

Combining both orientations in single layout

Vertical and Horizontal
Vertical and Horizontal

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">