Android RelativeLayout Tutorial with Example kotlin

Android RelativeLayout provides flexibility to arrange a child views relatively to each other. 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 term 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

android:id

This is the ID which uniquely identifies the layout.

android:layout_above

android RelativeLayout layout_above

TextView is above the Button widget.

android:layout_alignBottom

android RelativeLayou layout_alignBottom

The button is aligned Bottom of Textview widget.

android:layout_alignRight

android RelativeLayout layout_alignRight

The bottom is aligned Right of Textview widget.

android:layout_alignLeft

android RelativeLayout layout_alignLeft

Textview is aligned Left of Button widget.

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

Step 3. setContentView res layout file in “MainActivity.kt”

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.