Screen Transitions in Android

Go from screen A to screen B in style. Let's learn together how to animate the transition between the pictures-grid-screen and the picture-details-screen, both on Android 5 and below.

Presented at Codecamp Iasi Spring 2015

Transcript

1. SCREEN TRANSITIONS IN
   ANDROID
   GO FROM A TO B IN STYLE
   Created by from
   Andrei Diaconu Android Iasi
   

   View Slide

2. ME
   

   View Slide

3. CODE ON GITHUB
   https://github.com/andreidiaconu/transitions-animate-demo
   Presentation (with working video) at https://andreidiaconu.github.io/transitions-animate-demo
   bit.ly/screen-anim
   

   View Slide

4. WHAT IS A SCREEN TRANSITION?
   

   View Slide

5. View Slide

6. View Slide

7. WHAT ARE WE DOING TODAY?
   8 Stages
   

   View Slide

8. STAGE 1 - DEFAULT ANIMATION
   

   View Slide

9. INITIAL SETUP
   ACTIVITY A
   grid.setOnItemClickListener(
   DetailsActivity1.start(GridActivity1.this, imageUrl);
   )
   ACTIVITY B
   static void start(...,String imageUrl){
   intent = new Intent(...);
   }
   void onCreate(){
   Picasso
   .with(this)
   .load(imageUrl)
   .into(imageView);
   }
   

   View Slide

10. View Slide

11. STAGE 2 - MEASURING
    Measure view in A
    Send position to B
    Resize the image in B
    

    View Slide

12. SEND POSITION
    ACTIVITY A
    void onItemClick(){
    DetailsActivity2.start(GridActivity2.this, imageUrl, view);
    }
    ACTIVITY B
    static void start(..., View initialView){
    ...
    initialView.getGlobalVisibleRect(initialPosition);
    intent.putExtra("initialPosition", initialPosition);
    startActivity(intent);
    }
    

    View Slide

13. View Slide

14. STAGE 3 - NO DEFAULTS
    Make B transparent
    No default animations
    Plan the animation
    

    View Slide

15. REMOVE DEFAULTS
    STYLES.XML
    <br/>
    rtransparent
    true
    STARTING ACTIVITY
    from.overridePendingTransition(0,0);
    

    View Slide

16. RUN ONLY ONCE
    void onCreate() {
    if (savedInstanceState==null){
    runAnimations();
    }
    }
    

    View Slide

17. View Slide

18. STAGE 4 - START POSITION
    Use translate and scale
    Initial position for all views
    

    View Slide

19. WAIT FOR MEASUREMENTS
    runAnimations(){
    imageView
    .getViewTreeObserver()
    .addOnPreDrawListener(
    boolean onPreDraw() {
    actuallyRunAnimations();
    removeOnPreDrawListener(this);
    return false;
    });
    }
    

    View Slide

20. SET INITIAL POSITION
    void actuallyRunAnimations(){
    Rect initialPosition = getIntent().getParcelableExtra(...);
    imageView.getGlobalVisibleRect(endPosition);
    //use initialPosition, endPosition
    imageView.setScaleY(...);
    imageView.setScaleX(...);
    imageView.setTranslationY(...);
    imageView.setTranslationX(...);
    }
    

    View Slide

21. View Slide

22. STAGE 5 - ANIMATE!
    Animate image to nal position
    Fade background in
    Bring other views from the sides
    

    View Slide

23. ANIMATE THINGS BACK TO NORMAL
    imageView.animate()
    .scaleX(1)
    .scaleY(1)
    .translationX(0)
    .translationY(0)
    .setListener(
    void onAnimationEnd() {
    actionbar.animate()
    .translationY(0)
    .start();
    }
    ).start();
    

    View Slide

24. View Slide

25. STAGE 6 - REVERSE
    Override closing B
    Animate everyhitng in reverse
    Close B when on animation end
    

    View Slide

26. PREVENT FINISH()
    @Override
    public void finish() {
    if (canAnimateBack)
    runAnimationsBackwards();
    else
    super.finish();
    }
    

    View Slide

27. DELAY FINISH()
    imageView.animate()
    .scaleX(...)
    .scaleY(...)
    .translationX(...)
    .translationY(...)
    .setListener(
    void onAnimationEnd() {
    DetailsActivity6.super.finish();
    overridePendingTransition(0, 0);
    }
    ).start();
    

    View Slide

28. View Slide

29. STAGE 7 - LOLLIPOP
    Drop everything
    Android 5 Screen Transitions
    De ne shared elements
    

    View Slide

30. STYLES.XML
    <br/><item name = "windowActivityTransitions" >true</item><br/>
    

    View Slide

31. LAYOUT B
    ...
    android:transitionName="shared_image"
    />
    

    View Slide

32. INTENT BUNDLE
    ActivityOptionsCompat
    .makeSceneTransitionAnimation(from, initialView, "shared_image")
    .toBundle();
    

    View Slide

33. View Slide

34. STAGE 8 - MAGIC
    Content exit transition for A
    Content enter transition for B
    Detaults for exiting B and reentering A
    

    View Slide

35. EXIT + ENTER CONTENT TRANSITIONS
    ACTIVTY A
    getWindow().setExitTransition(new Explode());
    ACTIVTY B
    getWindow().setEnterTransition(new Slide());
    

    View Slide

36. View Slide

37. COMPARISON
    

    View Slide

38. View Slide

39. CODE ON GITHUB
    https://github.com/andreidiaconu/transitions-animate-demo
    Presentation (with working video) at https://andreidiaconu.github.io/transitions-animate-demo
    bit.ly/screen-anim
    

    View Slide

40. THANK YOU!
    QUESTIONS?
    by from
    Andrei Diaconu Android Iasi
    bit.ly/screen-anim
    

    View Slide