Screen transitions in Android

Go from A to B in style

Created by Andrei Diaconu from 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?

 

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





                        

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



                        

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?

by Andrei Diaconu from Android Iasi

bit.ly/screen-anim