How to give vertical margin to constraint layout group?

Question

So I have a few view that I group it using constraint layout group. I want to give vertical margin to the group as I do if I group it using linear/relative layout. add android:layout_marginVertical="100dp" doesn't seem to work.

Answer 1

Groups don't work like that. Take a look at ConstraintLayout's Layer widget available since version 2.0. You can search for tutorials on the use of Layer . In a nutshell, Layer will allow you to group widgets similar to a ViewGroup but will maintain a flat layout structure. If the views contained with the layer can be constrained to the layer itself, the whole layer will accept a top margin.

For example, take the following layout:

The blue is the background for the layer. The top/bottom, right/left views are contained within the layer and are constrained to it. The top margin of 100dp is set on the Layer . "Outside view" is a TextView that is constrained to the "Bottom right" TextVIew which is contained within the Layer something that can't be done if Layer is replaced by a ViewGroup .

The views may still be contained within a Group for group manipulations.

Here is the XML for this layout:

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.constraintlayout.helper.widget.Layer
        android:id="@+id/layer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="100dp"
        android:background="@android:color/holo_blue_light"
        app:constraint_referenced_ids="topLeft,topRight,bottomLeft,bottomRight"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/topLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="Top left"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintStart_toStartOf="@id/layer"
        app:layout_constraintTop_toTopOf="@id/layer" />

    <TextView
        android:id="@+id/topRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="Top right"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintStart_toStartOf="@+id/bottomRight"
        app:layout_constraintTop_toTopOf="@id/layer" />

    <TextView
        android:id="@+id/bottomLeft"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="Bottom left"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintStart_toStartOf="@id/layer"
        app:layout_constraintTop_toBottomOf="@+id/topLeft" />

    <TextView
        android:id="@+id/bottomRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="Bottom right"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintStart_toEndOf="@+id/bottomLeft"
        app:layout_constraintTop_toBottomOf="@+id/topRight" />

    <TextView
        android:id="@+id/outsideView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="Outside view"
        android:textAppearance="@style/TextAppearance.AppCompat.Display1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/bottomRight" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

what you are trying to do is not correct.

ConstraintLayout Group can be used to "group" some references of different views or widgets and set their visibility (you can set the visibility of the group and all views will get it). It's not a fisical group like a LinearLayout can make.

Please, take a look at the documentation

https://developer.android.com/reference/androidx/constraintlayout/widget/Group

This class controls the visibility of a set of referenced widgets. The visibility of the group will be applied to the referenced widgets. It's a convenient way to easily hide/show a set of widgets without having to maintain this set programmatically.

For what you want to do, you should use a Layout (LinearLayout, ConstraintLayout...) and group that views inside the layout and finally give the desired margin to this layout.