Difference in between LinearLayout and RelativeLayout

Difference in between LinearLayout and RelativeLayout
November 30, 2019 No Comments Development Pushpendra Kumar

Hi, Thanks for visiting to the tutorial. If you are looking for what is Difference in between LinearLayout and RelativeLayout. Then you on the right page. Here I have explain difference with the example. I have publish an video regarding how to create an attractive splash screen in android. So go through with the video link and tutorial link on website.

What is the difference in between LinearLayout and RelativeLayout and it’s property.

Here I am going to explain with the help of a basic example. And If you are a android developer then you must know about the difference in between LinearLayout and RelativeLayout. Because this is the head of all the application which is exist into the play store.

What is RelativeLayout and it’s property

A relative layout displays its views relative to one another, so order is not that important. You can define the top most view at the end of the layout and provide details to show it on top left. Here are some points which will help you to understand about RelativeLayout.

  1. Position relative to screen: You can align a view relative to screen using alignParentTop, centerHorizontal etc.
  2. Position relative to other views: You can align a view relative to another view using above, below, toLeftOf etc.
  3. Margins: You can provide margins using marginTop, marginLeft etc.

Below is the example of RelativLayout

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:id="@+id/view1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@android:color/black" />

        <View
            android:id="@+id/view2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_below="@id/view1"
            android:layout_toEndOf="@id/view1"
            android:layout_toRightOf="@id/view1"
            android:background="@android:color/white" />

        <View
            android:id="@+id/view3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_below="@id/view2"
            android:layout_toRightOf="@id/view2"
            android:background="@android:color/holo_red_dark" />

        <View
            android:id="@+id/view4"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_below="@id/view3"
            android:layout_toEndOf="@id/view3"
            android:layout_toRightOf="@id/view3"
            android:background="@android:color/black" />

    </RelativeLayout>

Above is the relativeLayout code. You can easily can understand. 

What is LinearLayout and it’s property

A linear layout displays its views continue one after one, either vertically or horizontally. You need to specify orientation to define whether layout is vertical or horizontal.

  1. Weight: It specifies how much space each view spans relative to others. For example, in an e-mail application, you can give less weight to ‘To’ and ‘Subject’, and more weight to ‘Message’.
  2. Gravity: It defines placement of a view’s contents.
  3. Layout Gravity: It defines the placement of the view itself.

Below is the example of LinearLayout

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:orientation="horizontal">

        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@android:color/white" />

        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_weight="2"
            android:background="@android:color/holo_red_dark" />

        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@android:color/black" />

        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@android:color/holo_green_dark" />

    </LinearLayout>

Now I will show you the complete example of relative and linear layout.

<?xml version="1.0" encoding="utf-8"?>
<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:background="#724A1E"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <View
            android:id="@+id/view1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@android:color/black" />

        <View
            android:id="@+id/view2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_below="@id/view1"
            android:layout_toEndOf="@id/view1"
            android:layout_toRightOf="@id/view1"
            android:background="@android:color/white" />

        <View
            android:id="@+id/view3"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_below="@id/view2"
            android:layout_toRightOf="@id/view2"
            android:background="@android:color/holo_red_dark" />

        <View
            android:id="@+id/view4"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_below="@id/view3"
            android:layout_toEndOf="@id/view3"
            android:layout_toRightOf="@id/view3"
            android:background="@android:color/black" />

    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:orientation="horizontal">

        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@android:color/white" />

        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@android:color/holo_red_dark" />

        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@android:color/black" />

        <View
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_marginStart="10dp"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:background="@android:color/holo_green_dark" />

    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@android:color/holo_red_dark" />

        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@android:color/black" />

        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@android:color/white" />

        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@android:color/black" />

        <View
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@android:color/holo_red_dark" />

    </LinearLayout>

</LinearLayout>

Below I am sharing the output image. 

Difference in between LinerLayout and RelativeLayout
Difference in between LinearLayout and RelativeLayout

In Conclusion, I hope you are pretty much clear about the difference. If you have any query regarding android development then you can put into comment box. I wish you all the best for your future.

Tags
About The Author
Pushpendra Kumar I am passionate about mobile application development and professional developer at Colour Moon Technologies Pvt Ltd (www.thecolourmoon.com). This website I have made so that I can meet with new challenges and can share here.

Leave a reply

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