Kotlin Bottom Sheet Animation

Viewed 138

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>
0 Answers
Related