How to use Percentage for android layout?

Question

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%"/>

Answer 1

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

Answer 2

You can use PercentRelativeLayout It is a Subclass of RelativeLayout that supports percentage based dimensions and margins.

To use, you need to add this library to your Gradle dependency :

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

Sample structure is

<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">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentRelativeLayout>

Answer 3

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:

Answer 4

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.

Answer 5

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>

Answer 6

UPDATE 2018:

PercentRelativeLayout and PercentFrameLayout are deprecated. Consider using ConstraintLayout

Old Answer:

So far Android Support library has limited on where to use this:

1. with RelativeLayout

   android.support.percent.PercentRelativeLayout
   

2. with FrameLayout

   android.support.percent.PercentFrameLayout
   

How to use it?

Well, first make sure to include the dependency at build.grade(Module: app)

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

Then go 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 detail please check here: