PercentRelativeLayout in Android

During most of the android design and development , we mainly use three types of layout: LineraLayout ,RelativeLayout, FrameLayout. And for creating complex view we use weight property to distribute view across screens.

But while using weights you must have noticed that we have to add a default container view to encapsulate our child view . Now problem with this approach is it adds an additional view hierarchy to our layout, which is of no use except holding child view and holding weight sum value.

Last year, android has introduced a new layout called PercentRelativeLayout which gives us the functionality of both relativelayout and weight property together .

PercentRelativeLayout is same as relative layout with an additional feature ‘percentage’. we can put percentage on view component (out of 100) in terms of width,height,margins etc.

Or simply we can say use relative percent layout as linear layout as it has features of both along with reduced view complexity.

To use percent relative layout add gradle path i.e :

[sourcecode language=”java”]
compile ‘com.android.support:percent:23.1.1’ in your build.gradle file.
[/sourcecode]

And you are on.

An Example shown below depict’s how to use and comparison of view hierarchy of two layouts, with and without PercentRelativeLayout

Let’s make it using linearLayout first.

[sourcecode language=”java”]
<?xml version="1.0" encoding="utf-8"?></pre>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="4">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.5"
android:gravity="center">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MAIN HEADER"
android:textSize="50dp" />

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">

<TextView
android:id="@+id/textview_sub_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="Sub Header"
android:textSize="25dp"/>

</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.5"
android:orientation="horizontal">

<Button
android:id="@+id/button"
android:layout_width="match_parent"
android:layout_height="80dp"
android:text="Button"
android:background="@android:color/holo_blue_light"
android:textColor="@android:color/white"
android:textSize="25dp"
android:textStyle="bold"/>

</LinearLayout>

<TextView
android:id="@+id/textview_bottom_text"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1.0"
android:gravity="center"
android:text="BOTTOM TEXT"
android:textSize="20dp"/>

</LinearLayout>
[/sourcecode]

and now with the percentLayout

[sourcecode language=”java”]
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/textview_title"
android:layout_centerHorizontal="true"
app:layout_heightPercent="10%"
android:gravity="center"
app:layout_marginTopPercent="14%"
app:layout_widthPercent="100%"
android:textSize="50dp"
android:text="MAIN HEADER"/>

<TextView
android:id="@+id/textview_sub_header"
android:layout_height="wrap_content"
android:layout_below="@+id/textview_title"
android:gravity="center"
android:text="Sub Header"
android:textSize="25dp"
app:layout_marginTopPercent="17%"
app:layout_widthPercent="100%" />

<Button
android:id="@+id/button_blogger"
android:layout_below="@+id/textview_sub_header"
android:text="button"
android:textColor="@android:color/white"
android:textSize="25dp"
android:textStyle="bold"
android:background="@android:color/holo_blue_light"
app:layout_heightPercent="13%"
app:layout_marginTopPercent="16%"
app:layout_widthPercent="100%" />

<TextView
android:id="@+id/textview_bottom_text"
android:layout_height="match_parent"
android:layout_below="@+id/button_blogger"
android:gravity="center"
android:text="BOTTOM TEXT"
android:textSize="20dp"
app:layout_widthPercent="100%" />

</android.support.percent.PercentRelativeLayout>
[/sourcecode]

Below Images showing the preview of the above two layouts :

And let’s see the diffrence in the view hierarchy:

In this way we can reduce the view complexity using percentRelativeLayout.