Skip to content

Android RelativeLayout Tutorial with Example kotlin

  • by

Android RelativeLayout provides flexibility to arrange a child’s views relative to each other. This means you can align child view left, right, below, and above to relative another view or parent layout. RelativeLayout is a very important component in terms of the design user interface in an android app. Because it can eliminate nested views and groups. It’s Keep Layout Hierarchy flat, which helps to improve the performance of the android app.

You can find using several nested LinearLayout groups used but maybe you are able to replace them with a single RelativeLayout.

Android RelativeLayout Tutorial with Example kotlin

In this tutorial, we learn how to arrange / position ButtonTextView and EditText via “RelativeLayout“.

Positioning Views in Android RelativeLayout:

We are covering some main (basic) attributes (alignment and positioning of widgets) of Relative Layout with arranging the views and widget in User Interface.

android:layout_alignParent<….> & layout_centerVertical & layout_centerHorizontal

How to arrange widget or element of app UI Bottom, Left, Top and Right.

android RelativeLayout app UI Bottom , Left , Top and Right

Here is code for UI design

<?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="5dp">


    <Button
        android:id="@+id/btn_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Top" />

    <Button
        android:id="@+id/btn_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:text="Left" />

    <Button
        android:id="@+id/btn_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:text="Right" />

    <Button
        android:id="@+id/btn_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Bottom" />
</RelativeLayout>
android:id

This is the ID which uniquely identifies the layout.

android:id="@+id/btn_bottom"
android:layout_above
android RelativeLayout layout_above

TextView is above the Button widget.

<?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="5dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_above="@+id/button"
        android:textSize="18sp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:text="Button"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"/>
</RelativeLayout>
android:layout_alignBottom
android RelativeLayou layout_alignBottom

The button is aligned Bottom of Textview widget.

<?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="5dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:layout_alignParentTop="true"
        android:textSize="18sp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="40dp"
        android:text="Button"
        android:layout_below="@id/textView"
        android:layout_marginBottom="10dp"/>
</RelativeLayout>
android:layout_alignRight
android RelativeLayout layout_alignRight

The bottom is aligned Right of Textview widget.

<?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="5dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="TextView"
        android:textSize="18sp"
        android:padding="10dp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_toRightOf="@id/textView"
        android:text="Button" />
</RelativeLayout>
android:layout_alignLeft
android RelativeLayout layout_alignLeft

Textview is aligned Left of Button widget.

<?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="5dp">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/button"
        android:text="TextView"
        android:textSize="18sp"
        android:padding="10dp"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_alignParentRight="true"
        android:text="Button" />
</RelativeLayout>

This is a basic and important attributes of RelativeLayout.

You can learn more attribute of Relative Layout in an android official document: https://developer.android.com/reference/android/widget/RelativeLayout.

Complete Example of Android RelativeLayout :

let’s build a complete one simple example, which includes the basic attribute. You can compare the flat view Hierarchy of RelativeLayout with Android LinearLayout.

Step 1. Create a new project “Build Your First Android App in Kotlin
Step 2. Now add the following code in the activity_main.xml resource file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/tv_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Login"
        android:textSize="18sp"
        android:layout_margin="8dp"/>

    <EditText
        android:id="@+id/et_id"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_below="@+id/tv_label"
        android:ems="10"
        android:hint="Enter Id"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/et_pass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_id"
        android:layout_margin="8dp"
        android:ems="10"
        android:hint="Enter password"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/btn_login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_pass"
        android:layout_margin="8dp"
        android:text="Login" />

    <Button
        android:id="@+id/btn_reg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/et_pass"
        android:layout_margin="8dp"
        android:layout_toRightOf="@+id/btn_login"
        android:text="Register" />

</RelativeLayout>
Step 3. setContentView res layout file in “MainActivity.kt”
package `in`.eyehunt.androidrelativelayout

import android.support.v7.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}
Step 4. Run the application, in an emulator or On your android device

Output screenshot Android Relative Layout example :

android RelativeLayout app exmaple output

Download source code Android Relative layout in kotlin

https://github.com/EyeHunts/AndroidRelativeLayout

Note : This example (Project) is developed in Android Studio 3.1.3 . Tested on Android 9 ( Android-P), compile SDK version API 26: Android 8.0 (Oreo)

MinSdkVersion=”15″

TargetSdkVersion=”27″

Coding in Kotlin

Leave a Reply

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