Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to work with Linear Layouts in Android

In this article we will see how linear layout works and will point out some of its attributes and show you how to use them.

Layouts you say?

There are several layouts that can be used when designing your android application. Layouts are used to organise things on your screen like organising your buttons and images etc. Essentially they are there to help you organise where things will go and where they will be displayed on your application. Linear layout, relative layout, table layout, absolute layout etc. are all types of layouts used in android development. When you first set up any project you will notice that the layout is LinearLayout in your main.xml file:

Listing 1: main.xml

<?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:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

</LinearLayout>

For more information on this specific layout check out http://developer.android.com/reference/android/widget/LinearLayout.html. Basically Linear layout is the simplest and most common layout used in android development. Notice above the orientation is set to vertical. Orientation can be set to horizontal or vertical.

In this tutorial

For this tutorial I will show you how linear layout works and will point out some of its attributes and show you how to use them.

Orientation

Ok let’s experiment with the orientation attribute:

Step 1:

Create a new Android Project in Eclipse and name it Application6. Name the main activity ApplicationActivity6. (Note I’m using build target 2.3.3 to run my app on)

Step 2:

Copy and paste this code into your string.xml file:

Listing 2: string.xml code

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Application6 - Linear Layout</string>

</resources>

Step 3:

Copy and paste this code into your Application6Activity (i.e. your main activity). Remember not to copy over your package name at the top of your file.

Listing 4: Application6Activity

import android.app.Activity;
import android.os.Bundle;

public class Application6Activity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Step4:

Copy and paste this code into your main.xml file:

Listing 5: main.xml updated

<?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" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_weight=".20"
        android:background="#FFFFFF" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_weight=".20"
        android:background="#A49D9D" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_weight=".20" 
        android:background="#FFFFFF"/>

    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_weight=".20"
        android:background="#A49D9D" />
    <ImageView
        android:id="@+id/imageView4"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_launcher"
        android:layout_weight=".20"
        android:background="#FFFFFF" />

</LinearLayout>

Here I use LinearLayout and assigned it’s width and height to fill_parent and assign the orientation to vertical. I have 5 ImageViews, all of which I have set the width to fill_parent and height to wrap_content. Each drawable for each image is set to the ic_launcer image (there automatically once project is created) in the drawable folder. Each alternating image, the background is set to white and grey. Finally notice the weight attribute. Here I have set each image to .20. The idea being I want each image to take up the same amount of space on the screen. The weight should total 1. So if we divide 1 by 5, we get .20. All in all when dealing with weighting, you can assign different things different weights but they must add up to 1.

You’ll end up with this in the Graphical Layout of your main.xml file :

LinearLayout with vertical orientation and weighted ImageViews

Figure 1: LinearLayout with vertical orientation and weighted ImageViews.

Step5:

Modify the main.xml file so that the orientation is set to horizontal as seen below:

Listing 6: Updating 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="horizontal;" >

You’ll end up with this in the Graphical Layout of your main.xml file :

LinearLayout with horizontal orientation and weighted ImageViews

Figure 2: LinearLayout with horizontal orientation and weighted ImageViews.

Step6:

Change the image height attributes to fill parent: android:layout_height="fill_parent". You’ll get this:

Above with height attributes modified to fill_parent

Figure 3: Above with height attributes modified to fill_parent.

Attributes

Now we’ll have a look at adjusting the width and height, using layout_marginTop, layout_marginBottom, layout_marginLeft, layout_marginTop , gravity and the layout_gravity attributes.

Step 1:

Replace your existing main.xml file code by copying and pasting this code into your main.xml file:

Listing 7: main.xml file updated

<?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" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="100dp"
        android:src="@drawable/ic_launcher"
        android:background="#FFFFFF"
        android:layout_marginTop = "40dp"
        android:layout_marginLeft = "40dp" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFFFFF"
        android:layout_gravity = "left"
        android:text="Layout Left"
        android:textSize="24sp"
        android:background="#FA3807" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFFFFF"
        android:layout_gravity = "center"
        android:text="Layout Centered"
        android:textSize="24sp"
        android:background="#FA3807" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#FFFFFF"
        android:layout_gravity = "right"
        android:text="Layout Right"
        android:textSize="24sp"
        android:background="#FA3807" />
    
    <TextView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:textColor="#FFFFFF"
        android:text="Text Gravity Left"
        android:textSize="24sp"
        android:background="#0A29DB" 
        />
    
    <TextView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="#FFFFFF"
        android:text="Text Gravity Centered"
        android:textSize="24sp"
        android:background="#4B5CBA" />
    
    <TextView
        android:layout_width="300dp"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:textColor="#FFFFFF"
        android:text="Text Gravity Right"
        android:textSize="24sp"
        android:background="#273064" />   
    
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginRight="40dp"
        android:layout_marginBottom="40dp"
        android:background="#A49D9D"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

You’ll now end up with this in the Graphical Layout of your main.xml file :

Experimenting with layout attributes

Figure 4: Experimenting with layout attributes.

Things to note:

Notice the first image view has a white background (see code below) and layout position is set to:

  android:background="#FFFFFF"
        android:layout_marginTop = "40dp"
        android:layout_marginLeft = "40dp" 

Hence the gaps on top and to the left of the imageView1.

The second image (imageView2) is set to:

android:layout_marginRight="40dp"
        android:layout_marginBottom="40dp"

And its background set to:

android:background="#A49D9D"

Hence it’s 40dp (dp: Density-independent Pixels - an abstract unit that is based on the physical density of the screen.)from the bottom of the screen and 40dp from the right of the screen.

Now take a look at the TextViews in between the ImageViews. Notice the different layouts assigned to the first 3 TextViews and the different gravities assigned to the second 3 TextViews. The different layout positions are achieved like so:

android:layout_gravity = "left"
android:layout_gravity = "center"
android:layout_gravity = "right"

The different layout gravities are achieved like so:

android:gravity="left"
android:gravity="center"
android:gravity="right"

Conclusion

After following this tutorial you should have a good idea of how the linear layout is used and how to set the attributes etc. I hope you enjoyed this tutorial. See you later, Steve



Has designed and developed several android applications from scratch which are available on Google Play.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login