RelativeLayout in Android is a view group with job to display different child views in relative positions to other different views.
Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!
In an android activity we have different widgets (like TextView, Button, etc) the user interacts with. These widgets are useful for user intereaction with your app. However arrangement of these widgets is determined by Layouts in android.
One such layout we’re discussing in this blog is RelativeLayout in Android.
We’ll explain this and its different attributes in example below:
Alignment of Child view with Parent View
Parent view is the view which has one or more views in it. Just like the main activity screen in android which has one or more views.
In following example you’ll learn about attributes of aligning child view with parent view.
layout_alignParentTop
Aligns the child to the top of parent.
Attribute used: android:layout_alignParentTop =”true”
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AndroidDvlpr.com"
android:layout_alignParentTop="true"/>
</RelativeLayout>layout_alignParentBottom
Aligns the child to the bottom of parent.
Attribute used: android:layout_alignParentBottom=”true”
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AndroidDvlpr.com"
android:layout_alignParentBottom="true"/>
</RelativeLayout>layout_alignParentLeft
Aligns the child to the left of parent.
Attribute used: android:layout_alignParentLeft =”true”
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AndroidDvlpr.com"
android:layout_alignParentLeft="true"/>
</RelativeLayout>layout_alignParentRight
Aligns the child to the right of parent.
Attribute used: android:layout_alignParentRight=”true”
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AndroidDvlpr.com"
android:layout_alignParentRight="true"/>
</RelativeLayout>layout_centerInParent
Aligns the child to the center of parent.
Attribute used: android:layout_centerInParent =”true”
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AndroidDvlpr.com"
android:layout_centerInParent="true"/>
</RelativeLayout>layout_centerVertical
Aligns the child center vertically.
Attribute used: android:layout_centerVertical =”true”
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AndroidDvlpr.com"
android:layout_centerVertical="true"/>
</RelativeLayout>layout_centerHorizantal
Aligns the child center horizontally
Attribute used: android:layout_centerHorizontal=”true”
<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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="AndroidDvlpr.com"
android:layout_centerHorizontal="true"/>
</RelativeLayout>Alignment of Child view with other Child View
In the following example we’ve demonstrated the alignment of two child views both being layout_centerInParent, but how child2 will align with respect to child1
<?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/child1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Child1"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/child2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Child2"
android:layout_centerInParent="true"/>
</RelativeLayout>layout_above = @+id/child1
Aligns Child 2 above Child1
Attribute used: android:layout_above=”@+id/child1″
<?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/child1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Child1"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/child2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Child2"
android:layout_centerInParent="true"
android:layout_above="@+id/child1"/>
</RelativeLayout>layout_below = @+id/child1
Aligns Child 2 below Child1
Attribute used: android:layout_below=”@+id/child1″
<?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/child1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Child1"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/child2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Child2"
android:layout_centerInParent="true"
android:layout_below="@+id/child1"/>
</RelativeLayout>layout_toLeftOf = @+id/child1
Aligns Child 2 to the left of Child1
Attribute used: android:layout_toLeftOf=”@+id/child1″
<?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/child1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Child1"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/child2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Child2"
android:layout_centerInParent="true"
android:layout_toLeftOf="@+id/child1"/>
</RelativeLayout>layout_toRightOf = @+id/child1
Aligns Child 2 to the right of Child1
Attribute used: android:layout_toRightOf=”@+id/child1″
<?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/child1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Child1"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/child2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Child2"
android:layout_centerInParent="true"
android:layout_toRightOf="@+id/child1"/>
</RelativeLayout>To learn how to get custom gradient background in Android Studio, click here!
