Wednesday, 21 August 2013

Android Linear Layout

 In Android,Linear Layout is a most widely used layout that arranges “elements” in vertical or horizontal order, via "android:orientation" attribute. 

Basically Android allows you to create  a view layouts using simple XML file (And also provide a another way to create a layout using Java code). Always put your layout in /res/layout folder.                                                                                 

See graphical view of layout in project directory:

   

Linear Layout(Vertical View):                                                       

Create a new project File -> New -> Android Application Project.Now go to “res/layout/linear_layout.xml” file,here i am adding two buttons within LinearLayout,with vertical orientation.  

We set the orientation in XML file like this:

<LinearLayout android:orientation="vertical"> ...... </LinearLayout>

 Now open newly created XML file that is linear_layout.xml and type the following code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginTop="150dp"
    android:layout_marginLeft="70dp"
    android:orientation="vertical" >

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

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

Now setting the initial view of our application, Go to LayoutsActivity.java file. You would see the following line inside the onCreate function setContentView(R.layout.main). Change R.layout.main to R.layout.yourxmlfilename. In my case it is R.layout.linear_layout.xml

package com.example.layouts;
import android.app.Activity;
import android.os.Bundle;
 
 public class LayoutsActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.linear_layout);
    }
}

Finally we are going to run the application, right click on the project -> Run As -> Android Application. You should see such type of view in the your device.                       

Output:-

 

Linear Layout(Horizontal View): 

  In horizontal view all elements will be in horizontal fashion,Lets take the same XML file that we have taken in vertical view as mentioned above.

Only making few change here in  android orientation:

<LinearLayout android:orientation="horizontal"> ..... </LinearLayout>

Remaining part of XML will be unchanged,your xml file will be look like this:  

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_marginTop="150dp"
    android:layout_marginLeft="70dp"
    android:orientation="horizontal" >        <!-- orientation will change here -->

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

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


Output:-



 

 

     

Please Share this tutorial On:

4 comments:

  1. Thank you for this step-by-step guide. The way you explained changing from R.layout.main to R.layout.linear_layout is a simple but critical detail. Linear Layout is indeed the most widely used layout, and mastering android:orientation is the first step toward building more complex UIs with nested layouts. For mobile developers in Bangalore who want to add data analytics to their skill set for better app performance tracking, I've been researching data analytics with sql training electronic city to learn how to query user session data and crash logs. Understanding how different layouts affect user engagement metrics can inform better design decisions. Has anyone here used Firebase Analytics to compare user behavior across vertical vs. horizontal layout designs?

    ReplyDelete