Material design brings UI elements composed of pieces of digital paper and ink. Let's see how we can create alive and fluid apps by implementing animations, adding visual response to user interaction and using elements like cards and floating action buttons. https://www.youtube.com/watch?v=9yxj9bxQ9H4

1. Implementing Material Design
Filip Vinković

2. Overview
• Activity & Fragment transitions
• Circular reveal
• Recycler view animations
• View pager animations

3. Activity & Fragment transitions
• A starts B:
– A exit transition
– B enter transition
• B starts A:
– B return transition
– A reenter transition

4. 4

5. Activity & Fragment transitions
• Content transitions
• Shared element transitions
• Enabled by default when using a Material
theme or by calling:

6. Content transitions
• Determines how non-shared elements exit
or enter the scene
• Android 5.0 offers these enter/exit
transitions:
– Explode
– Fade
– Slide
• Create custom transition by extending the
Transitions class

7. 7

8. Content transitions
Activity A (HomeActivity)
Activity B (DetailActivity)

9. Content transitions
Slide text container from the bottom

10. 10
Slide the black
background to the
top
Slide text container
to the bottom
Fade out the
toolbar
Content transitions

12. Shared element transitions
• Determines how views that are shared
between two activities transition between
these activities
• Android 5.0 offers these animations:
– changeBounds
– changeClipBounds
– changeTransform
– changeImageTransform

13. 13
Shared element transitions
• transitionName in xml
• View.setTransitionName()

14. Shared element transitions
Activity A (HomeActivity)
Activity B (DetailActivity)

15. Circular reveal

16. Circular reveal

17. 17
Circular reveal
• Call after layout is measured and laid out

18. Recycler view animations

19. Recycler view animations

21. View pager animations
• ViewPager.PageTransformer interface
• Implement transformPage(View view, float
position) method

23. Thank you
• http://github.com/fvink/MaterialAnimationsDemo
• http://www.androiddesignpatterns.com/2014/12/
activity-fragment-transitions-in-android-lollipop-
part1.html
• http://frogermcs.github.io/Instagram-with-Material-
Design-concept-is-getting-real-the-summary/