Android Layouts — Relative/Linear/Frame

Welcome, here we are going to understand about three types of the layout which we will require as a container while creating UI and we also going to develop a mindorks screen.

As we read about View in the previous article, we have components like button, text, image etc. but when we need to put more elements on a single screen how can we arrange them!! Here we require some top(parent) level item which is going to contain all these items as a group of views.

Relative Layout

Relative means concerning another, or we can understand this as a relative to one another. In this layout, all the components arranged concerning each other.

For example — a Button, on the screen, and now we need to put the TextView below the button, this is how we will set the relation for text to go below the button:

<?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">
    
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me!!" />
   <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button2"
        android:text="MindOrks" />
</RelativeLayout>

Linear Layout

Linear means in a line, either horizontal or vertical. We can understand here as all the elements inside the linear layout get arranged linearly, one after the other.

For example — a Button is there on the screen, and now I need to put text below the button, we need to define the orientation of the linear layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MindOrks" />
</LinearLayout>

Frame Layout

Frame Layout is one of the layouts which helps us to create the more complex design easily. When we require to create a design where the components are on top of each other, we use the frame layout.

To define which component will be on top, we put it in the end just like we need TextView here to be on top of ImageView, so we put it in the end.

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/mindorkslogo"
        android:text="Button" />
    
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="MindOrks" />
</FrameLayout>

Now, we are going to create the following screen using Relative and Linear layout.

Some common points before we start with the development:

  1. Whenever we are going to use any image in our project, there is a naming rule for it -> lowercase a-z, 0–9, underscore
  2. There is a proper naming convention followed by all the Android Developers on how to name your variable, classes, methods. This is not the same for everyone, but it is something which makes things more understandable and easy to read.

Now, we are going to create the following screen using all the three layouts one by one:

Firstly, we are using LinearLayout

  1. To put the image in your project, download the image from here.
  2. Copy and Paste the image into the Drawable folder of your project and give its name according to the naming rules given above
  3. Let’s put 1 ImageView, Button and TextView on the screen. You can drag the items from the palette, or you can try writing the code in the text section.
  4. Here, the parent view group we are using is LinerLayout which requires to define orientation. Try giving it “vertical” or “horizontal”.
  5. Give your text to the TextView and also text to the Button.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
<ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:srcCompat="@drawable/logo" />
<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MindOrks" />
<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="MindOrks" />
</LinearLayout>

Now, we are using RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context=".MainActivity">
<ImageView
        android:id="@+id/ivLogo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:srcCompat="@drawable/logo" />
<Button
        android:id="@+id/btnMindorks"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="MindOrks"
        android:layout_below="@id/ivLogo"/>
<TextView
        android:id="@+id/tvMindorks"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="MindOrks" 
        android:gravity="center"
        android:layout_below="@id/btnMindorks"/>
</RelativeLayout>

Lastly, we are going to use FrameLayout:

we are changing the design a bit here to show how frame layout can use to set view on one other. We are going to develope this screen:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
<ImageView
        android:id="@+id/ivLogo"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"
        app:srcCompat="@drawable/logo" />
<TextView
        android:id="@+id/tvMindorks"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="MindOrks" />
</FrameLayout>

Awesome!! You had tried all the three main layouts. Now it's time to practice some design by yourself and share with us on twitter or in our slack channel.

In the next chapter, we are going to learn about latest Constraints layout.