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 use Relative Layout in Android

In this article we will see how relative layout works in Android devices.

Relative Layout? What’s this then?

Put simply relative layout organises items on the screen relative to something else. Like linear layout, relative layout is commonly used by android developers. I myself do like this layout and have used in the development of my applications before. See http://developer.android.com/reference/android/widget/RelativeLayout.html and http://developer.android.com/guide/topics/ui/layout/relative.html for more information on relative layouts.

In this tutorial

In this tutorial I will give you some examples of how relative layout works. Feel free to experiment with the code to get an idea of what relative layout is all about. Ok here we go.

Step 1:

Create a new Android Project in Eclipse and name it Application7. Name the main activity ApplicationActivity7. (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 1: string.xml file

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

    <string name="title"><b><u>Relative Layout</u></b></string>
    <string name="app_name">Application7</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 2: Application6Activity

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

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

Step4:

Ok I will have an ImageView onscreen and I’d like a button below it to the left and also a button below it to the right. We achieve this like so: Copy and paste this code into your main.xml file:

Listing 3: main.xml file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/textView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/title"
        android:gravity="center"
        android:textSize="24sp" />

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:layout_below="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:src="@drawable/ic_launcher" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:layout_marginTop="37dp"
        android:layout_toLeftOf="@+id/imageView1"
        android:text="Below and to left of Image" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button1"
        android:layout_toRightOf="@+id/imageView1"
        android:text="Below Image, right of button1" />

</RelativeLayout>

Notice in our button1 attributes we have:

  android:layout_below="@+id/imageView1"        
        android:layout_toLeftOf="@+id/imageView1"

And in our button2 attributes we have:

android:layout_alignBottom="@+id/button1"
        android:layout_toRightOf="@+id/imageView1"

When you have the code pasted in you will get this when the application is run:

Relative Layout at work

Figure 1: Relative Layout at work.

Right now you have an idea. Let’s have some fun to showcase what we can do.

Experimenting with the attributes a bit further:

Step 1:

We are going to modify the existing project so first we will copy and paste this code into your string.xml file:

Listing 4: Updating string.xml file

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

    <string name="app_name">Application7 - Relative Layout</string>

</resources>

Step 2:

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

Listing 5: Application7Activity

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

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

Step3:

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

Listing 6: Updating main.xml file

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FFFFFF"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="#A49D9D"
        android:src="@drawable/ic_launcher" />

    <ImageView
        android:id="@+id/imageView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="#0A2BE9"
        android:src="@drawable/ic_launcher" />
    
    <ImageView
         android:id="@+id/imageView4"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentLeft="true"
         android:layout_below="@+id/imageView1"
         android:background="#F90A0A"
         android:src="@drawable/ic_launcher"
         android:layout_margin="10dp" />
        
    <ImageView
        android:id="@+id/imageView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="92dp"
        android:background="#F9F939"
        android:src="@drawable/ic_launcher"
        android:layout_toLeftOf ="@+id/imageView6"
        android:layout_centerInParent="true"
        android:padding="15dp" />

    <ImageView
        android:id="@+id/imageView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#54F71D"
        android:src="@drawable/ic_launcher"
        android:layout_centerInParent="true"
        android:padding="15dp"
        android:layout_margin="10dp" />
    
    <ImageView
        android:id="@+id/imageView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#1DF7AB"
        android:src="@drawable/ic_launcher"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@+id/imageView6"
        android:padding="15dp" />
    
     <ImageView
        android:id="@+id/imageView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#F87A13"
        android:src="@drawable/ic_launcher"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/imageView9"
        android:padding="15dp"
        android:layout_margin="10dp" />
     
     <ImageView
        android:id="@+id/imageView9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#D29146"
        android:src="@drawable/ic_launcher"
        android:layout_centerInParent="true"
        android:layout_alignParentBottom="true"
        android:padding="35dp" />
     
     <ImageView
        android:id="@+id/imageView10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#F9A69C"
        android:src="@drawable/ic_launcher"
        android:layout_alignParentBottom="true"
        android:layout_toRightOf="@+id/imageView9"
        
         />
    
</RelativeLayout>

When you have the code pasted in you will get this when the application is run:

Experimenting with Relative Layout

Figure 2: Experimenting with Relative Layout.

Examining the code

Ok now examine the code in our main.xml file as the string.xml and Application7 Activity.java are pretty straightforward. Our first image with the white background (imageView1) was not assigned any position so it remains in the top left corner of our screen as seen above. Notice I assign each image with a background android:background="#FFFFFF"(background color: white) and android:background="#A49D9D"(background color: grey) for example. ImageView2 with the grey background is assigned the attribute of android:layout_centerHorizontal="true" hence its position on the screen. ImageView3 with the blue background is assigned android:layout_alignParentRight="true" so it’s to the right of the screen. We set imageView4’s (red background) width to fill_parent so it fills the screen’s width but not totally as we also set it as having a margin of 10dp: android:layout_margin=”10dp”.

ImageViews 5 (background yellow) ,6 (background green) and 7 (background turquoise) are all set to android:layout_centerInParent="true" and are all given a padding of 15dp android:padding="15dp" therefore they are padded out and take up more space. Notice the images themselves don’t get bigger as we are adding padding not changing the image size. ImageView6 is given a margin of 10dp android:layout_margin="10dp" Notice that imageView 5 and 7 are 10dp away from imageView 6 due to this.

And finally onto imageViews 8 (background orange), 9 (background brown) and 10 (background pink). ImageView9 (brown background) is set to:

android:layout_centerInParent="true"
        android:layout_alignParentBottom="true"

ImageView8 (orange) is set to:

android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/imageView9"

ImageView10 (pink) is set to:

android:layout_alignParentBottom="true"
        android:layout_toRightOf="@+id/imageView9"

Notice imageView9 and imageView10 are not separated as neither is assigned a margin. ImageView8 on the other hand has a margin of 10dp. Also note that imageView8 and 9 are given padding attributes also. Note the difference.

Conclusion

After following this tutorial you should have a good idea of how the relative layout is used in android development. I hope you learned something from this tutorial and that you enjoyed it. Catch ye 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