Android Transitions - Speaker Deck

Slide 1

Slide 1 text

Transitions Bryan Herbst Android Engineer @ Target

Slide 2

Slide 2 text

Abrupt transitions are jarring

Slide 3

Slide 3 text

Smooth transitions provide continuity

Slide 4

Slide 4 text

Smooth transitions keep users engaged

Slide 5

Slide 5 text

Smooth transitions delight users

Slide 6

Slide 6 text

“In the world of material design, motion describes spatial relationships, functionality, and intention with beauty and fluidity.”

Slide 7

Slide 7 text

Android Transitions  Activity to Activity  Fragment to Fragment  Scene to Scene (Views)

Slide 8

Slide 8 text

Hold on…  Requires API 21

Slide 9

Slide 9 text

Hold on…   Progressive enhancement, graceful degradation

Slide 10

Slide 10 text

Hold on…    Support APIs offer default behavior on older versions

Slide 11

Slide 11 text

Scenes Snapshot of a ViewGroup

Slide 12

Slide 12 text

Scene transition TransitionManager.beginDelayedTransition(rootView, new Fade()); button.setVisibility(View.INVISIBLE);

Slide 13

Slide 13 text

What is this black magic?

Slide 14

Slide 14 text

How it works 1. beginDelayedTransition() => Take a snapshot of ViewGroup 2. Update Views 3. On next layout pass, Android takes another snapshot and creates animations

Slide 15

Slide 15 text

How it works 1. beginDelayedTransition() => Take a snapshot of ViewGroup

Slide 16

Slide 16 text

How it works 1. beginDelayedTransition() => Take a snapshot of ViewGroup 2. Update Views

Slide 17

Slide 17 text

Transition types  Fade  Explode  Slide  ChangeBounds  AutoTransition  Fade  Move  Resize

Slide 18

Slide 18 text

What about property animation? ObjectAnimator.ofFloat(button, "alpha", 1f, 0f) .start();

Slide 19

Slide 19 text

What about property animation? button.animate().alpha(0f);

Slide 20

Slide 20 text

What about property animation? Fine if you want to think about Views individually

Slide 21

Slide 21 text

What about property animation? Fine if you want to think about Views individually Scenes allow us to think in groups

Slide 22

Slide 22 text

Activities With shared elements

Slide 23

Slide 23 text

Activity Transitions- setup  Request Window.FEATURE_ACTIVITY_TRANSITIONS and Window.FEATURE_CONTENT_TRANSITIONS in both Activities

Slide 24

Slide 24 text

Activity Transitions- setup   Set a transition name on the View in both Activities

Slide 25

Slide 25 text

What are these transition names? An ID for the transition framework

Slide 26

Slide 26 text

Rule #1 All animating Views must have a transition name

Slide 27

Slide 27 text

Rule #2 All transition names must be unique within a layout

Slide 28

Slide 28 text

Not a rule #1 Transition names don’t need to match between layouts

Slide 29

Slide 29 text

Activity Transitions- setup  Create a Bundle with ActivityOptions .makeSceneTransitionAnimation(activity, sharedView, viewTransitionName) .toBundle();

Slide 30

Slide 30 text

Activity Transitions- setup   Set your Transitions

Slide 31

Slide 31 text

Activity Transitions- setup    Call startActivity(intent, transitionBundle);

Slide 32

Slide 32 text

Specifying shared elements makeSceneTransitionAnimation(activity, sharedView, transitionName); We specify pairs of Views and transition names.

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Specifying shared elements makeSceneTransitionAnimation(activity, sharedView, transitionName); We specify pairs of Views and transition names. The sharedView is the original view in our current layout (the starting state) The viewTransitionName is the name of the corresponding view in the new layout (the ending state)

Slide 35

Slide 35 text

Activity transitions magic Captures Views in first Activity, then second Activity

Slide 36

Slide 36 text

Activity Transitions use the Window e.g. getWindow().setEnterTransition(new Fade());

Slide 37

Slide 37 text

Four transition types  Enter  Exit  Reenter  Return

Slide 38

Slide 38 text

Four transition types  Enter

Slide 39

Slide 39 text

Four transition types  Exit

Slide 40

Slide 40 text

Four transition types  Reenter

Slide 41

Slide 41 text

Four transition types  Return

Slide 42

Slide 42 text

Four transition types x2 with Shared elements

Slide 43

Slide 43 text

Or not Stick with enter and return for shared elements

Slide 44

Slide 44 text

Shared exit and reenter Allow for animation before the transition

Slide 45

Slide 45 text

Sample  Exit, shared enter, enter

Slide 46

Slide 46 text

Sample  Reenter, shared return, return

Slide 47

Slide 47 text

A note on timing Because sometimes Views don’t exist right away

Slide 48

Slide 48 text

Delayed transitions  postponeEnterTransition();  startPostponedEnterTransition();

Slide 49

Slide 49 text

WARNING!  Blocks transition

Slide 50

Slide 50 text

WARNING!  Blocks transition 

Slide 51

Slide 51 text

WARNING!    Prefetch or find clever alternatives

Slide 52

Slide 52 text

Fragment example

Slide 53

Slide 53 text

Transition setup setExitTransition(new Fade()); Fade out non-shared elements

Slide 54

Slide 54 text

Transition setup newFrag.setSharedElementEnterTransition(new AutoTransition()); AutoTransition shared elements

Slide 55

Slide 55 text

Transition setup newFrag.setEnterTransition(new Fade()); Fade in non-shared elements

Slide 56

Slide 56 text

Making the transition fragmentManager.beginTransaction() .replace(R.id.container, newFrag) .addSharedElement(sharedView, "transitionName") .commit();

Slide 57

Slide 57 text

What about delayed transitions?  Ugh. It isn’t good in Fragments.

Slide 58

Slide 58 text

I didn’t want to animate that!

Slide 59

Slide 59 text

Targets- includes

Slide 60

Slide 60 text

Targets- excludes

Slide 61

Slide 61 text

Support for <21

Slide 62

Slide 62 text

Support for <21 ActivityOptions => ActivityOptionsCompat .makeSceneTransitionAnimation(activity, view, name)

Slide 63

Slide 63 text

Support for <21 startActivity(intent, transitionBundle); Has existed since API 16!

Slide 64

Slide 64 text

Support for <21 Transition names  android:transitionName="name" is ignored on older versions  ViewCompat.setTransitionName(view, “name);

Slide 65

Slide 65 text

Support for <21 Delaying transitions  supportPostponeEnterTransition();  supportStartPostponedEnterTransition();

Slide 66

Slide 66 text

Support for <21 Specifying transitions The only place we need a version check if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { getWindow().setEnterTransition(new Fade()); }