Everyday Animations in Android

Animation is often seen as a nice-to-have or gratuitous in software projects. In truth, animations actually exist to improve an app's user experience. Animations help users understand state changes, guide them to notice meaningful information, gather focus to a required action, or express relationships between UI elements. This session examines traditional techniques using property and drawable animations, as well as the new MotionLayout introduced at Google I/O 2018. These techniques can expand content, display state, move elements, and highlight important controls. Properly executed animation effects are applicable to buttons, lists, and images in any Android app, taking an app's user experience from good to great.

Transcript

1. David Truxall, Ph.D. Everyday Animations https://github.com/davetrux/everyday-animation
2. About Me @davetrux https://davidtruxall.com spnsurvivors.org
3. Slides and Code https://github.com/davetrux/everyday-animation
4. Why?
5. User Experience
6. Expectation
7. Continuity
8. Narrative
9. Relationship
10. Agenda Animation Basics in Android Specific Use Cases to Improve UX
11. Animation Types ❖ View Animation ❖ Property Animation ❖ Layout Animation ❖ Physics Animation ❖ MotionLayout
12. View Animations Just don’t
13. Property Animations view.setOnClickListener { onStartAnimation() } ...... fun onStartAnimation() { val animator = ValueAnimator.ofFloat(0f, -screenHeight) animator.addUpdateListener { val value = it.animatedValue as Float rocket.translationY = value } animator.interpolator = LinearInterpolator() animator.duration = 1000 animator.start() }
14. Layout Animations
15. Physics Animations ❖ Spring ❖ Fling
16. MotionLayout 1.Define starting and ending constraints 2.Move constraints to a Scene XML file 3.Define a trigger Layout Scene Constraint Set Start Constraint Set End Trigger Key Frames
17. Use Cases
18. Caveats ❖ No Libraries ❖ Complexity == High ❖ Slow animations ❖ More than one way
19. App Architecture ❖ Kotlin ❖ Architecture Components ❖ MVVM ❖ LiveData ❖ Room ❖ Navigation ❖ Fragments
20. Call Attention to Element
21. Cascade Tiles in A List
22. Button Reflects State
23. Connect Shared Elements
24. Moving Content
25. MotionLayout 1.Define starting and ending layouts 2.Move constraints to a Scene XML file 3.Define a trigger Layout Scene Constraint Set Start Constraint Set End Trigger Key Frames
26. Menu In Context
27. Accessibility
28. User Experience MotionLayout Property Animation Layout Animation Code XML Expectation Continuity Narrative Relationship Constraints
29. Slides and Code https://github.com/davetrux/everyday-animation @davetrux