Android RelativeLayout

RelativeLayout

RelativeLayout displays child elements in relative positions.

Each element’s position is specified relative to sibling elements parent RelativeLayout area.
 
This layout was automatically included in our Hello World App that we created in this article :

Android Hello World App to accept user input
 
In this app, we added an EditText and a Button in addition to the greeting message TextView.

Here is how the App looked like :

 
Here is the layout xml code from that :

<?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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.topjavatutorial.helloworldapp.HelloActivity"
    tools:showIn="@layout/activity_hello">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:id="@+id/textView" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text="Enter Name"
        android:ems="10"
        android:id="@+id/editText"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="57dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:id="@+id/button"
        android:layout_below="@+id/editText"
        android:layout_toRightOf="@+id/textView"
        android:layout_toEndOf="@+id/textView"
        android:layout_marginTop="104dp"
        android:onClick="doSomething" />
</RelativeLayout>

 
The TextView block displays the text “Hello John Doe”.

The EditText(Enter Name) element below it has this line of code :

android:layout_below="@+id/textView"

What this is saying is place me below the widget with the id of textView.
 
Similarly, The Button element has this line of code :

android:layout_below="@+id/editText"

This means the Button will be placed below the widget with id editText.

Similarly, other layout properties like layout_centerHorizontal, layout_toRightOf, layout_toEndOf and layout_marginTop are defined for the widgets.
 
This approach defines relative positions of elements compared to siblings or parent view.

This method of describing where the contents of a layout go is for RelativeLayout only.
 

Reference :

All of the RelativeLayout properties can be referred here :

https://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html
 

© 2016, https:. All rights reserved. On republishing this post, you must provide link to original post