Android LinearLayout vs RelativeLayout

In Android development you frequently hear about LinearLayout and RelativeLayout but still confuse what are the differents. Both are different in the way they put the children components inside them.
To give you example about this, let's try to make a login page like in the picture below. Because this login page has many components such as EditText and Button ,  these components can be put inside both LinearLayout and RelativeLayout. Only the technique they use in ordering its components is different between LinearLayout and RelativeLayout.

1. Now let's make that login page using LinearLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" 
    android:layout_width="match_parent"
    android:padding="12dp"
    android:layout_height="match_parent">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login"/>

</LinearLayout>

2. Now let's make that login page using RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="12dp">

    <EditText
        android:id="@+id/editEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email"/>
    <EditText
        android:id="@+id/editPassword"
        android:layout_below="@+id/editEmail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"/>
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editPassword"
        android:text="Login"/>

</RelativeLayout>

We can see that in LinearLayout we don't need to specify explicitly that password' EditText should be put below Email's EditText because we have set the orientation as vertical so each component will be put below previous component. But in RelativeLayout we should explicitly tell the password' EditText to be put below Email's EditText by using xml code android:layout_below="@+id/editEmail", if we don't use this xml code the password' EditText will be put on top overlap the Email's EditText. RelativeLayout is more efficient to be used rather than LinearLayout that consumes a lot of performance. But LinearLayout has some advantages in some cases, for example if you need to divide or split a screen in two equally you can use easily with LinearLayout rather than RelativeLayout. For example if you need to make two buttons with equal size that will fill the entire screen horizontally like in the picture below.

Use LinearLayout like this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Login"
        android:layout_weight="1"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Signup"
        android:layout_weight="1"/>


</LinearLayout>

After you run the app, try to rotate your android phone from portrait to landscape. In landscape orientation, the two buttons still in equal size and fill the entire screen horizontally. This is not easy if you use RelativeLayout rather than LinearLayout.

Thank you for visiting our website. Just comment below if you have any question to ask.