Getting started with Android Support Percent Library

Today I have a sample for you. If you want to place a simple red rectangle on the top-left coner with 5% margin left and 25% with inside RelativeLayout. How are you to do it?

I have a code to do it:

<RelativeLayout android:layout_width="match_parent"
  android:background="#ffee8509"
  android:layout_height="wrap_content">
  <LinearLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="20">
    <View android:layout_width="0dp"
      android:layout_height="match_parent"
      android:layout_weight="1" />
    <View android:layout_width="0dp"
      android:layout_height="100dp"
      android:layout_weight="5"
      android:background="#ff0000" />
  </LinearLayout>
</RelativeLayout>

[![android_percent_suppom/content/images/2015/08/android_percent_support_library_1.jpg)

But few days ago on the day Android M is officially announced its name: Marshmallow, Android team lauched many Support Library to help developer make better apps. One of those is Android Percent Support Library which  add an capbility to set RelativeLayout’s and FrameLayout’s dimension in %.

In this article, I will show you about of Android Support Percent Library and  how to use it to resolve above problem. The Percent Support Library adds support for the PercentLayoutHelper.PercentLayoutParams interface and various classes, such as PercentFrameLayout and PercentRelativeLayout.

After you download the Android Support Libraries, this library is located in the<sdk>/extras/android/support/customtabs directory. For more information on how to set up your project, follow the instructions in Adding libraries with resources.

The Gradle build script dependency identifier for this library is as follows:

compile 'com.android.support:percent:23.0.0'

Then you must sync project, if you encountered error:

[![android_percent_suppom/content/images/2015/08/android_percent_support_library_error.jpg)

You can select “Install Respository and sync project” to resolve error.

Now, you can use Android Percent Support Library to resolve the problem with code below:

<android.support.percent.PercentRelativeLayout
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:background="#ffee8509">
  <View android:layout_height="100dp"
    android:background="#ff0000"
    app:layout_marginLeftPercent="5%"
    app:layout_widthPercent="25%" />
</android.support.percent.PercentRelativeLayout>

[![android_percent_suppom/content/images/2015/08/android_percent_support_library_2.png)

You could see that the result is exactly the same but with much shorter and clearer code.
The complete source code for the sample:

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".MainActivity">

  <TextView android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:text="Use LinearLayout"
    android:textSize="26sp"
    android:textStyle="bold" />

  <RelativeLayout android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffee8509">

    <LinearLayout android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:weightSum="20">

      <View android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1" />

      <View android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_weight="5"
        android:background="#ff0000" />
    </LinearLayout>
  </RelativeLayout>

  <TextView android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="20dp"
    android:text="Use PercentRelativeLayout"
    android:textSize="26sp"
    android:textStyle="bold" />
 
 <android.support.percent.PercentRelativeLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffee8509">

      <View android:layout_height="100dp"
        android:background="#ff0000"
        app:layout_marginLeftPercent="5%"
        app:layout_widthPercent="25%" />
 </android.support.percent.PercentRelativeLayout>
</LinearLayout>