Linear Layout Tutorial (Android UI)

Android Layout is the architecture for the user interface in an Activity. It defines the layout structure and holds all the elements that appear to the user. In this tutorial I will guide you about Linear Layout. Linear Layout arranges views in a single column or a single row. Child views can be arranged either vertically or horizontally.

To understand how Linear layout works, you need to create a layout XML file or you can also place layout code in main.xml file. Please see the following layout code (consider this code is written in main.xml file).

<?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:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Linear Layout - AndroidAspect.com" />
 </LinearLayout>

In above code we define a Linear layout & place a TextView on it. The <LinearLayout> XML element is the root element to define the Linear layout & <TextView> XML element defines the TextView. To see the the output of above code you need to call the above layout in your activity. eg.

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
}

As we know that the setContentView() method loads the android UI from xml layout file. In setContentView() method we need to pass a parameter like- 'R.layout.main' . Please note that all the XML layouts stored in layout folder (res/layout). Consider that we create an another XML layout 'hello.xml' then we can call this layout using setContentView(R.layour.hello) method.

Here is the output of above layout code-

LinearLayout



When dealing with Linear layout there are following properties/attributes that we can deal with:
  •  Orientation
  •  Fill model
  •  Weight
  •  Gravity
  •  padding

Orientation

Orientation property determines whether the controls would be put in a horizontal way like in a row or in a vertical way like a column. The layout orientation is set by the property android:orientation

Vertical Orientation
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_height="fill_parent"
              android:layout_width="fill_parent"
              android:orientation="vertical">
   
    <textview android:layout_height="wrap_content"
                  android:layout_width="fill_parent"
                  android:text="Linear Layout"/>
    <button
           android:layout_height="wrap_content"
           android:layout_width="fill_parent"
           android:text="this is a button 1"
    />
   
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="this is a button 2"
        
        />
</LinearLayout>

LinearLayout Vertical Orientation

Horizontal Orientation
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_height="fill_parent"
              android:layout_width="fill_parent"
              android:orientation="horizontal">
   
    <textview android:layout_height="wrap_content"
                  android:layout_width="fill_parent"
                  android:text="Linear Layout">
    <button
           android:layout_height="wrap_content"
           android:layout_width="fill_parent"
           android:text="this is a button 1"
    />
   
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="this is a button 2"
        
        />
   
    </textview></linearlayout>

LinearLayout Horizontal Orientation

Fill Model

The widgets inside linear layout have width and height properties. These properties can have three values:
  1. A numeric value in pixels or inches that gives the width or height properties an absolute value.
  2. They can have the value wrap_content meaning the widget should occupy it’s natural size unless there is no space then android can use word wrap to make the widget fit.
  3. They can have the value fill_parent meaning the widget should occupy all the available space of the closing container.
The following is an example to two buttons one with width set to fill_parent and the other set to wrap_content

LinearLayout Fill Model


Weight

The weight property determines the ratio by which controls share free space. For example if we have two buttons and the weight of both is set to 1 (this is the default value) then the free space will be divided equally between them. But if the value of the weight of one of them is 2 and the other is one, then the first button will occupy space half as that occupied by the second and so on.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/mlayout"
              android:layout_height="fill_parent"
              android:layout_width="fill_parent"
              android:orientation="vertical">
      <TextView android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:text="Linear Layout">
    <Button
            android:id="@+id/btn1"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:layout_width="fill_parent"
        android:text="weight set to 2"
     />
   
       <Button
    android:id="@+id/btn2"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:layout_width="fill_parent"
    android:text="weight set to 1"
    />
    </TextView>
 </LinearLayout>


LinearLayout Weight


Gravity

By default widget are positioned in the top-left of the screen, but if you want to change this you can use the android:layout_gravity property.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/mainlayout"
              android:layout_height="fill_parent"
              android:layout_width="fill_parent"
              android:orientation="vertical">
    <TextView android:layout_height="wrap_content"
                  android:layout_width="wrap_content"
                  android:text="Linear Layout">
    <Button
    android:layout_gravity="left"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="left"/>
    <Button
    android:layout_gravity="center"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="center"
    />
    <Button
    android:layout_gravity="center_vertical"
        android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="center_vertical"
    />
    <Button
    android:layout_gravity="center_horizontal" android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="center_horizontal"
    />
    <Button
    android:layout_gravity="right"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="right"
    />
        
    <Button
    android:layout_gravity="bottom"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:text="bottom"
    />
   
    </TextView></LinearLayout>

LinearLayout Gravity


Padding

The android:padding property sets the padding between widgets. if you specify the padding property to the container then the container with all of its widgets would be shifted by the value, if you specify it to a single widget then the contents of that widget would be shifted by the specified value.

If you use the android:padding property then this would apply the padding values to the four edges of the widget. If you need to be more specific you can use :

android:paddingTop
or
android:paddingLeft
or 
android:paddingRight
or 
 android:paddingBottom

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/malayout"
              android:layout_height="fill_parent"
              android:layout_width="fill_parent"
              android:orientation="horizontal"
              android:paddingleft="21px">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="button 1"
/>
<Button
android:id="@+id/btn"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingleft="41px"
android:text="button 2"
/>
</Linearlayout>

Padding


Thats it ! I think these examples are sufficient to understand the Linear Layout. So what you think about this tutorial please let me know by your comments. Thanks.

(Information Source Android Developer's Official Site)




3 Comments:

R-Star said...

Thanks Buddy!

Mahesh said...

thanks......

Ravindar said...

Good enough tutorial...

Post a Comment

Recent Posts

Site Stats

Our Apps

Get it on Google Play

©2012-2014 AndroidAspect - All rights reserved | Diwali Greetings | Powered by Blogger

Creative Commons License