{"id":186,"date":"2017-01-11T06:59:45","date_gmt":"2017-01-11T06:59:45","guid":{"rendered":"http:\/\/abhiandroid.com\/materialdesign\/?page_id=186"},"modified":"2019-06-13T10:30:08","modified_gmt":"2019-06-13T10:30:08","slug":"percentrelativelayout","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/materialdesign\/percentrelativelayout","title":{"rendered":"PercentRelativeLayout Tutorial With Example In Android Studio"},"content":{"rendered":"

PercentRelativeLayout<\/strong>\u00a0<\/span>in Android is a subclass of RelativeLayout that supports percentage based margin and dimensions for Views(Button, TextView or any other view).<\/p>\n

\"percent-relative-layout-in-android-studio\"<\/p>\n

Percent Support Library:<\/span> <\/strong>Percent Support Library provides a feature to set the dimensions and margins in the term of Percentage. It has two pre built Layouts- the PercentRelativeLayout and PercentFrameLayout. In this article we focused on PercentRelativeLayout. This library is pretty easy to use because it has same Relative Layout and FrameLayout that we are familiar with, just with some additional new functionalities.<\/p>\n

Important Note –<\/strong>\u00a0\u00a0<\/span>To use percentrelativelayout you need to add Percent Support Library dependency in build.gradle file.<\/p>\n

Gradle Scripts > build.gradle (Module:App) -> inside\u00a0dependencies<\/strong><\/span><\/p>\n

compile 'com.android.support:percent:23.3.0' \/\/ Percent Support Library<\/pre>\n
PercentRelativeLayout Vs Relative Layout In Android:<\/strong><\/h4>\n
PercentRelativeLayout class extends from Relative Layout class so it supports all the features, attributes of RelativeLayout and it has percentage dimensions so it also supports some features of LinearLayout. In Simple words we can say that PercentRelativeLayout has features of both Layouts with reduced view complexity.<\/strong><\/p>\n
\n
Need of PercentRelativeLayout In Android<\/strong><\/h4>\n
In Android there are lot of Layout’s that can be used at the time of development but at last we always end up with our main three layouts Linear Layout, Relative Layout and FrameLayout. In case if we need to create complex view then we use weight property of LinearLayout to distribute view across screens. But while using weight property we must have noticed that we have to add a default container view to encapsulate our child view . We can follow this approach but it adds an additional view hierarchy in our layout’s which is of no use except holding weight sum value and child view. After the introduction of PercentRelativeLayout we can put percentage dimension and margins to our view that helps us to remove the problem of existing RelativeLayout.<\/p>\n
\n
Short Description About RelativeLayout:<\/strong><\/h4>\n
Relative Layout is very flexible layout used in android for custom layout designing. It gives us the flexibility to position our component’s based on the relative or sibling component\u2019s position. Just because it allows us to position the component anywhere we want so it is considered as most flexible layout. For the same reason Relative layout is the most used layout after the Linear Layout in Android. It allow its child view to position relative to each other or relative to the container or another container. You can read full tutorial about relative layout<\/a>.<\/p>\n
Important Note:\u00a0<\/strong><\/span>In PercentRelativeLayout, it is not necessary to specify layout_width and layout_height attributes if we specify layout_widthPercent attribute. If in case we want the view to be able to take up more space than what percentage value permits then we can add layout_width and layout_height attributes with wrap_content value. In that case if the size of content is larger than percentage size then it will be automatically resized using wrap_content rule. If we don’t use layout_height and layout_width attribute then android studio shows us an error marker on element in the editor but it will be automatically ignored at run-time.<\/p>\n
Basic PercentRelativeLayout XML Code:<\/span><\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<android.support.percent.PercentRelativeLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\">\r\n    <!-- Add Child View's Here... -->\r\n<\/android.support.percent.PercentRelativeLayout>\r\n<\/pre>\n
\n
Attributes of PercentRelativeLayout<\/strong><\/h4>\n
Now let\u2019s we discuss some common attributes of a PercentRelativeLayout that helps us to configure it in our layout (xml). It supports all the attributes of RelativeLayout but here we are only discuss some additional attributes.<\/p>\n
Very Important Note:<\/strong><\/span>\u00a0Before you use below code make sure you have added Percent Support Library dependency in build.gradle file in depencies.<\/p>\n
Gradle Scripts > build.gradle (Module:App) -> inside\u00a0dependencies<\/strong><\/span><\/p>\n
compile 'com.android.support:percent:23.3.0' \/\/ Percent Support Library<\/pre>\n