Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Transitions without Activities or Fragments

Chris Horner
November 05, 2017

Transitions without Activities or Fragments

Android's Transition framework is extremely powerful, but almost all examples involve the use of Activities and Fragments. In a world where many developers are now foregoing Fragments, this talk aims to provide some solid examples and strategies on how to use Transitions without them.

Chris Horner

November 05, 2017
Tweet

More Decks by Chris Horner

Other Decks in Technology

Transcript

  1. Transitions without Activities or
    Fragments
    @chris_h_codes

    View Slide

  2. Transitions are slick

    View Slide

  3. Transitions are slick

    View Slide

  4. Transitions are slick

    View Slide

  5. Not like this

    View Slide

  6. Teleportation sucks

    View Slide

  7. Teleportation sucks

    View Slide

  8. Avoiding an ‘event boundary’

    View Slide

  9. Avoiding an ‘event boundary’
    ?

    View Slide

  10. Walking through doorways causes forgetting:
    Situation models and experienced space
    ?
    * https://doi.org/10.3758/BF03193261

    View Slide

  11. View Slide

  12. View Slide

  13. My Animator code works!
    Animator animator = ObjectAnimator.ofFloat(0f, 10f);
    button.animate()
    .alpha(0)
    .translationY(200);

    View Slide

  14. Transitions are powerful
    • Easier to compose than traditional Animator code

    • Allow for shared elements

    View Slide

  15. Learning about Transitions
    Developers
    Generate Scenes from Layouts
    Apply a Transition without Scenes

    View Slide

  16. Transitions - Google IO
    YouTube
    Now you call

    Activity.makeSceneTransitionAnimation()
    Learning about Transitions

    View Slide

  17. YouTube
    Square - Avoiding Fragments
    Use #fragnums, lol
    Learning about Transitions

    View Slide

  18. This is not a Fragment bashing talk
    • Conductor

    • Flow

    • Pancakes

    • PancakesOnPlates

    • Scoop

    • Cicerone
    • BackStack

    • Magellan

    • Simple Stack

    • Triad

    • Okuki

    • Navi

    View Slide

  19. This talk is about two scenarios
    ViewGroup

    View Slide

  20. This talk is about two scenarios
    ViewGroup
    View1

    View Slide

  21. This talk is about two scenarios
    View1 View2

    View Slide

  22. This talk is about two scenarios
    View2
    View1

    View Slide

  23. This talk is about two scenarios
    TransitionManager.beginDelayedTransition()

    View Slide

  24. This talk is about two scenarios
    TransitionManager.beginDelayedTransition()

    View Slide

  25. Simple layout changes
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    >

    View Slide

  26. android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    >
    blueView.setVisibility(View.VISIBLE);

    View Slide

  27. android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:animateLayoutChanges="true"
    android:orientation="vertical"
    android:padding="16dp"
    >
    The forgotten Honeycomb API

    View Slide

  28. Oreo changes things
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:animateLayoutChanges="true"
    android:orientation="vertical"
    android:padding="16dp"
    >

    View Slide

  29. LayoutTransition layoutTransition = container
    .getLayoutTransition();
    layoutTransition
    .enableTransitionType(LayoutTransition.CHANGING);
    Jelly Bean tricks

    View Slide

  30. android:layout_width="match_parent"
    android:layout_height=“match_parent"
    android:orientation=“vertical”
    android:padding="16dp"
    >
    Using TransitionManager

    View Slide

  31. android:layout_width="match_parent"
    android:layout_height=“match_parent"
    android:orientation=“vertical”
    android:padding="16dp"
    >
    TransitionManager.beginDelayedTransition(container);
    View view = findViewById(R.id.blueView);
    view.setVisibility(View.VISIBLE);

    View Slide

  32. Complex example

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide






  37. android:layout_marginBottom=“280dp”/>

    Make a simple version

    View Slide






  38. android:layout_marginBottom=“280dp”/>

    View Slide








  39. android:layout_marginBottom=“280dp”/>


    View Slide








  40. android:layout_marginBottom=“280dp”/>


    View Slide

  41. android:layout_width=“match_parent”
    android:layout_height=“match_parent”
    >

    View Slide

  42. helpButton.setOnClickListener(v -> {
    TransitionManager.beginDelayedTransition(linearContainer);
    LayoutParams containerParams = linearContainer.getLayoutParams();
    containerParams.height = LayoutParams.WRAP_CONTENT;
    });

    View Slide

  43. helpButton.setOnClickListener(v -> {
    TransitionManager.beginDelayedTransition(linearContainer);
    LayoutParams containerParams = linearContainer.getLayoutParams();
    containerParams.height = LayoutParams.WRAP_CONTENT;
    title.setVisibility(View.GONE);
    instructions.setVisibility(View.GONE);
    helpButton.setVisibility(View.GONE);
    okButton.setVisibility(View.VISIBLE);
    });

    View Slide

  44. helpButton.setOnClickListener(v -> {
    TransitionManager.beginDelayedTransition(linearContainer);
    LayoutParams containerParams = linearContainer.getLayoutParams();
    containerParams.height = LayoutParams.WRAP_CONTENT;
    title.setVisibility(View.GONE);
    instructions.setVisibility(View.GONE);
    helpButton.setVisibility(View.GONE);
    okButton.setVisibility(View.VISIBLE);
    });

    View Slide

  45. TransitionManager
    .beginDelayedTransition(linearContainer);

    View Slide

  46. TransitionManager
    .beginDelayedTransition(linearContainer, transition);
    Customise the Transition

    View Slide

  47. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(title)
    .addTarget(instructions)
    .addTarget(helpButton)
    .addTarget(okButton))
    .addTransition(new ChangeBounds()
    .addTarget(linearContainer));
    TransitionManager
    .beginDelayedTransition(linearContainer, transition);
    Customise the Transition

    View Slide

  48. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(title)
    .addTarget(instructions)
    .addTarget(helpButton)
    .addTarget(okButton))
    .addTransition(new ChangeBounds()
    .addTarget(linearContainer));
    TransitionManager
    .beginDelayedTransition(linearContainer, transition);

    View Slide

  49. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(title)
    .addTarget(instructions)
    .addTarget(helpButton)
    .addTarget(okButton))
    .addTransition(new ChangeBounds()
    .addTarget(linearContainer));
    TransitionManager
    .beginDelayedTransition(linearContainer, transition);

    View Slide

  50. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(title)
    .addTarget(instructions)
    .addTarget(helpButton)
    .addTarget(okButton))
    .addTransition(new ChangeBounds()
    .addTarget(linearContainer));
    TransitionManager
    .beginDelayedTransition(linearContainer, transition);

    View Slide

  51. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(title)
    .addTarget(instructions)
    .addTarget(helpButton)
    .addTarget(okButton))
    .addTransition(new ChangeBounds()
    .addTarget(linearContainer)
    .addTarget(callButton));
    TransitionManager
    .beginDelayedTransition(linearContainer, transition);

    View Slide

  52. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(title)
    .addTarget(instructions)
    .addTarget(helpButton)
    .addTarget(okButton))
    .addTransition(new ChangeBounds()
    .addTarget(linearContainer)
    .addTarget(callButton)
    .addTarget(okButton)
    .addTarget(helpButton));
    TransitionManager
    .beginDelayedTransition(linearContainer, transition);

    View Slide


  53. View Slide


  54. View Slide

  55. View Slide

  56. View Slide


  57. View Slide


  58. View Slide

  59. ConstraintLayout container = findViewById(R.id.container);
    ConstraintSet idleSet = new ConstraintSet();
    ConstraintSet triggeredSet = new ConstraintSet();
    idleSet.clone(container);
    triggeredSet.clone(container);
    Take advantage of
    ConstraintSet

    View Slide

  60. ConstraintLayout container = findViewById(R.id.container);
    ConstraintSet idleSet = new ConstraintSet();
    ConstraintSet triggeredSet = new ConstraintSet();
    idleSet.clone(container);
    triggeredSet.clone(container);
    triggeredSet.setVisibility(R.id.title, View.GONE);
    triggeredSet.setVisibility(R.id.instructions, View.GONE);
    triggeredSet.setVisibility(R.id.helpButton, View.GONE);
    triggeredSet.setVisibility(R.id.okButton, View.VISIBLE);
    triggeredSet.connect(R.id.whiteBackground, ConstraintSet.TOP,
    R.id.guideline, ConstraintSet.TOP);
    Take advantage of
    ConstraintSet

    View Slide

  61. ConstraintLayout container = findViewById(R.id.container);
    ConstraintSet idleSet = new ConstraintSet();
    ConstraintSet triggeredSet = new ConstraintSet();
    idleSet.clone(container);
    triggeredSet.clone(container);
    triggeredSet.setVisibility(R.id.title, View.GONE);
    triggeredSet.setVisibility(R.id.instructions, View.GONE);
    triggeredSet.setVisibility(R.id.helpButton, View.GONE);
    triggeredSet.setVisibility(R.id.okButton, View.VISIBLE);
    triggeredSet.connect(R.id.whiteBackground, ConstraintSet.TOP,
    R.id.guideline, ConstraintSet.TOP);
    helpButton.setOnClickListener(v -> {
    TransitionManager.beginDelayedTransition(container);
    triggeredSet.applyTo(container);
    });
    Take advantage of
    ConstraintSet

    View Slide

  62. helpButton.setOnClickListener(v -> {
    TransitionManager
    .beginDelayedTransition(container, new AutoTransition());
    triggeredSet.applyTo(container);
    });
    Take advantage of
    ConstraintSet

    View Slide

  63. public class AutoTransition extends TransitionSet {
    private void init() {
    setOrdering(ORDERING_SEQUENTIAL);
    addTransition(new Fade(Fade.OUT));
    addTransition(new ChangeBounds());
    addTransition(new Fade(Fade.IN));
    }
    }

    View Slide

  64. Transition transition = new TransitionSet()
    .addTransition(new Fade())
    .addTransition(new ChangeBounds());
    TransitionManager
    .beginDelayedTransition(container, transition);

    View Slide

  65. Transition transition = new TransitionSet()
    .addTransition(new Fade())
    .addTransition(new ChangeBounds());
    TransitionManager
    .beginDelayedTransition(container, transition);

    View Slide

  66. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(title)
    .addTarget(instructions)
    .setDuration(100))
    .addTransition(new Fade()
    .addTarget(helpButton)
    .addTarget(okButton)
    .setDuration(400))
    .addTransition(new ChangeBounds()
    .setDuration(400)
    .setInterpolator(new FastOutSlowInInterpolator());
    TransitionManager
    .beginDelayedTransition(container, transition);

    View Slide

  67. Switching screens

    View Slide

  68. View Slide

  69. View Slide

  70. View Slide






  71. Make a simple version

    View Slide

  72. ViewGroup

    View Slide

  73. ViewGroup

    View Slide

  74. ViewGroup

    View Slide

  75. ViewGroup

    View Slide

  76. ViewGroup
    TransitionManager.beginDelayedTransition(viewGroup);
    viewGroup.remove(homeView);
    viewGroup.add(alarmView);

    View Slide

  77. ViewGroup
    What if we use Fade?
    TransitionManager
    .beginDelayedTransition(viewGroup, new Fade());
    viewGroup.remove(homeView);
    viewGroup.add(alarmView);

    View Slide

  78. ViewGroup
    TransitionManager
    .beginDelayedTransition(viewGroup, new Slide());
    viewGroup.remove(homeView);
    viewGroup.add(alarmView);
    What if we use Slide?

    View Slide

  79. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.START)
    .addTarget(homeView)
    .setInterpolator(new FastOutSlowInInterpolator())
    .addTransition(new Slide(Gravity.END)
    .addTarget(alarmView)
    .setInterpolator(new FastOutSlowInInterpolator());
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.remove(homeView);
    viewGroup.add(alarmView);
    A nicer Slide

    View Slide

  80. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.START)
    .addTarget(alarmView)
    .setInterpolator(new FastOutSlowInInterpolator());
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.remove(homeView);
    viewGroup.add(alarmView);

    View Slide

  81. ViewGroup
    Sliding over
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView)
    .setInterpolator(new LinearOutSlowInInterpolator());
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.remove(homeView);
    viewGroup.add(alarmView);

    View Slide

  82. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(homeView)
    .setStartDelay(300)
    .setDuration(0))
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView)
    .setInterpolator(new LinearOutSlowInInterpolator());
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.remove(homeView);
    viewGroup.add(alarmView);
    Sliding over

    View Slide

  83. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(homeView)
    .setStartDelay(300)
    .setDuration(0))
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView)
    .setInterpolator(new LinearOutSlowInInterpolator());
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.remove(homeView);
    viewGroup.add(alarmView);
    Sliding over

    View Slide

  84. ViewGroup

    View Slide

  85. ViewGroup

    View Slide

  86. ViewGroup

    View Slide

  87. ViewGroup

    View Slide

  88. Read your library of choice’s
    documentation carefully!
    ViewGroup

    View Slide

  89. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView)
    .setInterpolator(new LinearOutSlowInInterpolator());
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.remove(homeView);
    viewGroup.add(alarmView);

    View Slide

  90. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView)
    .setInterpolator(new LinearOutSlowInInterpolator());
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.remove(homeView);
    viewGroup.add(alarmView);

    View Slide

  91. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView)
    .setInterpolator(new LinearOutSlowInInterpolator());
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.add(alarmView);

    View Slide

  92. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView)
    .setInterpolator(new LinearOutSlowInInterpolator())
    .addListener(new Transition.TransitionListener() {
    @Override onTransitionEnd(Transition transition) {
    container.removeView(homeView);
    }
    });
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.add(alarmView);

    View Slide

  93. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView)
    .setInterpolator(new LinearOutSlowInInterpolator())
    .addListener(new Transition.TransitionListener() {
    @Override onTransitionEnd(Transition transition) {
    container.removeView(homeView);
    }
    });
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.add(alarmView);

    View Slide

  94. ViewGroup Sharing elements

    View Slide

  95. ViewGroup
    Sharing elements
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView)
    .setInterpolator(new LinearOutSlowInInterpolator());

    View Slide

  96. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView)
    .setInterpolator(new LinearOutSlowInInterpolator())
    .addTransition(new ChangeBounds()
    .addTarget(homeView.fab)
    .addTarget(alarmView.fab));
    Sharing elements

    View Slide

  97. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView)
    .setInterpolator(new LinearOutSlowInInterpolator())
    .addTransition(new ChangeBounds()
    .addTarget(homeView.fab)
    .addTarget(alarmView.fab));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.add(alarmView);
    Sharing elements

    View Slide

  98. ViewGroup
    android:layout_width=“match_parent”
    android:layout_height=“match_parent”
    >
    Breaking up views

    View Slide

  99. ViewGroup
    android:layout_width=“match_parent”
    android:layout_height=“match_parent”
    android:transitionGroup=“false”
    >
    Breaking up views

    View Slide

  100. ViewGroup
    android:layout_width=“match_parent”
    android:layout_height=“match_parent”
    >
    Breaking up views

    View Slide

  101. ViewGroup
    android:id=“@+id/contentContainer”
    android:layout_width=“match_parent”
    android:layout_height=“match_parent”
    >
    Breaking up views

    View Slide

  102. ViewGroup
    android:layout_width=“match_parent”
    android:layout_height=“match_parent”
    >
    android:id=“@+id/contentContainer”
    android:layout_width=“match_parent”
    android:layout_height=“match_parent”
    >
    android:id=“@+id/fab”
    android:layout_width=“wrap_content”
    android:layout_height=“wrap_content”
    >

    Breaking up views

    View Slide

  103. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView)
    .setInterpolator(new LinearOutSlowInInterpolator())
    .addTransition(new ChangeBounds()
    .addTarget(homeView.fab)
    .addTarget(alarmView.fab));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.add(alarmView);

    View Slide

  104. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView.contentContainer)
    .setInterpolator(new LinearOutSlowInInterpolator())
    .addTransition(new ChangeBounds()
    .addTarget(homeView.fab)
    .addTarget(alarmView.fab));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.add(alarmView);

    View Slide

  105. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView.contentContainer)
    .setInterpolator(new LinearOutSlowInInterpolator())
    .addTransition(new ChangeBounds()
    .addTarget(homeView.fab)
    .addTarget(alarmView.fab));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.add(alarmView);

    View Slide

  106. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView.contentContainer)
    .setInterpolator(new LinearOutSlowInInterpolator())
    .addTransition(new ChangeBounds()
    .addTarget(homeView.fab)
    .addTarget(alarmView.fab));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.add(alarmView);

    View Slide

  107. ViewGroup
    Transition transition = new TransitionSet()
    .addTransition(new Slide(Gravity.BOTTOM)
    .addTarget(alarmView.contentContainer)
    .setInterpolator(new LinearOutSlowInInterpolator())
    .addTransition(new ChangeBounds()
    .addTarget(homeView.fab)
    .addTarget(alarmView.fab));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    viewGroup.add(alarmView);
    homeView.removeView(homeView.fab);

    View Slide

  108. ViewGroup

    android:id=“@+id/fab”
    android:layout_width=“wrap_content”
    android:layout_height=“wrap_content”
    >


    android:id=“@+id/fab”
    android:layout_width=“wrap_content”
    android:layout_height=“wrap_content”
    >

    View Slide

  109. ViewGroup

    android:id=“@+id/fab”
    android:layout_width=“wrap_content”
    android:layout_height=“wrap_content”
    >


    android:id=“@+id/fab”
    android:layout_width=“wrap_content”
    android:layout_height=“wrap_content”
    >

    View Slide

  110. ViewGroup

    android:id=“@+id/home_fab”
    android:transitionName=“fab”
    android:layout_width=“wrap_content”
    android:layout_height=“wrap_content”
    >


    android:id=“@+id/alarm_fab”
    android:transitionName=“fab”
    android:layout_width=“wrap_content”
    android:layout_height=“wrap_content”
    >

    View Slide

  111. Same but different

    View Slide

  112. View Slide

  113. View Slide








  114. View Slide





  115. divider_horizontal_bright”/>



    View Slide






  116. divider_horizontal_bright”/>



    View Slide








  117. View Slide

  118. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(searchView.scrim))
    .addTransition(new ChangeBounds()
    .addTarget(homeView.card)
    .addTarget(searchView.card));







    View Slide

  119. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(searchView.scrim))
    .addTransition(new ChangeBounds()
    .addTarget(homeView.card)
    .addTarget(searchView.card));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    container.addView(searchView);






    View Slide

  120. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(searchView.scrim))
    .addTransition(new ChangeBounds()
    .addTarget(homeView.card)
    .addTarget(searchView.card));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    container.addView(searchView);

    View Slide

  121. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(searchView.scrim))
    .addTransition(new ChangeBounds()
    .addTarget(homeView.card)
    .addTarget(searchView.card));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    container.addView(searchView);
    homeView.removeView(homeView.card);

    View Slide








  122. View Slide










  123. View Slide

  124. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(searchView.scrim))
    .addTransition(new ChangeBounds()
    .addTarget(homeView.card)
    .addTarget(searchView.card));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    homeView.removeView(homeView.card);

    View Slide

  125. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(searchView.scrim))
    .addTransition(new ChangeBounds()
    .addTarget(homeView.card)
    .addTarget(searchView.card));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    homeView.removeView(homeView.card);

    View Slide

  126. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(searchView.scrim))
    .addTransition(new TransitionSet()
    .addTransition(new ChangeBounds())
    .addTransition(new ChangeTransform())
    .addTarget(homeView.card)
    .addTarget(searchView.card));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    homeView.removeView(homeView.card);

    View Slide

  127. What about going back?

    View Slide

  128. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(searchView.scrim))
    .addTransition(new TransitionSet()
    .addTransition(new ChangeBounds())
    .addTransition(new ChangeTransform())
    .addTarget(homeView.card)
    .addTarget(searchView.card));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    homeView.addView(homeView.card);
    container.removeView(searchView);
    What about going back?

    View Slide

  129. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(searchView.scrim))
    .addTransition(new TransitionSet()
    .addTransition(new ChangeBounds())
    .addTransition(new ChangeTransform())
    .addTarget(homeView.card)
    .addTarget(searchView.card));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    homeView.addView(homeView.card);
    container.removeView(searchView);

    View Slide

  130. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(searchView.scrim))
    .addTransition(new TransitionSet()
    .addTransition(new ChangeBounds())
    .addTransition(new ChangeTransform())
    .addTarget(homeView.card)
    .addTarget(searchView.card));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    homeView.addView(homeView.card);
    container.removeView(searchView);

    View Slide

  131. Transition transition = new TransitionSet()
    .addTransition(new Fade()
    .addTarget(searchView.scrim))
    .addTransition(new TransitionSet()
    .addTransition(new ChangeBounds())
    .addTransition(new ChangeTransform())
    .addTarget(R.id.homeCard)
    .addTarget(searchView.card));
    TransitionManager
    .beginDelayedTransition(viewGroup, transition);
    homeView.addView(homeView.card);
    container.removeView(searchView);

    View Slide

  132. Transitions aren’t perfect

    View Slide

  133. View Slide

  134. Debugging tips
    • Know your layout hierarchy

    • ChangeBounds() is a good place to start investigating

    • Try starting with simplified versions of your screens

    View Slide

  135. Things to remember
    • Transitions are powerful; don’t ignore them

    • Choose your view-based navigation library carefully

    • Use them to enhance UX, not show off

    View Slide

  136. Transitions without Activities or
    Fragments
    chris_h_codes
    chris-horner
    chrishorner.codes

    View Slide