SlideShare a Scribd company logo

Material design screen transitions in android

•
•
Codecamp Romania
Codecamp Romania

This document discusses different techniques for animating screen transitions between Android activities. It covers 8 stages: 1) the default animation, 2) measuring views, 3) removing defaults, 4) setting initial positions, 5) animating to the final position, 6) reversing the animations, 7) using Lollipop screen transitions, and 8) setting custom content entrance and exit transitions. Code examples are provided for each stage and the full code is available on GitHub.

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

More Related Content

Material design screen transitions in android