{"id":32836,"date":"2016-02-26T10:11:04","date_gmt":"2016-02-26T04:41:04","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=32836"},"modified":"2016-03-14T10:43:59","modified_gmt":"2016-03-14T05:13:59","slug":"percentrelativelayout-in-android","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/percentrelativelayout-in-android\/","title":{"rendered":"PercentRelativeLayout in Android"},"content":{"rendered":"

During most of the android design and development<\/a> , we mainly use three types of layout: LineraLayout ,RelativeLayout, FrameLayout<\/strong><\/em>. And for creating complex view we use weight property to distribute view across screens.<\/p>\n

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.<\/p>\n

Last year, android has introduced a new layout called\u00a0PercentRelativeLayout which gives us the functionality of both relativelayout and weight property together .<\/strong><\/em><\/p><\/blockquote>\n

PercentRelativeLayout<\/strong><\/a>\u00a0is 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.<\/em><\/p>\n

Or simply we can say use relative percent layout as linear layout as it has features of both along with reduced view complexity.<\/p>\n

To use percent relative layout add gradle path i.e :<\/p>\n

[sourcecode language=”java”]
\ncompile ‘com.android.support:percent:23.1.1’ in your build.gradle file.
\n[\/sourcecode]<\/p>\n

And you are on.<\/p>\n

An Example shown below\u00a0depict’s how to use and comparison of view hierarchy of two layouts, with and without PercentRelativeLayout<\/strong><\/p>\n

Let’s make it using linearLayout first.<\/p>\n

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

<LinearLayout
\nandroid:layout_width="match_parent"
\nandroid:layout_height="0dp"
\nandroid:layout_weight="1.5"
\nandroid:gravity="center"><\/p>\n

<TextView
\nandroid:layout_width="wrap_content"
\nandroid:layout_height="wrap_content"
\nandroid:text="MAIN HEADER"
\nandroid:textSize="50dp" \/><\/p>\n

<\/LinearLayout><\/p>\n

<LinearLayout
\nandroid:layout_width="match_parent"
\nandroid:layout_height="0dp"
\nandroid:layout_weight="1"
\nandroid:orientation="vertical"><\/p>\n

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

<\/LinearLayout><\/p>\n

<LinearLayout
\nandroid:layout_width="match_parent"
\nandroid:layout_height="0dp"
\nandroid:layout_weight="0.5"
\nandroid:orientation="horizontal"><\/p>\n

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

<\/LinearLayout><\/p>\n

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

<\/LinearLayout>
\n[\/sourcecode]<\/p>\n

and now with the percentLayout<\/p>\n

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

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

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

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

<TextView
\nandroid:id="@+id\/textview_bottom_text"
\nandroid:layout_height="match_parent"
\nandroid:layout_below="@+id\/button_blogger"
\nandroid:gravity="center"
\nandroid:text="BOTTOM TEXT"
\nandroid:textSize="20dp"
\napp:layout_widthPercent="100%" \/><\/p>\n

<\/android.support.percent.PercentRelativeLayout>
\n[\/sourcecode]<\/p>\n

 <\/p>\n

Below Images showing the preview of the above two layouts :<\/p>\n

\"preview1\"
\n\"preview2\"<\/div>\n

And let’s see the diffrence in the view hierarchy:<\/p>\n

\"preview1\"
\n\"heirarchy_preview2\"<\/div>\n

In this way we can reduce the view complexity using percentRelativeLayout.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":156,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":14},"categories":[518,1],"tags":[3164,3165],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/32836"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/156"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=32836"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/32836\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=32836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=32836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=32836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}