It may be useful to have a quick reference here.
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.
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"
...
/>
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"
...
/>
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.
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.
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.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With