320

With a Preview 1 of Android Studio 2.2 Google released a new layout in its support library: ConstraintLayout. With ConstraintLayout it is easier to use a Design tool in Android Studio, but I didn't find a way to use relative sizes (percents or 'weights' like in LinearLayout). Is there a way to define the constraints based on percents? E.g. make a View take 40% of a screen, create 20% margin between views, set a View's width to 50% of another View's width?

2

14 Answers 14

397

It may be useful to have a quick reference here.

Placement of views

Use a Guideline with app:layout_constraintGuide_percent like this:

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5"/>

And then you can use this guideline as anchor points for other views.

or

Use bias with app:layout_constraintHorizontal_bias and/or app:layout_constraintVertical_bias to modify view location when the available space allows

<Button
    ...
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintHorizontal_bias="0.25"
    ...
    />

Size of views

Another percent based value is height and/or width of elements, with app:layout_constraintHeight_percent and/or app:layout_constraintWidth_percent:

<Button
    ...
    android:layout_width="0dp"
    app:layout_constraintWidth_percent="0.5"
    ...
    />

A useful addition to this is to set the other dimension relative to the first, for example - set the height according to the width, proportionally:

  app:layout_constraintDimensionRatio="1:1"
7
  • 3
    why does it have width set to 1dp?
    – user924
    Mar 1, 2018 at 20:48
  • 1
    @user924 It would have made sense to give a guideline a width of 0dp, I don't know why the developers who implemented this decided on 1dp. Maybe because 0dp is regarded as "stretch" when using weights.
    – Amir Uval
    Mar 4, 2018 at 9:25
  • 3
    @user924: 0dp is used in ConstraintLayout to indicate dynamic sizing. See developer.android.com/reference/android/support/constraint/…
    – serv-inc
    Mar 5, 2018 at 12:48
  • 1
    @serv-inc but here 1dp, not 0dp.. it's what I'm talking about
    – user924
    Mar 5, 2018 at 13:57
  • 3
    @user924: you need to set it to a width. 0dp is already reserved, so 1dp seems sensible.
    – serv-inc
    Mar 5, 2018 at 14:26
252

You can currently do this in a couple of ways.

One is to create guidelines (right-click the design area, then click add vertical/horizontal guideline). You can then click the guideline's "header" to change the positioning to be percentage based. Finally, you can constrain views to guidelines.

Another way is to position a view using bias (percentage) and to then anchor other views to that view.

That said, we have been thinking about how to offer percentage based dimensions. I can't make any promise but it's something we would like to add.

12
  • 1
    0 down vote Could I ask a follow up? I'm trying to set an ImageView to be 60% width but maintain a 16:9 aspect ratio. I want the width to be fixed, but the height of the ImageView to be dynamic. Is that possible with ConstraintLayout? I'm struggling to get it to work - I end up with fixed width/height values of 0 unless I specify hardcoded dimensions. Jun 7, 2016 at 21:34
  • 3
    @MattWilliams89 There is a parameter called layout_constraintDimensionRatio, I guess it may be useful in your case, write "16:9" there. I didn't succeed trying to build your layout with it though, the image gets huge Jun 8, 2016 at 6:49
  • 1
    @RomainGuy how do you change positioning to be in percentage on guidlines's header?. i have tried to right click it and nothing shows up Jul 8, 2016 at 12:37
  • 24
    To those wondering exactly what the guideline's header is, it's the circle that has an up or down arrow or a percentage symbol. Clicking that toggles between app:layout_constraintGuide_begin, app:layout_constraintGuide_end, and app:layout_constraintGuide_percent in XML. I encountered a small issue (on ConstraintLayout version 1.0.0-alpha8 where I had to click the guideline, hold down my mouse, and drag to the circle to toggle these in the editor, but I'm sure this bug will be fixed soon. Sep 13, 2016 at 22:12
  • 4
    You can also set this in the XML of the layout using app:layout_constraintGuide_percentage
    – mez.pahlan
    Aug 8, 2017 at 11:40
152

As of "ConstraintLayout1.1.0-beta1" you can use percent to define widths & heights.

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".4"

This will define the width to be 40% of the width of the screen. A combination of this and guidelines in percent allows you to create any percent-based layout you want.

5
  • 6
    In constraint layout 1.0.2 the percent value for layout_constraintWidth_default is not supported. I think the right way is to use the Guideline.
    – vovahost
    Jul 29, 2017 at 15:59
  • 1
    it's working with Android Studio 3.0 built on October 20, 2017
    – douarbou
    Nov 17, 2017 at 16:30
  • 5
    As stated in the answer this was added in version 1.1 of ConstraintLayout. The additional _default="percent" is not needed anymore on the stable version! See "Percent dimension" on developer.android.com/reference/android/support/constraint/…
    – sunadorer
    May 23, 2018 at 15:30
  • @hoford, for a View containing text, whose size is to be defined in sp units, how could text-size be auto-proportional to view's size (which is, by itself, defined proportionally to layout's total size, i.e. in 'percent')?
    – Bliss
    Feb 13, 2019 at 18:16
  • @Bliss, textSize should be changed programmatically when a view changes it's size.
    – CoolMind
    Jan 25, 2022 at 7:54
96

With the new release of ConstraintLayout v1.1 you can now do the following:

<Button
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.2"
app:layout_constraintWidth_percent="0.65" />

This will constrain the button to be 20% the height and 65% of the width of the parent view.

4
  • 2
    for me worked only when I changed from "android:" to "app:" -> app:layout_constraintHeight_percent="0.2" May 16, 2018 at 20:27
  • This is a must for me when following the fluid layout of material design. material.io/design/layout/…
    – user1021364
    May 19, 2018 at 17:58
  • @Adam, for a View containing text, whose size is to be defined in sp units, how could text-size be auto-proportional to view's size (which is, by itself, defined proportionally to layout's total size, i.e. in 'percent')?
    – Bliss
    Feb 13, 2019 at 18:17
  • 1
    @Bliss Sounds like this could help: developer.android.com/guide/topics/ui/look-and-feel/… I have never used it myself though.
    – Adam
    Feb 14, 2019 at 8:25
47

How to use Guidelines

The accepted answer is a little unclear about how to use guidelines and what the "header" is.

Steps

First add a Guideline.

enter image description here

Select the Guidline or move it a little bit to make the constraints visible.

enter image description here

Then click the round circle (the "header") until it becomes a percent. You can then drag this percentage down to 50% or whatever you want.

enter image description here

After that you can constrain your view to the Guideline to make it some percentage of the parent (using match_constraint on the view).

enter image description here

4
  • Where should the 'header' be visible? It doesn't show up in my view. Nov 10, 2017 at 11:23
  • @Marcel50506, make sure that both the Design and Blueprint views are showing. That will give you the best chance at being able to see it. If you can see the guideline line, try clicking on it to select it. If you can't see the line, then try clicking on the guideline item in the Component Tree menu that should be off to the left side (assuming you added a guideline already).
    – Suragch
    Nov 10, 2017 at 11:56
  • 1
    I don't see the circle, but when clicking on the left of the guideline I can alter it to percentages.. Render issue I think. Thank you. Nov 13, 2017 at 8:38
  • This is the best answer because it proposes better layout approach. We can align multiple views on the base-guideline instead of adding percentage on only one view May 27, 2019 at 9:04
37

The Guideline is invaluable - and the app:layout_constraintGuide_percent is a great friend... However sometimes we want percentages without guidelines. Now it's possible to use weights:

android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"

Here is a more complete example that uses a guideline with additional weights:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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:padding="16dp"
    tools:context="android.itomerbu.layoutdemo.MainActivity">

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.44"/>

    <Button
        android:id="@+id/btnThird"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        android:layout_height="wrap_content"
        android:text="@string/btnThird"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintRight_toLeftOf="@+id/btnTwoThirds"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"/>

    <Button
        android:id="@+id/btnTwoThirds"
        app:layout_constraintHorizontal_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/btnTwoThirds"
        app:layout_constraintBottom_toBottomOf="@+id/btnThird"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btnThird"/>
</android.support.constraint.ConstraintLayout>
1
  • 2
    @Plumbus - Weights are equivalent to percentages (any percent can be mathematically converted to a weight and vice-versa). By being nit-picky on terminology you miss the point of the answer.
    – SMBiggs
    May 23, 2018 at 15:40
32

Constraint Layout 1.0 making a view take up a percentage of the screen required making two guidelines. In Constraint Layout 1.1 it’s been made simpler by allowing you to easily constrain any view to a percentage width or height.

enter image description here

Isn’t this fantastic? All views support layout_constraintWidth_percent and layout_constraintHeight_percent attributes. These will cause the constraint to be fixed at a percentage of the available space. So making a Button or a TextView expand to fill a percent of the screen can be done with a few lines of XML.

For example, if you want to set the width of the button to 70% of screen, you can do it like this:

<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_constraintWidth_percent="0.7" />

Please note that you will have to put the dimension should be used as percentage to 0dp as we have specified android:layout_width to 0dp above.

Similarly, if you want to set the height of the button to 20% of screen, you can do it like this:

<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_constraintHeight_percent="0.2" />

See! we have specified android:layout_height to 0dp this time as we want button to use height as percentage.

1
  • but how to also make percent of some other view and not the parent?
    – user924
    Nov 5, 2021 at 9:33
13

With the ConstraintLayout v1.1.2, the dimension should be set to 0dp and then set the layout_constraintWidth_percent or layout_constraintHeight_percent attributes to a value between 0 and 1 like :

<!-- 50% width centered Button -->
<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent=".5" />

(You don't need to set app:layout_constraintWidth_default="percent" or app:layout_constraintHeight_default="percent" with ConstraintLayout 1.1.2 and following versions)

11

Try this code. You can change the height and width percentages with app:layout_constraintHeight_percent and app:layout_constraintWidth_percent.

<?xml version="1.0" encoding="utf-8"?>
<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">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF00FF"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".4"></LinearLayout>

</android.support.constraint.ConstraintLayout>

Gradle:

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

enter image description here

7

you can use app:layout_constraintVertical_weight it same as layout_weight in linearlayout

<android.support.constraint.ConstraintLayout
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">

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button5"
    app:layout_constraintVertical_weight="1"/>

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toRightOf="@+id/button4"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintVertical_weight="1"/>
</android.support.constraint.ConstraintLayout>

NOTE: app:layout_constraintVertical_weight(app:layout_constraintHorizontal_weight) will work with android:layout_width="0dp" (android:layout_height="0dp"

0
7

For someone that might find useful, you can use layout_constraintDimensionRatio im any child view inside a ConstraintLayout and we can define the Height or Width a ratio of the other dimension( at least one must be 0dp either width or heigh) example

 <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:src="@drawable/top_image"
        app:layout_constraintDimensionRatio="16:9"        
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

in this case the aspect ratio it's 16:9 app:layout_constraintDimensionRatio="16:9" you can find more info HERE

6

Using Guidelines you can change the positioning to be percentage based

<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"/>

You can also use this way

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.4"
3

I know this isn't directly what OP was originally asking for but this helped me a lot in this situation when I had a similar question.. Adding this for people looking to change the layout window size (which i use regularly), via code. Add this to your onCreate in the activity of question. (Changes it to 80%)

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);

int width = dm.widthPixels;
int height = dm.heightPixels;

getWindow().setLayout((int)(width * 0.8), (int)(height * 0.8));
2

Simply, just replace , in your guideline tag

app:layout_constraintGuide_begin="291dp"

with

app:layout_constraintGuide_percent="0.7"

where 0.7 means 70%.

Also if you now try to drag guidelines, the dragged value will now show up in %age.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.