Android PercentFrameLayout PercentRelativeLayout Example

LinearLayout has layout_weight property that can be used to specify the width percentage that a component can occupy. But FrameLayout and RelativeLayout do not support such property.

Fortunately, android provide PercentFrameLayout and PercentRelativeLayout in it’s new support library. Those two layout extends FrameLayout and RelativeLayout with functions that can divide the screen by percentage.

1. Add Percent Support Library In Android Project.

Before you can use PercentFrameLayout and PercentRelativeLayout, you need to add the support library in your android project.

  1. Choose Project view in left panel android studio.
  2. Double click app / build.gradle file to open it in right panel.
  3. Add text compile ‘com.android.support:percent:24.2.1’ in dependencies section.
  4. After that click the Sync Now link at top.
    android add percent support library in build gradle file
  5. Rebuild the project, now you can use PercentFrameLayout and PercentRelativeLayout in your android project layout xml file.

2. Percent Layout Support Properties.

Both percent layout support below properties. From the property name, we can see it support width and height percentage split. It also support margin percentage split.

  1. layout_widthPercent.
  2. layout_heightPercent.
  3. layout_marginPercent.
  4. layout_marginTopPercent.
  5. layout_marginBottomPercent.
  6. layout_marginLeftPercent.
  7. layout_marginRightPercent.
  8. layout_marginStartPercent.
  9. layout_marginEndPercent.

Please Note : All above percent layout properties are included in name space app not android. So you need to add below xml namespace declaration at the beginning of the layout xml file.

<android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"

The above property may not be prompted when type in the xml file in android studio. But they are really exist. Just type them.

2. Android PercentFrameLayout Example.

android percent frame layout example

Main Layout Xml File.

<android.support.percent.PercentFrameLayout 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" >

        <Button
            android:layout_gravity="top|left"
            android:text="width 30%, height 10%"
            android:background="@android:color/holo_green_light"
            app:layout_widthPercent="30%"
            app:layout_heightPercent="10%"
            app:layout_marginPercent = "1%"/>

        <Button
            android:layout_gravity="top|right"
            android:text="width 60%, height 20%"
            android:background="@android:color/holo_blue_light"
            app:layout_widthPercent="60%"
            app:layout_heightPercent="20%"
            app:layout_marginPercent = "5%" />

        <Button
            android:layout_gravity="center"
            android:text="width 20%, height 15%"
            android:background="@android:color/holo_red_light"
            app:layout_widthPercent="20%"
            app:layout_heightPercent="15%" />

        <Button
            android:layout_gravity="bottom"
            android:text="width 100%, height 15%"
            android:background="@android:color/holo_orange_light"
            app:layout_widthPercent="100%"
            app:layout_heightPercent="15%"
            app:layout_marginBottomPercent = "5%" />

</android.support.percent.PercentFrameLayout>

3. Android PercentRelativeLayout Example.

android percent relative layout example

<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" >

    <Button
        android:text="width 30%, height 10%"
        android:background="@android:color/holo_green_light"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        app:layout_widthPercent="30%"
        app:layout_heightPercent="10%"
        app:layout_marginPercent = "1%"/>

    <Button
        android:text="width 60%, height 20%"
        android:background="@android:color/holo_blue_light"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        app:layout_widthPercent="60%"
        app:layout_heightPercent="20%"
        app:layout_marginPercent = "5%" />

    <Button
        android:text="width 20%, height 15%"
        android:background="@android:color/holo_red_light"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        app:layout_widthPercent="20%"
        app:layout_heightPercent="15%" />

    <Button
        android:text="width 80%, height 15%"
        android:background="@android:color/holo_orange_light"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        app:layout_widthPercent="80%"
        app:layout_heightPercent="15%"/>

</android.support.percent.PercentRelativeLayout>
(Visited 611 times, 1 visits today)
READ :   How To Add Activity In Android Studio

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.