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

Memnon

Besides the library cited in the answers, you can use android:layout_weight in a LinearLayout to achieve a similar aim: github.com/commonsguy/cw-omnibus/blob/master/Containers/… – Auspicate

@Auspicate but how can we set both width and height in percent in single layout ? – Joslyn

@Cyanotis: No, other than to the extent that you nest LinearLayout containers and control percentages along both axes via android:layout_weight. There's no question that the new android.support.percent classes are more flexible. I simply wanted to point out the classic approach, given that some people are opposed to using libraries. – Auspicate

@Auspicate ok . I thought there is any another way. thanks for replay. – Joslyn

this is an old question but have not new answers. – Antimonic

Answer 1

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) 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:

Morin

Answer 2

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

Ciprian

Answer 3

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.

Huebner

Answer 4

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:

Horaciohorae

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>

Organizer

There are a few errors here. Your opening and closing tags are different (Relative/Frame), but more important, those attributes are wrong it should be app:layout_widthPercent="75%" app:layout_heightPercent="50%" – Advised

yup Edited that It was type mistake as I am Trying to copy the OPs example – Organizer

Answer 6

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>

Windstorm