ConstraintLayout wraps only parts of contents

Question

I've a ConstraintLayout that wraps only parts of contents and I don't understand why. Here below the graphical representation of my situation:

I want that my mainConstraintLayout wraps everything. If I change the layout_height of mainConstraintLayout from wrap_content to match_parent I get the following warning and it's still doesn't work:

ScrollView size validation: This androidx.constraintlayout.widget.ConstraintLayout should use android:layout_height="wrap_content". ScrollView children must set their layout_width or layout_height attributes to wrap_content rather than fill_parent or match_parent in the scrolling dimension Issue id: ScrollViewSize

Anyone could help me? Thanks in advance.

Update: xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/mainView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:backgroundTint="@android:color/white"
    tools:context=".activities.EventActivity">

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/mainConstraintLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/eventMainPicture"
                android:layout_width="0dp"
                android:layout_height="200dp"
                android:layout_marginBottom="10dp"
                android:contentDescription="@string/event_image_content_description"
                android:scaleType="fitXY"
                app:layout_constraintBottom_toTopOf="@+id/eventHeaderWrapper"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:srcCompat="@drawable/event_placeholder_image" />

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/eventActionWrapper"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginStart="15dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/eventHeaderWrapper">

                <Button
                    android:id="@+id/willPartecipateButton"
                    style="@android:style/Widget.Material.Button.Inset"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:backgroundTint="@color/primaryBlue"
                    android:paddingLeft="15dp"
                    android:paddingRight="15dp"
                    android:text="@string/event_will_partecipate"
                    android:textColor="@color/primaryOrange"
                    android:textColorHighlight="@color/primaryOrange"
                    android:textColorHint="@color/primaryOrange"
                    android:textColorLink="@color/primaryOrange"
                    android:textSize="14sp"
                    app:layout_constraintEnd_toStartOf="@+id/interestedButton"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <Button
                    android:id="@+id/interestedButton"
                    style="@android:style/Widget.Material.Button.Inset"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:backgroundTint="@color/primaryOrange"
                    android:paddingLeft="15dp"
                    android:paddingRight="15dp"
                    android:text="@string/event_interested"
                    android:textColor="@color/primaryBlue"
                    android:textColorHighlight="@color/primaryOrange"
                    android:textColorHint="@color/primaryBlue"
                    android:textColorLink="@color/primaryBlue"
                    android:textSize="14sp"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintHorizontal_bias="0.5"
                    app:layout_constraintStart_toEndOf="@+id/willPartecipateButton"
                    app:layout_constraintTop_toTopOf="parent" />

            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/eventHeaderWrapper"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginStart="15dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/eventMainPicture">

                <TextView
                    android:id="@+id/eventCreatedBy"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="5dp"
                    android:text="@string/event_createad_by"
                    android:textSize="18sp"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/eventNamePlaceholder" />

                <TextView
                    android:id="@+id/eventCreatorName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="5dp"
                    android:layout_marginTop="5dp"
                    android:text="@string/event_creator_placeholder"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    app:layout_constraintStart_toEndOf="@+id/eventCreatedBy"
                    app:layout_constraintTop_toBottomOf="@+id/eventNamePlaceholder" />

                <TextView
                    android:id="@+id/eventNamePlaceholder"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/event_name_placeholder"
                    android:textColor="@android:color/black"
                    android:textColorHighlight="@android:color/black"
                    android:textColorHint="@android:color/black"
                    android:textColorLink="@android:color/black"
                    android:textSize="28sp"
                    android:textStyle="bold"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/eventInfoWrapper"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:layout_marginTop="10dp"
                android:layout_marginEnd="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/eventActionWrapper">

                <ImageView
                    android:id="@+id/eventDateIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:srcCompat="@drawable/calendar_icon" />

                <ImageView
                    android:id="@+id/eventPositionIcon"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:layout_marginBottom="5dp"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/eventDateIcon"
                    app:srcCompat="@drawable/position_icon" />

                <TextView
                    android:id="@+id/eventDate"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="6dp"
                    android:text="@string/event_date"
                    android:textSize="16sp"
                    app:layout_constraintBottom_toBottomOf="@+id/eventDateIcon"
                    app:layout_constraintStart_toEndOf="@+id/eventDateIcon"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/eventPosition"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="6dp"
                    android:layout_marginTop="10dp"
                    android:text="@string/event_place"
                    android:textSize="16sp"
                    app:layout_constraintBottom_toBottomOf="@+id/eventPositionIcon"
                    app:layout_constraintStart_toEndOf="@+id/eventPositionIcon"
                    app:layout_constraintTop_toBottomOf="@+id/eventDate" />

            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/eventDescriptionWrapper"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginStart="15dp"
                android:layout_marginTop="15dp"
                android:layout_marginEnd="15dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/eventInfoWrapper">


                <TextView
                    android:id="@+id/eventDescriptionTitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/event_description_title"
                    android:textColor="@android:color/black"
                    android:textColorHighlight="@android:color/black"
                    android:textColorHint="@android:color/black"
                    android:textColorLink="@android:color/black"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <TextView
                    android:id="@+id/eventDescription"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="10dp"
                    android:text="@string/event_description"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toBottomOf="@+id/eventDescriptionTitle" />

            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/participantsWrapper"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="15dp"
                android:layout_marginTop="20dp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="parent">

                <TextView
                    android:id="@+id/participantsT"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/event_participants"
                    android:textColor="@android:color/black"
                    android:textColorHighlight="@android:color/black"
                    android:textColorHint="@android:color/black"
                    android:textColorLink="@android:color/black"
                    android:textSize="20sp"
                    android:textStyle="bold"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />
            </androidx.constraintlayout.widget.ConstraintLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>

    <com.github.ybq.android.spinkit.SpinKitView
        android:id="@+id/loadingView"
        style="@style/SpinKitView.Large.CubeGrid"
        android:layout_width="74dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="invisible"
        app:SpinKit_Color="@color/primaryOrange"
        app:layout_constraintBottom_toBottomOf="@+id/scrollView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="@+id/scrollView"
        app:layout_constraintTop_toTopOf="@+id/scrollView" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

You set wrong constraint to participantsWrapper View. You set top of participantsWrapper at bottom of mainConstraintLayout. So, naturally it goes beyond mainConstraintLayout. Try to

Use

app:layout_constraintTop_toBottomOf="@+id/eventDescriptionWrapper"

Instead of

app:layout_constraintTop_toBottomOf="parent"

Answer 2

You don't need to change the layout's height to include everything, you just have to make sure that all views are direct children of the constraint layout. Essentially place all the views that you want within the tags: <androidx.constraintlayout.widget.ConstraintLayout> ...</androidx.constraintlayout.widget.ConstraintLayout>

You might want to consider flattening that layout as well. Make Scrollview the parent layout and make it to match_parent, and then put everything in a single constraint layout and make it's height to wrap_content so that you don't mess up the scrolling.