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

Andrei Diaconu

November 27, 2016
Tweet

More Decks by Andrei Diaconu

Other Decks in Programming

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