PercentRelativeLayout in Android

26 / Feb / 2016 by Vaibhav Chahal 5 comments

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 :

preview1
preview2

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

preview1
heirarchy_preview2

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

FOUND THIS USEFUL? SHARE IT

comments (5)

  1. Suchith

    Hi Vaibhav,
    As you shown in the first code snippet with each control wrapping up with linear layout, is it really required? we can also do that by without having linearlayout for each control rite?

    Reply
  2. Shivang

    Hi Vaibhav,
    Thanks to share about ‘Percent Relative Layout’. Could you let us know about effect on performance, if we use ‘Percent Relative Layout’ instead of simple ‘Relative Layout’.

    Reply
    1. Vaibhav Chahal

      Typical use case of this layout is when properties of weights and relative layout both are required. On Performance part , since view hierarchy is simplified and rendering time of view would also improve .
      Do let me know if you have any further query.

      Reply
    1. Vaibhav Chahal

      Hi Guddu,
      As discussed in the blog above, view hierarchy gets simplified and rendering time of view would also reduce and
      according to the the manifest minsdk is v7 (android 2.1).
      Thanks.

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *