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" />

Add the margin for the element against the barrier, the elements that are gonna be pushed by the barrier — cutiko, Oct 28 '19 at 12:29
Thanks @cutiko , I already tried that, the problem is that then I need to add the margin to all the elements, I wanted to avoid this redundancy by using a barrier — Display name, Oct 28 '19 at 12:49
That is how constraint layout margins work, you can't push away one element with others, but the element setting the constraint to another can distance itself from that — cutiko, Oct 28 '19 at 13:02
@Displayname If you only need the margin with the `Barrier` so that you can set same margin for all constrained elements, would using `GuideLine` make more sense? This way you could set `app:layout_constraintGuide_end` and `app:layout_constraintGuide_start`. — theThapa, Oct 31 '19 at 20:57
@theThapa I used the Barrier because it depends on specific views and not just on a margin from the edges, because as far as I understood Guidelines can't be dependant on specific views — Display name, Nov 04 '19 at 09:49
@Displayname Can you please post full xml view to help picture what you are intending to do? — theThapa, Nov 05 '19 at 14:30

score 35 · Answer 1 · answered Sep 04 '20 at 13:13

35

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" />

answered Sep 04 '20 at 13:13

Carsten Hagemann

957
10
23

1

There's no such thing as app:barrierMargin="" – Kristy Welsh Oct 01 '20 at 19:56
7

It does indeed exist. It's declared as ``. It could be that this was introduced with ConstraintLayout 2.0, and you are still using 1.x? – Carsten Hagemann Oct 02 '20 at 09:37
this will add margin for both sides: top/bottom or start/end – Choletski Feb 23 '21 at 12:19
Works great! But `android:orientation="vertical"` is redundant – Konstantin Konopko Aug 10 '21 at 16:53
1

In my case margin in negative worked `app:barrierMargin="@dimen/_minus12sdp"` – Kamal Nayan Nov 10 '22 at 19:25

score 3 · Answer 2 · answered Aug 22 '20 at 11:23

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" />

score 1 · Answer 3 · answered Apr 05 '22 at 09:30

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" />

score 0 · Answer 4 · answered Jan 30 '23 at 03:35

0

We can also use a View constraint with the Barrier with width or height set as 0dp, that way it won't be seen in the UI just like the Bar, but help provide constraint to other views.

answered Jan 30 '23 at 03:35

Vikas Pandey

1,115
1
15
25

How to specify margins for Barrier in Constraintlayout

4 Answers4