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
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?
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); }
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); }
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(); } }
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(...); }
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();
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();
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();
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());
37. COMPARISON
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