Don't show transition if view is not visible

Question

I have a list of products, if I click on one, the image of the product is transitioned into the detail screen.
And if I go back, the image is transitioned back to the list.
This works fine.

The problem is that when I scroll down in my detail screen, the image is no longer visible.
But when I go back to the list screen the image is still transitioned, resulting is a buggy transition.

Video example here

I want to achieve something like the Play Store Where there is no return animation if the image is no longer visible.

Code

Starting detail activity:

Intent intent = new Intent(getActivity(), ProductDetailActivity.class);
intent.putExtra(ProductDetailActivity.EXTRA_PRODUCT, product);

Bundle options = ActivityOptionsCompat.makeSceneTransitionAnimation(getActivity(),
                productViewHolder.getProductCover(), productViewHolder.getProductCover().getTransitionName()).toBundle();

getActivity().startActivity(intent, options);

In DetailActivity I set the transition name:

coverImageView.setTransitionName(getString(R.string.transition_key_product_cover_with_id, product.getId()));

styles.xml:

<item name="android:windowContentTransitions">true</item>

Any idea how to implement the behaviour I want to achieve?

score 0 · Answer 1 · edited May 23 '17 at 12:14

With the following link you can know if a view inside an scroll is visible or not: https://stackoverflow.com/a/12428154/4097924

Then you can make a simple method to know if your imageView is visible inside the scrollview, similar to this easy example:

public boolean isVisibleInsideScroll(){
   Rect scrollBounds = new Rect();
   scrollView.getHitRect(scrollBounds);
   if (imageView.getLocalVisibleRect(scrollBounds)) {
       // Any portion of the imageView, even a single pixel, is within the visible window
       return true;
   } else {
       // NONE of the imageView is within the visible window
       return false;
   }
}

Then I see two possible options that I have not proved:

option 1: overwrite the method onBack (and every way to go back if you have another one). Inside the method, you can assign the transition when the element it is visible before leaving the screen:

@Override
public void onBackPressed(){
    if(isVisibleInsideScroll()){
        coverImageView.setTransitionName(getString(R.string.transition_key_product_cover_with_id, product.getId()));
    }
    super.onBackPressed();
}

option 2: overwrite the method onScroll (and every time the scrollview is scrolled) you can register or unregister the animation if the view is visible. The code in this option is similar to the previous one.

Good luck! I like a lot your animation, I saw it in youtube. :)

Don't show transition if view is not visible

Code

1 Answers1