Menu
I'm learning how to use ConstraintLayout and have found a few good tutorials to have views width and height in percentage. I know I can probably add an empty view to 'create' margin, but it doesn't seem right. Is there a way to things like marginEnd='10%'?
267
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.
A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way. Note: ConstraintLayout is available as a support library that you can use on Android systems starting with API level 9 (Gingerbread).
Most of what can be achieved in LinearLayout and RelativeLayout can be done in ConstraintLayout.
Constraint Layout simplifies creating complex layouts in Android by making it possible to build most of your UI using only the visual editor in Android Studio. Constraint Layout comes with some powerful tools with the help of which you can define complex layouts without having deep nesting.
There're two ways to add percentage margin using ConstraintLayout.
Simply add vertical guideline to your layout and constraint view to that guideline:
<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"> <View android:id="@+id/view" android:layout_width="0dp" android:layout_height="50dp" android:background="@color/colorAccent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toStartOf="@+id/guideline" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <android.support.constraint.Guideline android:id="@+id/guideline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" app:layout_constraintGuide_percent="0.9" /> </android.support.constraint.ConstraintLayout> Add Space, place it on the very left side of parent, group your view and Space into "spread" chain and set app:layout_constraintHorizontal_weight="90" to your view and app:layout_constraintHorizontal_weight="10" to Space. It works very similar to LinearLayout's weight.
<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"> <View android:id="@+id/view" android:layout_width="0dp" android:layout_height="50dp" android:background="@color/colorAccent" app:layout_constraintHorizontal_chainStyle="spread" app:layout_constraintHorizontal_weight="90" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toStartOf="@+id/space" app:layout_constraintBottom_toBottomOf="parent" /> <Space android:id="@+id/space" android:layout_width="0dp" android:layout_height="wrap_content" app:layout_constraintHorizontal_weight="10" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toEndOf="@+id/view" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" /> </android.support.constraint.ConstraintLayout> As a result, your view has end margin with value of 10% of parent width:
120
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
