Unwanted gap in MotionLayout after child-item collapse

Question

Im studying how to work with MotionLayout right now and each project facing strange problem with unwanted white gap at the bottom of parent frame after my TextView (or TextView wrapped by other frame) collapsing. That gap could be bigger or smaller - I cant detect similarities. Anyway i tried to delete all paddings and margins - it didnt work.

First few projects was loaded by RecyclerView or ViewPager2 and I thought that was the main problem. So I decide to make a simple project with only 2 items on the screen and do some researches. And I failed again.

I guess im losing some basic rules but cant google it or google anything similar to my problem. Hope u can help me with that.

How it looks like: gif-image

Activity Layout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    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:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity"
    android:layout_margin="16dp"
    app:cardCornerRadius="20dp"
    android:id="@+id/cardView">

    <androidx.constraintlayout.motion.widget.MotionLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layoutDescription="@xml/activity_main_xml_constraintlayout_scene">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="#072776"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:alpha="0"
            android:background="#fdb766"
            android:text="@string/loremipsum"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.motion.widget.MotionLayout>

</androidx.cardview.widget.CardView>

Motion Layout:

<?xml version="1.0" encoding="utf-8"?>
<MotionScene 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:motion="http://schemas.android.com/apk/res-auto">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="800">

        <OnClick motion:targetId="@+id/constraintLayout"/>

    </Transition>

    <ConstraintSet android:id="@+id/start">
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">

        <Constraint android:id="@+id/textView"
            android:layout_height="match_parent"
            motion:layout_constraintTop_toBottomOf="@+id/imageView"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            android:alpha="1"/>

    </ConstraintSet>
</MotionScene>

Answer 1

The white is probably the card showing through. You can test what it is by setting the color of the MotionLayout and the CardView. Generally what is happening is the Text is fading before the MotionLayout is collapse.

Reveling the cardView below.

There are many ways to get the animation you are looking for. I would do one of:

• set the MoionLayout background to #072776
• Make the ImageView go from 200dp to match_parent
• Set the CardView color