How to make ConstraintLayout work with percentage values?

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?

Solution 1:

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

Solution 2:

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.

Solution 3:

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.

Solution 4:

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.

Solution 5:

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.

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

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.

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