Relative Layout Android

Relative Layout: Relative Layout is view group where arrangement

of child elements is in relative to each other or relative to the screen.

Let’s see how to define layout.

In Android Studio you can add any element just by drag n

drop or defining its xml part.

 

 <RelativeLayout

    android:layout_width="match_parent"
    android:layout_height="match_parent">

</RelativeLayout>

Every view in android should have width and height. So declared
it as android:layout_width  and android:layout_height

match_parent means it will
fill upto its parent view width.

Other used is

Wrap_content means it will wrap
its width upto its content.

Lets add some content to our Relative layout.

We will add buttons to it. You can simply drag from widget

palate
or define in xml.

First button

Add it to exactly center of layout

 

<Button
    android:text="Signup"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:id="@+id/button" />

See here layout_centerVertical  and layout_centerHorizontal  its value is set to true. That’s why it is
arranged in center of layout both horizontally and vertically.

text
property is
used to set display text, Here Signup text will be displayed.

Id
property is
used to identify your element. Each element should have unique id. Its set by
android studio automatically but if you want to change you can change to
quickly identify while writing code.

 @+id/button_signup this is much easy to remember. I am not changing now.

You
can also set these property from Properties window.

Second button

Add it to bottom right of layout

 

<Button
    android:text="Exit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    android:id="@+id/button2" />

Here layout_alignParentBottom  will align button at the
bottom of layout

layout_alignParentEnd
this will
align button to end of layout.

To support
lower api below 17 we added this extra property layout_alignParentRight

text Is set to Exit

id  Is set to button2

You
can also set these property from Properties window.

Third
button

Add it above our first button

 

<Button
    android:text="Login"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_above="@+id/button"
    android:id="@+id/button3"/>

layout_centerHorizontal
Button is
horizontally centered.

layout_above
This button
is place above our first button whose id is @+id/button.

text is set to Login

id  is set to button3

You
can also set these property from Properties window.

Here
is full xml code for our activity_main.xml.

activity_main.xml

.ln { color: rgb(0,0,0); font-weight: normal; font-style: normal; }
.s0 { color: rgb(0,0,0); font-style: italic; }
.s1 { color: rgb(0,0,255); font-weight: bold; }
.s2 { color: rgb(0,0,0); }
.s3 { color: rgb(0,128,0); font-weight: bold; }
.s4 { color: rgb(0,0,0); }
.s5 { color: rgb(0,0,128); font-weight: bold; }

<?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:id="@+id/activity_main" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    tools:context="com.androidcodr.firstapp.MainActivity"> 
 
    <RelativeLayout 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"> 
 
        <Button 
            android:text="Signup" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_centerVertical="true" 
            android:layout_centerHorizontal="true" 
            android:id="@+id/button" /> 
 
        <Button 
            android:text="Exit" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_alignParentBottom="true" 
            android:layout_alignParentRight="true" 
            android:layout_alignParentEnd="true" 
            android:id="@+id/button2" /> 
 
        <Button 
            android:text="Login" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_centerHorizontal="true" 
            android:layout_above="@+id/button" 
            android:id="@+id/button3"/> 
    </RelativeLayout> 
 
</RelativeLayout>