0

i want to implement stretch functionality on swipe in constraint layout 2.1. i have motionlayout that i want to expand on swipe down of view. if i use new Spring properties i'm getting nice overshoot effect only if i let transition auto complete but if i complete animation fully with swipe it stops without any spring effect. i want to have overstretch effect and when i release it there should be some spring animation based on spring values. is it possible?

Here is my current code

<androidx.constraintlayout.motion.widget.MotionLayout
        android:id="@+id/motionLayout"
        app:layoutDescription="@xml/scene_02"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        android:focusableInTouchMode="false"
        android:background="@color/black_semi"
        app:layout_constraintStart_toStartOf="parent">

        <View
            android:id="@+id/area"
            android:layout_width="1dp"
            android:layout_height="1dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
             />
        <View
            android:id="@+id/button"
            android:background="@color/error_red"
            android:layout_width="164dp"
            android:layout_height="34dp"
            android:layout_marginBottom="10dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            />

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

Motion file

<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="1000">
        <OnSwipe
            motion:springStiffness="80"
            motion:springDamping="5"
            motion:autoCompleteMode="spring"
            motion:dragDirection="dragDown"
            motion:touchAnchorId="@id/button"
            motion:touchRegionId="@id/button"
            motion:touchAnchorSide="bottom" />
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint android:id="@id/button">
            <Layout
                android:layout_width="164dp"
                android:layout_height="34dp"
                motion:layout_constraintTop_toTopOf="parent"
                motion:layout_constraintStart_toStartOf="parent"
                motion:layout_constraintEnd_toEndOf="parent"
                android:layout_marginTop="20dp" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet
        android:id="@+id/end"
        motion:deriveConstraintsFrom="@id/start">
        <Constraint android:id="@id/button"
            motion:quantizeMotionInterpolator="overshoot">
            <Layout
                android:layout_width="164dp"
                android:layout_height="34dp"
                motion:layout_constraintTop_toTopOf="parent"
                motion:layout_constraintStart_toStartOf="parent"
                motion:layout_constraintEnd_toEndOf="parent"
                android:layout_marginTop="200dp" />
        </Constraint>
    </ConstraintSet>

</MotionScene>
AVT
  • 23
  • 1
  • 4
  • dude, leave the motion layout behind, u need animation? try to use compose – Mahdi Razzaghi Aug 04 '21 at 15:59
  • i agree Compose has some good animation APIs but for my usecase it will not be very easy to implement. i want to animate multiple view positions based on swipe progress this can be implemented on compose but it will require too much boilerplate code and calculations whereas with motionlayout it will be very easy to do this coordinated animations. motion layout is supported with compose but still not stable so don't want to use it with compose as of now. – AVT Aug 06 '21 at 09:07

0 Answers0