Android Transitions

A tour of the Transitions framework in Android

Transcript

1. Transitions
   Bryan Herbst
   Android Engineer @ Target
   

   View Slide

2. Abrupt transitions are jarring
   

   View Slide

3. Smooth transitions provide
   continuity
   

   View Slide

4. Smooth transitions keep users
   engaged
   

   View Slide

5. Smooth transitions delight users
   

   View Slide

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

   View Slide

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

   View Slide

8. Hold on…
    Requires API 21
   

   View Slide

9. Hold on…
   
    Progressive enhancement, graceful degradation
   

   View Slide

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

    View Slide

11. Scenes
    Snapshot of a ViewGroup
    

    View Slide

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

    View Slide

13. What is this black magic?
    

    View Slide

14. 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. Activities
    With shared elements
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. Rule #1
    All animating Views must have a transition name
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. Activity Transitions- setup
    
     Set your Transitions
    

    View Slide

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

    View Slide

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

    View Slide

33. 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)
    

    View Slide

34. 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)
    

    View Slide

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

    View Slide

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

    View Slide

37. Four transition types
     Enter
     Exit
     Reenter
     Return
    

    View Slide

38. Four transition types
     Enter
    

    View Slide

39. Four transition types
     Exit
    

    View Slide

40. Four transition types
     Reenter
    

    View Slide

41. Four transition types
     Return
    

    View Slide

42. Four transition types
    x2 with Shared elements
    

    View Slide

43. Or not
    Stick with enter and return for shared elements
    

    View Slide

44. Shared exit and reenter
    Allow for animation before the transition
    

    View Slide

45. Sample
     Exit, shared enter, enter
    

    View Slide

46. Sample
     Reenter, shared return, return
    

    View Slide

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

    View Slide

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

    View Slide

49. WARNING!
     Blocks transition
    

    View Slide

50. WARNING!
     Blocks transition
    
    

    View Slide

51. WARNING!
    
    
     Prefetch or find clever alternatives
    

    View Slide

52. Fragment example
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

58. I didn’t want to animate that!
    

    View Slide

59. Targets- includes
    
    
    
    
    
    
    
    

    View Slide

60. Targets- excludes
    
    
    
    
    
    
    
    

    View Slide

61. Support for <21
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

66. 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());
    }
    

    View Slide