Working with the Percent Support Library

Google released new Percent Support Library which contains two extra container classes: PercentFrameLayout and PercentRelativeLayout. I want to show you how to work with these layouts which are great in handling percentage-based sizing of widgets.

Most of the Android developers need only general containers available in core software development kit – FrameLayout, LinearLayout, RelativeLayout, TableLayout and GridLayout. These layouts work as expected, however they have some limitations: they are not good in handling percentage-based sizing of widgets inside of them. To fill this gap, Google has released the Percent Support Library with PercentFrameLayout and PercentRelativeLayout.

PercentFrameLayout and PercentRelativeLayout

PercentFrameLayout and PercentRelativeLayout are descendant classes from FrameLayout and RelativeLayout. Apart from the ancestor’s features, new implementations give us extra layout attributes that will help with setting percentage-based widget sizes. There attributes are as follows:

  • app:layout_heightPercent
  • app:layout_widthPercent
  • app:layout_marginLeftPercent
  • app:layout_marginTopPercent
  • app:layout_marginBottomPercent
  • app:layout_marginRightPercent

Let’s see them in action!

Using Percent Support

To test our new library, we will try to prepare simple screen with 3 boxes aligned diagonally.
Screen Shot 2016-03-23 at 20.37.14


Before choosing percent library we will try to achieve desired effect with the LinearLayout.

Screen Shot 2016-03-23 at 20.04.01

As you can see, the above xml gives us what we wanted but the implementation is far from perfect (a lot of boilerplate code + extra Views used as padding). So let’s try harder.


For the second option we are going to use PercentFrameLayout, but first we need to add the library to our gradle build.

Now that our percent support is added, let’s implement the screen.

With PercentFrameLayout our “padding Views” were replaced with app:marginLeft/TopPercent attributes and android:layout_weight with layout_widthPercent.

Screen Shot 2016-03-23 at 20.50.04

There is one thing we could still do better which is expressing our margins. Right now they are not relative to the preceding box. However we can change that by using PercentRelativeLayout.


As you can see the margins used in our last example are not based on the distance from the left edge but they are relative to the preceding views.

If you want to check full use cases, visit my Github repo and build it by yourself.


Thanks for reading !

Subscribe to our newsletter