MotionLayout - Android Study Jams 2021

Transcript

1. This work is licensed under the Apache 2.0 License
   North America Android
   Study Jams
   

   View Slide

2. This work is licensed under the Apache 2.0 License
   Start here:
   g.co/android/studyjams
   Collect your first badge!
   

   View Slide

3. This work is licensed under the Apache 2.0 License
   TOPIC DATE
   Intro Coroutine Sept 22
   Return on Coroutine and intro to
   MotionLayout
   Sept 29
   Return on MotionLayout and intro
   Using Hilt in your Android Apps
   Oct 6
   Return on Hilt and intro to Advanced
   WorkManager
   Oct 13
   Return on Advanced WorkManager
   and intro to Advanced Testing:
   Survey of Topics
   Oct 20
   Return on Advanced Testing and intro
   to Jetpack Compose Basics
   Oct 27
   Return on Jetpack Compose Basics
   and thank you
   Nov 3
   Android study Jam
   Schedule
   

   View Slide

4. This work is licensed under the Apache 2.0 License
   Modern Android Development : MotionLayout
   Android Study Jams
   

   View Slide

5. This work is licensed under the Apache 2.0 License
   Learning Objectives
   ० How to add rich motion into your Android app.
   ० Animate anything that you can build using ConstraintLayout.
   ० Animate the location, size, visibility, alpha, color, elevation,
   rotation, and other attributes of multiple views at the same
   time.
   ० Create coordinated animations, involving multiple views,
   using declarative XML that are difficult to achieve in code.
   ० Animate collapsible headers with MotionLayout
   

   View Slide

6. This work is licensed under the Apache 2.0 License
   ० Familiarity with ConstraintLayout. Check this
   codelab to learn more about ConstraintLayout.
   ० Experience with Kotlin and XML syntax.
   ० Android Studio 4.0 or higher.
   Prerequisites
   

   View Slide

7. This work is licensed under the Apache 2.0 License
   Concept Overview
   What is MotionLayout?
   

   View Slide

8. This work is licensed under the Apache 2.0 License
   You can think of it in terms of capabilities as a mix between
   the property animation framework, TransitionManager, and
   CoordinatorLayout.
   : Nicolas Roard
   Source : https://medium.com/google-developers/introduction-to-motionlayout-part-i-29208674b10d
   

   View Slide

9. This work is licensed under the Apache 2.0 License
   It’s fully declarative
   You can describe the complex
   transitions in XML — no code is
   expected.
   

   View Slide

10. This work is licensed under the Apache 2.0 License
    Major components
    ★ Transition
    ○ KeyFrameSet
    ■ KeyAttribute
    ■ KeyPosition
    ■ KeyCycle
    ■ KeyTrigger
    ■ KeyTimeCycle
    ○ OnSwipe
    ○ OnClick
    ★ Start ConstraintSet
    ★ End ConstraintSet
    

    View Slide

11. This work is licensed under the Apache 2.0 License
    Available in Android Studio 4.0 & higher
    Motion Editor
    

    View Slide

12. This work is licensed under the Apache 2.0 License
    Quick tips
    

    View Slide

13. This work is licensed under the Apache 2.0 License
    What you’ll do
    ● Define an animation with ConstraintSets and MotionLayout
    ● Animate based on drag events
    ● Change the animation with KeyPosition
    ● Change attributes with KeyAttribute
    ● Run animations with code
    ● Animate collapsible headers with MotionLayout
    

    View Slide

14. This work is licensed under the Apache 2.0 License
    Let’s get started
    

    View Slide

15. This work is licensed under the Apache 2.0 License
    Start here:
    https://codelabs.developers.google.com/codelabs/motion-layou
    t#0
    Collect your badges!
    

    View Slide

16. This work is licensed under the Apache 2.0 License
    Share what you’ve
    learned with
    #AndroidStudyJams
    #gdgmtl
    

    View Slide

17. This work is licensed under the Apache 2.0 License
    ● Medium
    ● Twitter
    ● LinkedIn
    ● Github
    Stay in touch
    

    View Slide

18. This work is licensed under the Apache 2.0 License
    Learn More
    

    View Slide

19. This work is licensed under the Apache 2.0 License
    Want to learn more about MotionLayout?
    ● MotionLayout
    ● MotionEditor
    ● KeyCycle
    ● Medium article series on MotionLayout
    Version 1.0
    

    View Slide

20. This work is licensed under the Apache 2.0 License
    Want to learn more?
    ● Official Android Developers Site: https://developer.android.com/
    ● Android Samples on GitHub
    ● Official Android Developers Blog (for announcements)
    ● Android Developers Medium Blog (for more technical articles)
    ● Android Developers YouTube channel
    ● Follow @AndroidDev on Twitter
    ● Subscribe to the Android Developer Newsletter
    ● Official Kotlin language site
    Version 1.0
    

    View Slide

21. This work is licensed under the Apache 2.0 License
    Have a Question? Just ask
    Join our slack : bit.ly/gdgmontrealslack
    Joins our channel : #android-study-jams-2021
    

    View Slide

22. This work is licensed under the Apache 2.0 License
    Welcome back
    And congrats!
    

    View Slide

23. This work is licensed under the Apache 2.0 License
    Recap of MotionLayout
    ० MotionScene
    ० ConstraintSet
    ० Constraint
    ० Transition
    ० KeyFrameset
    ० KeyAttribute
    

    View Slide