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.
In this tutorial, we learn how to arrange / position Button, TextView 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.
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
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
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
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
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 :
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