$30 off During Our Annual Pro Sale. View Details »

Screen Transitions in Android

Screen Transitions in Android

Go from screen A to screen B in style. Let's learn together how to animate the transition between the pictures-grid-screen and the picture-details-screen, both on Android 5 and below.

Presented at Codecamp Iasi Spring 2015

Andrei Diaconu

November 27, 2016
Tweet

More Decks by Andrei Diaconu

Other Decks in Programming

Transcript

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

    View Slide

  2. ME

    View Slide

  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

    View Slide

  4. WHAT IS A SCREEN TRANSITION?

    View Slide

  5. View Slide

  6. View Slide

  7. WHAT ARE WE DOING TODAY?
    8 Stages

    View Slide

  8. STAGE 1 - DEFAULT ANIMATION

    View Slide

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

    View Slide

  10. View Slide

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

    View Slide

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

    View Slide

  13. View Slide

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

    View Slide

  15. REMOVE DEFAULTS
    STYLES.XML
    <br/>
    rtransparent
    true
    STARTING ACTIVITY
    from.overridePendingTransition(0,0);

    View Slide

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

    View Slide

  17. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  21. View Slide

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

    View Slide

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

    View Slide

  24. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  28. View Slide

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

    View Slide

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

    View Slide

  31. LAYOUT B
    ...
    android:transitionName="shared_image"
    />

    View Slide

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

    View Slide

  33. View Slide

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

    View Slide

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

    View Slide

  36. View Slide

  37. COMPARISON

    View Slide

  38. View Slide

  39. 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

    View Slide

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

    View Slide