I have a bottom sheet and a profile picture; When the bottom sheet is dragged up, I would like for the profile picture to react with an animation. I can't seem to get the bottom sheet to correctly link with the profile pic through animation. I can't seem to get anything to work. Any assistance is appreciated.
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
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/motionLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/motion"
tools:context=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.cardview.widget.CardView
android:id="@+id/background_imageView"
android:layout_width="155dp"
android:layout_height="155dp"
android:layout_margin="15dp"
app:cardBackgroundColor="@color/white"
app:cardCornerRadius="250dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="center"
app:cardCornerRadius="250dp">
<ImageView
android:id="@+id/profile_image"
android:layout_width="150dp"
android:layout_height="150dp"
android:scaleType="centerCrop"
android:src="@drawable/profile_image" />
</androidx.cardview.widget.CardView>
</androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/bottomSheetLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_peekHeight="125dp"
app:layout_behavior=".CustomBottomSheetBehavior">
<RelativeLayout
android:id="@+id/bottomSheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>
motion.xml
<?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:constraintSetStart="@+id/start"
motion:constraintSetEnd="@+id/end"
motion:duration="1000">
<KeyFrameSet>
<KeyAttribute
motion:motionTarget="@+id/bottomSheetLayout"
motion:framePosition="100"
android:alpha="0" />
<KeyAttribute
motion:motionTarget="@+id/bottomSheetLayout"
motion:framePosition="50"
android:alpha="0.5" />
<KeyAttribute
motion:motionTarget="@+id/bottomSheetLayout"
motion:framePosition="50"
android:alpha="0" />
<KeyAttribute
motion:motionTarget="@+id/bottomSheetLayout"
motion:framePosition="100"
android:scaleX="0" />
<KeyAttribute
motion:motionTarget="@+id/bottomSheetLayout"
motion:framePosition="100"
android:scaleY="0" />
</KeyFrameSet>
<OnSwipe
motion:touchAnchorId="@+id/bottomSheetLayout"
motion:touchAnchorSide="bottom" />
</Transition>
<ConstraintSet android:id="@+id/start">
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:layout_height="1dp"
android:layout_width="match_parent"
android:id="@+id/bottomSheetLayout" />
</ConstraintSet>
</MotionScene>