Android percent support lib sample

Update: 

From API Level 26, percent support library is deprecated. Please use updated code and samples from Github project.

GitHub project HERE

In this post I'm gonna show you guys a demo of percent layout of android from support library. Since many a time in our awesome RelativeLayout we insert LinearLayout just to get the property of layout_weight for accessing.

Now android has a new support library to remove this dependencies.

Before beginning some pre-requestic (at the time for development):

• Android SDK v22
• Android Build Tools v22.0.1
• Android Percent Support Repository v23.0.0
• Android Support appcompat-v7:22.2.1

So let's get started:

Step 1: Add below line into apps build.gradle.

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

Step 2:  Add any one of below as the parent of the layout.Its similar to our RelativeLayout or FrameLayout.

<android.support.percent.PercentRelativeLayout> 

or

<android.support.percent.PercentFrameLayout>

Step 3: Now we gonna use layout_heightPercent and layout_widthPercent  property's to specify our height and width in percentage.

Consider this simple layout.

percent_layout.xml

Lets make it :-)

<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">
    <TextView
        android:id="@+id/fifty_fifty_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="center_horizontal"
        android:background="#ffff8800"
        android:text="50% - 50%"
        android:textColor="@android:color/white"
        android:textSize="25sp"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%"
         />
    <TextView
        android:id="@+id/twenty_fifty_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_gravity="center_horizontal"
        android:layout_toRightOf="@id/fifty_fifty_tv"
        android:background="#ffff5566"
        android:text="20%-50%"
        android:textSize="25sp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        />

    <TextView
        android:id="@+id/thirty_fifty_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@id/twenty_fifty_tv"
        android:layout_gravity="center_horizontal"
        android:layout_toRightOf="@id/fifty_fifty_tv"
        android:background="#aa3628cc"
        android:text="30%-50%"
        android:textSize="25sp"
        app:layout_heightPercent="30%"
        app:layout_widthPercent="50%"
        />
    <TextView
        android:id="@+id/century_50_tv"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_below="@id/fifty_fifty_tv"
        android:layout_gravity="center_horizontal"
        android:background="#aacacc46"
        android:text="50%-100%"
        android:textSize="25sp"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="100%"
        />
</android.support.percent.PercentRelativeLayout>

Thus by using the android percent support library we have made our layout simple by removing boilerplate layout.

GitHub project HERE

Really awesome :-)

Read More