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

Screen Transitions in Android

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

3d14b1dcd13755bcbafc5ac9c9ab1426?s=128

Andrei Diaconu

November 27, 2016
Tweet

Transcript

  1. SCREEN TRANSITIONS IN ANDROID GO FROM A TO B IN

    STYLE Created by from Andrei Diaconu Android Iasi
  2. ME

  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
  4. WHAT IS A SCREEN TRANSITION?

  5. None
  6. None
  7. WHAT ARE WE DOING TODAY? 8 Stages

  8. STAGE 1 - DEFAULT ANIMATION

  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); }
  10. None
  11. STAGE 2 - MEASURING Measure view in A Send position

    to B Resize the image in B
  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); }
  13. None
  14. STAGE 3 - NO DEFAULTS Make B transparent No default

    animations Plan the animation
  15. REMOVE DEFAULTS STYLES.XML <style name="AppTheme.Transparent"> </style> <item name="android:windowBackground">rtransparent</item> <item name="android:windowIsTranslucent">true</item>

    STARTING ACTIVITY from.overridePendingTransition(0,0);
  16. RUN ONLY ONCE void onCreate() { if (savedInstanceState==null){ runAnimations(); }

    }
  17. None
  18. STAGE 4 - START POSITION Use translate and scale Initial

    position for all views
  19. WAIT FOR MEASUREMENTS runAnimations(){ imageView .getViewTreeObserver() .addOnPreDrawListener( boolean onPreDraw() {

    actuallyRunAnimations(); removeOnPreDrawListener(this); return false; }); }
  20. SET INITIAL POSITION void actuallyRunAnimations(){ Rect initialPosition = getIntent().getParcelableExtra(...); imageView.getGlobalVisibleRect(endPosition);

    //use initialPosition, endPosition imageView.setScaleY(...); imageView.setScaleX(...); imageView.setTranslationY(...); imageView.setTranslationX(...); }
  21. None
  22. STAGE 5 - ANIMATE! Animate image to nal position Fade

    background in Bring other views from the sides
  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();
  24. None
  25. STAGE 6 - REVERSE Override closing B Animate everyhitng in

    reverse Close B when on animation end
  26. PREVENT FINISH() @Override public void finish() { if (canAnimateBack) runAnimationsBackwards();

    else super.finish(); }
  27. DELAY FINISH() imageView.animate() .scaleX(...) .scaleY(...) .translationX(...) .translationY(...) .setListener( void onAnimationEnd()

    { DetailsActivity6.super.finish(); overridePendingTransition(0, 0); } ).start();
  28. None
  29. STAGE 7 - LOLLIPOP Drop everything Android 5 Screen Transitions

    De ne shared elements
  30. STYLES.XML <style name="AppTheme.Transitions"> <item name = "windowActivityTransitions" >true</item> </style>

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

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

  33. None
  34. STAGE 8 - MAGIC Content exit transition for A Content

    enter transition for B Detaults for exiting B and reentering A
  35. EXIT + ENTER CONTENT TRANSITIONS ACTIVTY A getWindow().setExitTransition(new Explode()); ACTIVTY

    B getWindow().setEnterTransition(new Slide());
  36. None
  37. COMPARISON

  38. None
  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
  40. THANK YOU! QUESTIONS? by from Andrei Diaconu Android Iasi bit.ly/screen-anim