SCREEN TRANSITIONS INANDROID

GO FROM A TO B IN STYLECreated by from Andrei Diaconu Android Iasi

ME

CODE ON GITHUBhttps://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?

WHAT ARE WE DOING TODAY?8 Stages

STAGE 1 - DEFAULT ANIMATION

INITIAL SETUPACTIVITY A

grid.setOnItemClickListener( DetailsActivity1.start(GridActivity1.this, imageUrl);)

ACTIVITY Bstatic void start(...,String imageUrl) intent = new Intent(...); void onCreate() Picasso .with(this) .load(imageUrl) .into(imageView);

STAGE 2 - MEASURINGMeasure view in ASend position to BResize the image in B

SEND POSITIONACTIVITY A

void onItemClick() DetailsActivity2.start(GridActivity2.this, imageUrl, view);

ACTIVITY Bstatic void start(..., View initialView) ... initialView.getGlobalVisibleRect(initialPosition); intent.putExtra("initialPosition", initialPosition);

startActivity(intent);

STAGE 3 - NO DEFAULTSMake B transparentNo default animationsPlan the animation

REMOVE DEFAULTSSTYLES.XML

<style name="AppTheme.Transparent">

</style>

<item name="android:windowBackground">rtransparent</item> <item name="android:windowIsTranslucent">true</item>

STARTING ACTIVITYfrom.overridePendingTransition(0,0);

RUN ONLY ONCEvoid onCreate() if (savedInstanceState==null) runAnimations();

STAGE 4 - START POSITIONUse translate and scaleInitial position for all views

WAIT FOR MEASUREMENTSrunAnimations() imageView .getViewTreeObserver() .addOnPreDrawListener( boolean onPreDraw() actuallyRunAnimations(); removeOnPreDrawListener(this); return false; );

SET INITIAL POSITIONvoid 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 positionFade background inBring other views from the sides

ANIMATE THINGS BACK TO NORMALimageView.animate() .scaleX(1) .scaleY(1) .translationX(0) .translationY(0) .setListener( void onAnimationEnd() actionbar.animate() .translationY(0) .start(); ).start();

STAGE 6 - REVERSEOverride closing BAnimate everyhitng in reverseClose B when on animation end

PREVENT FINISH()@Overridepublic 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 - LOLLIPOPDrop everythingAndroid 5 Screen TransitionsDefine shared elements

STYLES.XML<style name="AppTheme.Transitions"> <item name = "windowActivityTransitions" >true</item></style>

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

INTENT BUNDLEActivityOptionsCompat .makeSceneTransitionAnimation(from, initialView, "shared_image") .toBundle();

STAGE 8 - MAGICContent exit transition for AContent enter transition for BDetaults for exiting B and reentering A

EXIT + ENTER CONTENT TRANSITIONSACTIVTY A

getWindow().setExitTransition(new Explode());

ACTIVTY BgetWindow().setEnterTransition(new Slide());

COMPARISON

CODE ON GITHUBhttps://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