How to use Percentage for android layout?
How can we use percentage values for android view elements? something like this
<TextView
android:id="@+id/"
android:layout_width="75%"
android:layout_height="50%"/>
UPDATE 2018:
PercentRelativeLayout and PercentFrameLayout are deprecated. Consider using ConstraintLayout
Old Answer:
So far Android Support library has limited on where to use this:
-
with
RelativeLayoutandroid.support.percent.PercentRelativeLayout -
with
FrameLayoutandroid.support.percent.PercentFrameLayout
How to use it?
Well, first make sure to include the dependency at
build.grade(Module: app) in your android app.
dependencies {
compile 'com.android.support:percent:23.3.0'
}
Then navigate to your xml layout in this example (.MainActivity)
<android.support.percent.PercentRelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:text="Button"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
app:layout_widthPercent="30%"/>
<Button
android:id="@+id/button2"
android:text="Button 2"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/button"
app:layout_widthPercent="60%"/>
<Button
android:id="@+id/button3"
android:text="Button 3"
android:layout_height="wrap_content"
android:layout_below="@+id/button"
android:layout_alignParentStart="true"
android:layout_alignParentLeft="true"
app:layout_widthPercent="90%"/>
</android.support.percent.PercentRelativeLayout>
For more detail please check here:
The support library just added a percent layout.
It can be done like this
<android.support.percent.PercentFrameLayout
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">
<ImageView
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
app:layout_marginTopPercent="25%"
app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentFrameLayout>
https://developer.android.com/reference/android/support/percent/PercentFrameLayout.html
You can use PercentRelativeLayout, It is a recent undocumented 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.
Structure Is
<android.support.percent.PercentRelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="@+id/imageview"
android:layout_gravity="center"
app:layout_widthPercent="50%"
app:layout_heightPercent="50%"
android:src="@mipmap/ic_launcher"
android:background="#cecece"/>
<TextView
android:id="@+id/textview1"
android:layout_below="@id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_marginStartPercent="25%"
app:layout_marginEndPercent="25%"
android:text="PercentRelativeLayout example"
android:background="#bebebe"/>
</android.support.percent.PercentRelativeLayout>
The Percent package provides APIs to support adding and managing percentage based dimensions in your app.
To use, you need to add this library to your Gradle dependency list:
dependencies {
compile 'com.android.support:percent:22.2.0'
// or compile 'com.android.support:percent:23.1.0'
}
For demo purpose you can visit Git android-percent-support-lib-sample.
With both PercentFrameLayout and PercentRelativeLayout being deprected in 26.0.0, you need to use ConstraintLayout to size your TextView with percentage values.
ConstraintLayout is really powerful tool to build Responsive UI for Android platform, you can find more details here Build a Responsive UI with ConstraintLayout.
Here is the example how to size your TextView(w=75%, h=50%) using ConstraintLayout:
<android.support.constraint.ConstraintLayout
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">
<android.support.constraint.Guideline
android:id="@+id/ver_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75"/>
<android.support.constraint.Guideline
android:id="@+id/hor_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"/>
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toTopOf="@+id/hor_guideline"
app:layout_constraintEnd_toStartOf="@+id/ver_guideline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Don't forget to add constraint-layout dependency to your module build.gradle file
dependencies {
...
implementation 'com.android.support.constraint:constraint-layout:1.0.2'
...
}
Or edit your layout directly in Layout Editor, as shown below:
As a result your TextView width is 75% of parent width and height is 50% of parent height:
Google has new API called android.support.percent
Example PercentRelativeLayout
<android.support.percent.PercentFrameLayout
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/myTextView"
app:layout_widthPercent="75%"
app:layout_heightPercent="50%"/>
</android.support.percent.PercentFrameLayout>