How to specify margins for Barrier in Constraintlayout

Question

I am unsure about the best way to specify margins in ConstraintLayout around a Barrier.

I tried setting them in the barrier element, but this has no effect and I also couldn't find any documentation on that.

   <androidx.constraintlayout.widget.Barrier
            android:id="@+id/detail_barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="top"
            android:layout_marginBottom="8dp"
            app:constraint_referenced_ids="detail_header_1,detail_header_2" />

Answer 1

Using what azEf recommended works, but you need 2 views instead of 1, and also the barrier will look off at the Layout Preview. The built-in way to do this is app:barrierMargin. Example:

    <ImageView
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_available"
        app:layout_constraintStart_toStartOf="@id/panelStart" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/iconEnd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierMargin="10dp"
        android:orientation="vertical"
        app:barrierDirection="end"
        app:constraint_referenced_ids="icon" />

    <TextView
        style="@style/title_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:maxLines="2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@id/iconEnd"
        tools:text="Title" />

Answer 2

You could constrain a Space view to the barrier and add the margin on it.

<androidx.constraintlayout.widget.Barrier
            android:id="@+id/detail_barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="top"
            app:constraint_referenced_ids="detail_header_1,detail_header_2" />

<Space
            android:id="@+id/detail_space"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            app:layout_constraintTop_toTopOf="@id/details_barrier" />

Answer 3

This maybe coming late but for any that would come across same problem in the future, you can simply give a height or width instead of wrap_content to your Spacer and that solves the marginTop or marginBottom, marginStart or marginEnd issue as the case maybe be.

 <ImageView
            android:id="@+id/btn_more"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/_8sdp"
            android:background="@drawable/ripple"
            android:clickable="true"
            android:contentDescription="@string/image_content"
            android:focusable="true"
            android:src="@drawable/ic_baseline_more_vert_24"
            android:textAllCaps="false"
            android:textColor="@color/colorAccent"
            app:layout_constraintBottom_toBottomOf="@id/tv_header"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/tv_header" />

        <Space
            android:id="@+id/spacer"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_8sdp"
            app:layout_constraintTop_toBottomOf="@id/btn_more"/>

        <View
            android:id="@+id/v_menu"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_marginStart="@dimen/_8sdp"
            app:layout_constraintEnd_toStartOf="@+id/v_menu2"
            app:layout_constraintHorizontal_weight="1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/spacer" />