Tweet
Tweet

Slide 1

Slide 1 text

SCREEN TRANSITIONS IN ANDROID GO FROM A TO B IN STYLE Created by from Andrei Diaconu Android Iasi

Slide 2

Slide 2 text

ME

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

WHAT IS A SCREEN TRANSITION?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

WHAT ARE WE DOING TODAY? 8 Stages

Slide 8

Slide 8 text

STAGE 1 - DEFAULT ANIMATION

Slide 9

Slide 9 text

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); }

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

STAGE 2 - MEASURING Measure view in A Send position to B Resize the image in B

Slide 12

Slide 12 text

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); }

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

STAGE 3 - NO DEFAULTS Make B transparent No default animations Plan the animation

Slide 15

Slide 15 text

REMOVE DEFAULTS STYLES.XML rtransparent true STARTING ACTIVITY from.overridePendingTransition(0,0);

Slide 16

Slide 16 text

RUN ONLY ONCE void onCreate() { if (savedInstanceState==null){ runAnimations(); } }

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

STAGE 4 - START POSITION Use translate and scale Initial position for all views

Slide 19

Slide 19 text

WAIT FOR MEASUREMENTS runAnimations(){ imageView .getViewTreeObserver() .addOnPreDrawListener( boolean onPreDraw() { actuallyRunAnimations(); removeOnPreDrawListener(this); return false; }); }

Slide 20

Slide 20 text

SET INITIAL POSITION void actuallyRunAnimations(){ Rect initialPosition = getIntent().getParcelableExtra(...); imageView.getGlobalVisibleRect(endPosition); //use initialPosition, endPosition imageView.setScaleY(...); imageView.setScaleX(...); imageView.setTranslationY(...); imageView.setTranslationX(...); }

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

STAGE 5 - ANIMATE! Animate image to nal position Fade background in Bring other views from the sides

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

STAGE 6 - REVERSE Override closing B Animate everyhitng in reverse Close B when on animation end

Slide 26

Slide 26 text

PREVENT FINISH() @Override public void finish() { if (canAnimateBack) runAnimationsBackwards(); else super.finish(); }

Slide 27

Slide 27 text

DELAY FINISH() imageView.animate() .scaleX(...) .scaleY(...) .translationX(...) .translationY(...) .setListener( void onAnimationEnd() { DetailsActivity6.super.finish(); overridePendingTransition(0, 0); } ).start();

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

STAGE 7 - LOLLIPOP Drop everything Android 5 Screen Transitions De ne shared elements

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

LAYOUT B

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

STAGE 8 - MAGIC Content exit transition for A Content enter transition for B Detaults for exiting B and reentering A

Slide 35

Slide 35 text

EXIT + ENTER CONTENT TRANSITIONS ACTIVTY A getWindow().setExitTransition(new Explode()); ACTIVTY B getWindow().setEnterTransition(new Slide());

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

COMPARISON

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

THANK YOU! QUESTIONS? by from Andrei Diaconu Android Iasi bit.ly/screen-anim