PercentRelativeLayout
, a recent addition to the Design Support Library, enables the ability to specify not only elements relative to each other but also the total percentage of available space. In the past, in order to position two elements next to each other with equal height, you would normally have to create a LinearLayout
within a RelativeLayout
.PercentRelativeLayout
helps solves this issue.
To use, follow the setup guide and make sure the Gradle dependency is defined:
dependencies {
compile 'com.android.support:percent:23.1.0'
}
The layout_width
and layout_height
of the PercentRelativeLayout should determine the total width and height that can be used. Any elements contained within it should specify the width and height possible using layout_heightPercent
and/orlayout_widthPercent
. Because this library is not part of the standard Android library, note that a custom attribute app
namespace being used.
An example of a layout used to describe the image above is shown below (taken from this sample code):
<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/top_left"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:background="#ff44aacc"
app:layout_heightPercent="20%"
app:layout_widthPercent="70%" />
<View
android:id="@+id/top_right"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/top_left"
android:background="#ffe40000"
app:layout_heightPercent="20%"
app:layout_widthPercent="30%" />
<View
android:id="@+id/bottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_below="@+id/top_left"
android:background="#ff00ff22"
app:layout_heightPercent="80%" />
</android.support.percent.PercentRelativeLayout>
Margin Percentages
The margins can also be set to a percentage of the total widths as well:
app:layout_marginStartPercent
app:layout_marginEndPercent
app:layout_marginTopPercent
app:layout_marginBottomPercent
We can also define app:layout_marginPercent
that will be to all four values above.
Aspect Ratio
Similar to how ImageView's adjustViewBounds:true
can be used to scale the image according to its aspect ratio, we can also use PercentRelativeLayout
to define an aspect ratio for a layout. If one dimension is set to 0dp
and no percent scaling is associated with it, setting a percentage on the app:layout_aspectRatio
attribute can scale the other to meet the ratio:
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#ff00ff22"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- not using aspectRatio here -->
<View
android:id="@+id/view1"
android:background="#ff44aacc"
android:layout_width="300dp"
android:layout_height="wrap_content"
app:layout_heightPercent="50%"/>
<!-- using aspectRatio here -->
<View
android:layout_below="@id/view1"
android:background="#ffe40000"
android:layout_width="300dp"
android:layout_height="0dp"
app:layout_aspectRatio="160%"/>
</android.support.percent.PercentRelativeLayout>
The resulting layout appears as follows: