How to make ConstraintLayout work with percentage values

Question

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

User · Accepted Answer

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.

User · Answer

Using Guidelines you can change the positioning to be percentage based   lt 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   gt    You can also use this way  android layout width  0dp  app layout constraintWidth default  percent  app layout constraintWidth percent  0 4

User · Answer

you can use app layout constraintVertical weight it same as layout weight in linearlayout   lt 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  gt    lt 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   gt    lt 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   gt   lt  android support constraint ConstraintLayout gt    NOTE  app layout constraintVertical weight app layout constraintHorizontal weight  will work with android layout width  0dp   android layout height  0dp

User · Answer

It may be useful to have a quick reference here   Placement of views  Use a guideline with app layout constraintGuide percent like this    lt 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   gt    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   lt Button             app layout constraintEnd toEndOf  parent      app layout constraintStart toStartOf  parent      app layout constraintHorizontal bias  0 25                gt    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    lt Button             android layout width  0dp      app layout constraintWidth percent  0 5                gt

User · Answer

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    lt  xml version  1 0  encoding  utf-8   gt   lt 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  gt        lt 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   gt        lt 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   gt        lt 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   gt   lt  android support constraint ConstraintLayout gt

User · Answer

Try this code  You can change the height and width percentages with app layout constraintHeight percent and app layout constraintWidth percent    lt  xml version  1 0  encoding  utf-8   gt   lt 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  gt        lt 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  gt  lt  LinearLayout gt    lt  android support constraint ConstraintLayout gt    Gradle   dependencies           implementation  com android support constraint constraint-layout 1 1 3

User · Answer

With the new release of ConstraintLayout v1 1 you can now do the following    lt Button android layout width  0dp  android layout height  0dp  app layout constraintHeight percent  0 2  app layout constraintWidth percent  0 65    gt    This will constrain the button to be 20  the height and 65  of the width of the parent view

User · Answer

How to use Guidelines The accepted answer is a little unclear about how to use guidelines and what the  quot header quot  is  Steps First add a Guideline   Select the Guidline or move it a little bit to make the constraints visible   Then click the round circle  the  quot header quot   until it becomes a percent  You can then drag this percentage down to 50  or whatever you want   After that you can constrain your view to the Guideline to make it some percentage of the parent  using match constraint on the view

User · Answer

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

User · Answer

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     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    lt Button android layout width  0dp  android layout height  wrap content  android layout constraintWidth percent  0 7    gt    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    lt Button android layout width  wrap content  android layout height  0dp  android layout constraintHeight percent  0 2    gt    See  we have specified android layout height to 0dp this time as we want button to use height as percentage

User · Answer

As of  ConstraintLayout1 1 0-beta1  you can use percent to define widths  amp  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

User · Answer

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

User · Answer

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     lt 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   gt    in this case the aspect ratio it s 16 9 app layout constraintDimensionRatio  16 9   you can find more info HERE

User · Answer

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      lt  -- 50  width centered Button -- gt   lt 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    gt     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

[android] How to make ConstraintLayout work with percentage values?

Examples related to android

Examples related to android-support-library

Examples related to android-constraintlayout