Android - Constraint Layout - margins vs layout_constraintWidth_percent

Question

This is a question specifically for ConstraintLayout - We can use margins as an attribute or layout_constraintWidth_percent as an attribute while working with width for an UI element.

Example - I have a button in centre of my UI which have some empty space to its left and right. Say something like this -

• Approach1- uses "marginLeft" and "marginRight"

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_marginLeft="24dp"
        android:layout_marginRight="24dp"
        android:text="@string/button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

or

• Approach2- uses "app:layout_constraintWidth_percent"

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="40dp"
        app:layout_constraintWidth_percent="0.8"
        android:text="@string/button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Which of the following ways will be a more efficient way to render the UI element?

Answer 1

For efficiency of the two methods, there won't be any difference, at least that you will be able to measure, between the two (IMO), but the two methods are not the same.

Settting

android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"

will place margins of 24dp to the right and left of the ConstraintLayout regardless of the ConstraintLayout's width. The view's width will take up the remainder of the width which will vary according to the width of the ConstraintLayout.

If you set

app:layout_constraintWidth_percent="0.8"

then the view's width will be 80% of the ConstraintLayout's width and each margin (left and right) will effectively be 10% of the ConstraintLayout's width (1/2 of 20%). So, the width of the view and it's margins will vary based upon the width of the ConstraintLayout.

If it really doesn't matter to your design then just pick one. But since there is a difference in how the two layout, I would look at the layout on the smallest screen you support and the largest and include any other alternate layout for landscape/portrait, etc. You may find that there is a good reason to prefer one over the other.

Answer 2

In case you have more complex structure of the ConstraintLayout layout_constraintWidth_percent will continue measure percents from the ConstraintLayout's width, not from the width it occupies.

For instance, I want to draw this picture:

<androidx.constraintlayout.widget.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="wrap_content">

    <View
        android:id="@+id/left"
        android:layout_width="50dp"
        android:layout_height="20dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/top"
        android:layout_width="0dp"
        android:layout_height="20dp"
        android:layout_marginStart="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/left"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/bottom"
        android:layout_width="0dp"
        android:layout_height="20dp"
        android:layout_marginTop="10dp"
        app:layout_constraintStart_toStartOf="@id/top"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/top"
        app:layout_constraintWidth_percent="0.8" />

</androidx.constraintlayout.widget.ConstraintLayout>

Then you will get bottom rectangle wider, than upper.