Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Material design screen transitions in android

556 views

Published on

Material design screen transitions in android

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Material design screen transitions in android

  1. 1. SCREEN TRANSITIONS IN ANDROID GO FROM A TO B IN STYLE Created by fromAndrei Diaconu Android Iasi
  2. 2. ME
  3. 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. 4. WHAT IS A SCREEN TRANSITION?
  5. 5.  
  6. 6. WHAT ARE WE DOING TODAY? 8 Stages
  7. 7. STAGE 1 - DEFAULT ANIMATION
  8. 8. 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); }
  9. 9.  
  10. 10. STAGE 2 - MEASURING Measure view in A Send position to B Resize the image in B
  11. 11. 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); }
  12. 12.  
  13. 13. STAGE 3 - NO DEFAULTS Make B transparent No default animations Plan the animation
  14. 14. 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);
  15. 15. RUN ONLY ONCE void onCreate() {     if (savedInstanceState==null){         runAnimations();     }  }
  16. 16.  
  17. 17. STAGE 4 - START POSITION Use translate and scale Initial position for all views
  18. 18. WAIT FOR MEASUREMENTS runAnimations(){     imageView         .getViewTreeObserver()         .addOnPreDrawListener(             boolean onPreDraw() {                 actuallyRunAnimations();                 removeOnPreDrawListener(this);                 return false;             }); }
  19. 19. SET INITIAL POSITION void actuallyRunAnimations(){     Rect initialPosition = getIntent().getParcelableExtra(...);     imageView.getGlobalVisibleRect(endPosition);     //use initialPosition, endPosition     imageView.setScaleY(...);     imageView.setScaleX(...);     imageView.setTranslationY(...);     imageView.setTranslationX(...); }
  20. 20.  
  21. 21. STAGE 5 - ANIMATE! Animate image to final position Fade background in Bring other views from the sides
  22. 22. ANIMATE THINGS BACK TO NORMAL imageView.animate()         .scaleX(1)         .scaleY(1)         .translationX(0)         .translationY(0)         .setListener(             void onAnimationEnd() {                 actionbar.animate()                         .translationY(0)                         .start();             }         ).start();
  23. 23.  
  24. 24. STAGE 6 - REVERSE Override closing B Animate everyhitng in reverse Close B when on animation end
  25. 25. PREVENT FINISH() @Override public void finish() {     if (canAnimateBack)         runAnimationsBackwards();     else         super.finish(); }
  26. 26. DELAY FINISH() imageView.animate()     .scaleX(...)     .scaleY(...)     .translationX(...)     .translationY(...)     .setListener(         void onAnimationEnd() {             DetailsActivity6.super.finish();             overridePendingTransition(0, 0);         }     ).start();
  27. 27.  
  28. 28. STAGE 7 - LOLLIPOP Drop everything Android 5 Screen Transitions Define shared elements
  29. 29. STYLES.XML <style name="AppTheme.Transitions">     <item name = "windowActivityTransitions" >true</item> </style>
  30. 30. LAYOUT B <ImageView     ...     android:transitionName="shared_image"     />
  31. 31. INTENT BUNDLE ActivityOptionsCompat     .makeSceneTransitionAnimation(from, initialView, "shared_image")     .toBundle();
  32. 32.  
  33. 33. STAGE 8 - MAGIC Content exit transition for A Content enter transition for B Detaults for exiting B and reentering A
  34. 34. EXIT + ENTER CONTENT TRANSITIONS ACTIVTY A getWindow().setExitTransition(new Explode()); ACTIVTY B getWindow().setEnterTransition(new Slide());
  35. 35.  
  36. 36. COMPARISON
  37. 37.  
  38. 38. 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
  39. 39. THANK YOU! QUESTIONS? bit.ly/screen-anim

×