Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MotionLayout - Android Study Jams 2021

GDG Montreal
September 29, 2021

MotionLayout - Android Study Jams 2021

GDG Montreal

September 29, 2021
Tweet

More Decks by GDG Montreal

Other Decks in Technology

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