Creating a background using ConstraintLayout

Question

I want to create something like a box containing a button and label and having a white scrim that would normally be done via:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentBottom=true
        android:background="#99ffffff
        android:gravity="center_horizontal">
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button Text"
            android:layout_margin="8dp">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Label Text"
            android:layout_margin="8dp"/>
    </LinearLayout>
</RelativeLayout>

What I've done was:

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <View
        android:id="@+id/scrim
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#99ffffff"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="@+id/button"/>
    <Button
        android:id="@+id/button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/label"/>
    <TextView
        android:id="@+id/label
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>
</android.support.constraint.ConstraintLayout>

The idea is to create a scrim View that is constrained on the bottom to the parent and the top to the top of a button, a button that's on top of a TextView and a TextView that's constrained at the bottom of the parent.

The issue is that the scrim doesn't respect the button's margin, i.e. the top of the scrim is flush with the button's top instead of 8dp above it.

Answer 1

The result you get is expected -- you tell your scrim View to constrain its top side to the top side of the button -- no margin included here. A constraint connects to a target, and can have a (positive) margin in addition to it; margins will only apply to existing connections.

If we could use negative margins, you could set one on the top constraint of the scrim view. Alas, this is not authorized at the moment. What you can do instead is use a Space view to simulate that -- have it be constrained to the top of the button, and then constrain the top of the scrim view to the top of the Space view, like this:

<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/scrim"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#99ff00ff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/topButton" />

    <Space
        android:id="@+id/topButton"
        android:layout_width="8dp"
        android:layout_height="8dp"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintLeft_toLeftOf="@+id/button" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="Button Text"
        app:layout_constraintBottom_toTopOf="@+id/label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <TextView
        android:id="@+id/label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="Label Text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>