The Android Support Library provides a powerful set of percent-based layout containers that allow developers to define view dimensions as percentages of the parent container. This approach simplifies responsive UI design by eliminating the need for complex nested weight calculations.

Setup

Add the percent support library to your build.gradle file:

dependencies {
    compile 'com.android.support:percent:25.3.0'
}

Available Layouts

The libray offers three layout classes for percentage-based positioning: PercentRelativeLayout, PercentLinearLayout, and PercentFrameLayout.

PercentRelativeLayout

This layout extends RelativeLayout with percentage support, making it ideal for complex positioning scenarios:

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

    <View
        android:id="@+id/primary_panel"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:background="#ff44aacc"
        app:layout_heightPercent="25%"
        app:layout_widthPercent="65%" />

    <View
        android:id="@+id/secondary_panel"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentTop="true"
        android:layout_toEndOf="@id/primary_panel"
        android:background="#ffe40000"
        app:layout_heightPercent="25%"
        app:layout_widthPercent="35%" />

    <View
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_below="@id/primary_panel"
        android:background="#ff00ff22"
        app:layout_heightPercent="75%" />

</android.support.percent.PercentRelativeLayout>

The key attributes are app:layout_widthPercent and app:layout_heightPercent. Set the base dimension to 0dp when using these percentage attributes to let the layout system calculate the actual size.

PercentLinearLayout

For simpler vertical or horizontal arrangements, PercentLinearLayout provides a straightforward solution:

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

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ff44aacc"
        app:layout_heightPercent="15%"
        app:layout_widthPercent="100%" />

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ff4400cc"
        app:layout_heightPercent="35%"
        app:layout_widthPercent="100%" />

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ff00ff22"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="100%" />

</LinearLayout>

PercentFrameLayout

Use PercentFrameLayout for scenarios requiring stacking or overlaping views:

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

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#aa0000"
        app:layout_heightPercent="100%"
        app:layout_widthPercent="100%" />

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:background="#00aa00"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%" />

</android.support.percent.PercentFrameLayout>

Usage Guidelines

When implementing percent-based layouts, keep these points in mind:

• Always set the dimension you're controlling with percentage to 0dp
• The app namespace (xmlns:app="http://schemas.android.com/apk/res-auto") must be declared in the root element
• Combine both horizontal and vertical percentages for complete control over component sizing
• These layouts are particularly useful for creating adaptive interfaces that work across different screen sizes and orientations