Search code examples
androidandroid-animationandroid-constraintlayoutandroid-motionlayout

MotionLayout rotate image and resetting rotation android

I'm rotating an imageview using MotionLayout.

First click, image rotate clockwise, that's what i want.

But second click, image rotate counterclockwise. I tried some way to reset state of image but it doesn't work. Can i have a advise???

<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="1500">
        <OnClick motion:clickAction="toggle"
            motion:targetId="@id/img_reload_cast_dialog"/>
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/img_reload_cast_dialog"
            motion:layout_constraintEnd_toStartOf="@id/img_help_cast_dialog"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/_20sdp"
            motion:layout_constraintTop_toTopOf="parent" >
            <Transform android:rotation="0" />
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@+id/img_reload_cast_dialog"
            motion:layout_constraintEnd_toStartOf="@id/img_help_cast_dialog"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="@dimen/_20sdp"
            motion:layout_constraintTop_toTopOf="parent" >
            <Transform android:rotation="720" />
        </Constraint>
    </ConstraintSet>

</MotionScene>
Solution

  • I think I figured out what you wanted. You want a button that goes from rotate the view and essentially stays in start state

    There are several ways to do this.

    Probably the simplest from your your current XML is to add

    motion:autoTransition="jumpToStart"

    to you transition. Alternative is to add another transition from end to start that is auto transition and duration 0.

      <Transition
        motion:constraintSetEnd="@+id/start"
        motion:constraintSetStart="@id/end"
        motion:autoTransition="jumpToStart"
 
    
     //>

    see MotionTags video on Transition for an overview

    Other approaches are