Intro to Motion Layout - Lightning Talk

A short introduction to what MotionLayout is, why you should and how you can use it. Presented on 02/10/18 @GDG Hamburg Android October Meetup.

Transcript

3. Freelance Android Developer GDG Hamburg Android Orga
10. <android.support.constraint.motion.MotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent"/> </android.support.constraint.motion.MotionLayout>
11. <android.support.constraint.motion.MotionLayout android:id="@+id/motionLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:layoutDescription="@xml/scene_01"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:background="@color/colorAccent"/> </android.support.constraint.motion.MotionLayout>
13. <MotionScene …> <Transition motion:constraintSetStart="@layout/constraints_start" motion:constraintSetEnd="@layout/constraints_end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> </MotionScene>
14. <MotionScene …> <Transition motion:constraintSetStart="@layout/constraints_start" motion:constraintSetEnd="@layout/constraints_end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> </MotionScene>
15. <MotionScene …> <Transition motion:constraintSetStart="@layout/constraints_start" motion:constraintSetEnd="@layout/constraints_end" motion:duration="1000"> <OnSwipe motion:touchAnchorId="@+id/button" motion:touchAnchorSide="right" motion:dragDirection="dragRight" /> </Transition> </MotionScene>
16. <android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" android:background="@color/colorAccent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
17. <android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginStart="8dp" android:background="@color/colorAccent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
18. <android.support.constraint.ConstraintLayout android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/button" android:layout_width="64dp" android:layout_height="64dp" android:layout_marginEnd="8dp" android:background="@color/colorAccent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
20. <MotionScene …> <Transition motion:constraintSetStart="@layout/constraints_start" motion:constraintSetEnd="@layout/constraints_end" motion:duration="1000"> <OnClick motion:target="@+id/button" motion:mode="toggle" /> </Transition> </MotionScene>
22. <Transition motion:constraintSetEnd="@layout/constraints_start" motion:constraintSetStart="@layout/constraints_end" motion:duration="1000"> <OnClick motion:mode="toggle" motion:target="@+id/button" /> <KeyFrameSet> <KeyPosition motion:framePosition="50" motion:keyPositionType="pathRelative" motion:percentY="-0.25" motion:target="@id/button" /> </KeyFrameSet> </Transition>
24. <Transition motion:constraintSetEnd="@layout/constraints_start" motion:constraintSetStart="@layout/constraints_end" motion:duration="1000"> <OnClick motion:mode="toggle" motion:target="@+id/button" /> <KeyFrameSet> <KeyPosition motion:framePosition="25" motion:keyPositionType="pathRelative" motion:percentY="-0.25" motion:target="@id/button" /> <KeyPosition motion:framePosition="50" motion:keyPositionType="pathRelative" motion:percentY="0" motion:target="@id/button" /> <KeyPosition motion:framePosition="75" motion:keyPositionType="pathRelative" motion:percentY="-0.25" motion:target="@id/button" /> </KeyFrameSet> </Transition>