Infinum android talks_10_implementing material design

Implementing Material Design Filip Vinković

Overview

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

Activity & Fragment transitions

• A starts B: – A exit transition – B enter transition

• B starts A: – B return transition – A reenter transition

4

Activity & Fragment transitions

• Content transitions • Shared element transitions • Enabled by default when using a Material

theme or by calling:

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

Content transitionsActivity A (HomeActivity)

Activity B (DetailActivity)

Content transitions

Slide text container from the bottom

10

Slide the black background to the top

Slide text container to the bottom

Fade out the toolbar

Content transitions

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

Shared element transitions

• transitionName in xml • View.setTransitionName()

Shared element transitionsActivity A (HomeActivity)

Activity B (DetailActivity)

Circular reveal

Circular reveal

17

Circular reveal

• Call after layout is measured and laid out

Recycler view animations

Recycler view animations

View pager animations

• ViewPager.PageTransformer interface • Implement transformPage(View view, float

position) method 

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/