ConstraintLayout не работает должным образом в представлении нижнего листа

Question

Выпуск

ConstraintLayout не работает должным образом при использовании в нижнем листе. В этом случае ConstraintLayout содержит 2 изображения, содержащие дескриптор, и 1 представление для содержимого в нижнем листе. Предполагается, что представление содержимого должно находиться под дескриптором изображений, чего не происходит.

Осуществление

<androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/bottomSheet"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

            <ImageView
                android:id="@+id/bottom_handle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/ic_bottom_sheet_handle"
                android:contentDescription="@string/saved_bottomsheet_handle_content_description"
                android:elevation="16dp"
                android:src="@drawable/ic_save_planet_dark_48dp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="@dimen/bottom_sheet_elevation_height"
                android:background="@color/bottom_sheet_handle_elevation"
                android:contentDescription="@string/saved_bottomsheet_handle_content_description"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/bottom_handle" />

            <FrameLayout
                android:id="@+id/savedContentContainer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/white"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@id/bottom_handle" />

        </androidx.constraintlayout.widget.ConstraintLayout>

Результат

Панель действий в представлении содержимого располагается за представлениями дескриптора.

Ожидаемый результат

Дескриптор находится над окном содержимого и панелью действий.

Возможное решение

Если бы я предпочел использовать ConstraintLayout вместо RelativeLayout, здесь работает RelativeLayout.

<RelativeLayout
            android:id="@+id/bottomSheet"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:elevation="16dp"
            app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

            <ImageView
                android:id="@+id/bottom_handle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/ic_bottom_sheet_handle"
                android:contentDescription="@string/saved_bottomsheet_handle_content_description"
                android:elevation="16dp"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:src="@drawable/ic_save_planet_dark_48dp" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="@dimen/bottom_sheet_elevation_height"
                android:background="@color/bottom_sheet_handle_elevation"
                android:contentDescription="@string/saved_bottomsheet_handle_content_description"
                android:layout_alignBottom="@id/bottom_handle"/>

            <FrameLayout
                android:layout_below="@id/bottom_handle"
                android:id="@+id/savedContentContainer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/white" />

        </RelativeLayout>

Answer 1

Использование match_parent для детей ConstraintLayout не рекомендуется, как указано в документации :

Важно: MATCH_PARENT не рекомендуется для виджетов, содержащихся в ConstraintLayout. Подобное поведение можно определить с помощью MATCH_CONSTRAINT с соответствующим левым / правым или верхним / нижним ограничения устанавливаются на «родительский».

В вашем случае установка высоты на match_parent для FrameLayout заставляет его брать высоту родителя независимо от ограничений.

Вместо использования match_parent вы должны добавить нижнее ограничение для FrameLayout и использовать от 0dp до match_constraint для высоты:

<FrameLayout
    android:id="@+id/savedContentContainer"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@android:color/white"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/bottom_handle" />

Answer 2

попробуйте изменить это в макете ограничения

<FrameLayout
 ....

     android:layout_height="wrap_content"
     android:layout_width= "wrap_content"
>