Back to Home

Using Android support percent library using PercentRelativeLayout as an example

When I first came across layout layout in Android · with all these FrameLayout · LinearLayout · RelativeLayout. With concepts of weight and gravity for interface elements. I wondered why ...

Using Android support percent library using PercentRelativeLayout as an example

When I first came across layout layout in Android, with all these FrameLayout, LinearLayout, RelativeLayout. With concepts of weight and gravity for interface elements. I wondered why it couldn’t be done the way it has been done in html for a long time. Where is it possible to indicate the markup as a percentage? And finally, such an opportunity appeared. Of course, she didn’t appear yesterday, but I came across her only now, and I didn’t find any articles on the Habr’s with which they eat.

image

So, what does it take to feel this happiness? You need quite a bit, open build.gradle of your application, add the line there

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

and synchronize.

That's it, all the delights of marking in percent are available to you, at least for minSDK 14 (I have not tested less).

An empty layout will look like this:

<android.support.percent.PercentRelativeLayoutxmlns: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:theme="@android:style/Theme.Black"></android.support.percent.PercentRelativeLayout>

To indicate the size and position of the children, we can use the following attributes

  • layout_widthPercent
  • layout_heightPercent
  • layout_marginPercent
  • layout_marginLeftPercent
  • layout_marginTopPercent
  • layout_marginRightPercent
  • layout_marginBottomPercent
  • layout_marginStartPercent
  • layout_marginEndPercent
  • layout_aspectRatio

In this case, you must specify the prefix not android: layout_widthPercent , but app: layout_widthPercent , in accordance with the namespace specified in the layout header. The values ​​for these attributes are assigned in percent, with the obligatory indication of the% sign.

Actually the purpose of almost all the attributes is intuitive, width, height and indentation as a percentage of the parent layout.

Perhaps only layout_aspectRatio is worth clarifying. This attribute gives you the ability to specify the aspect ratio of an element. For example, you want to create a square button that occupies 15% of the screen width. You specify layout_widthPercent = “15%”, if you specify layout_heightPercent = “15%” then the button will turn out to be rectangular. Therefore, you need not specify layout_heightPercent, but specify layout_aspectRatio = "100%". In this case, the width will be calculated by the formula: layout_heightPercent * layout_aspectRatio / 100.

Another question may arise: how is layout_marginStartPercent different from layout_marginLeftPercent, and layout_marginEndPercent from layout_marginRightPercent, respectively? Everything is simple here, this is to ensure localization of the interface, for those languages ​​that are read left to right, Start = Left, and for those that are right to left Start = Right.

PercentRelativeLayout is the descendant of RelativeLayout, therefore, along with Percent-attributes, you can use RelativeLayout attributes, for example, you can specify the button height as android: layout_height = "wrap_content" and app width: layout_heightPercent = "25%".

Of course, PercentRelativeLayout is not a panacea, for example, when you flip the screen, you may get interesting and not pleasant special effects. Experiment yourself, and I concluded for myself that when using PercentRelativeLayout, you must definitely do a Landscape version of the layout.

Read Next