I have implemented a shared element activity transition animation between MainActivity (GridView) and DetailActivity. When item is clicked, the image in Grid item will zoom-in to become the background image in DetailActivity. I have made the transition very smooth by saving the image on the MainActivity into a file, then use it as placeholder image in DetailActivity before the higher quality image is downloaded via picasso. When picasso finished its task the higher quality image will replace the placeholder one very neatly.
Code from onCreateView() in DetailActivityFragment.java
ImageView iv = (ImageView) mRootview.findViewById(R.id.movie_poster);
try {
// Prepare "InterimPoster" jpeg file to be placeholder image
Bitmap bitmap = BitmapFactory.decodeStream(c.openFileInput("InterimPoster"));
Picasso.with(c).load("http://image.tmdb.org/t/p/w780" + mMovieInfo[2])
.placeholder(new BitmapDrawable(getResources(), bitmap))
.fit()
.centerCrop()
.noFade()
.into(iv);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
As for animation, I implement it like in the link here step 1-3 https://guides.codepath.com/android/Shared-Element-Activity-Transition
However, sometimes there's flicker when the higher quality image finished download before the transition animation is completed. The zooming-in image will be replaced with new image while moving which is an unpleasant animation.
So I wonder how can I fix this flicker? One thing I can think of is to delay the image download because I already have lower quality image as a placeholder. How can I do that?
Here the video. Usually, on my test device it's smooth 80% of the time, but luckily in this video it flicker most of the time.
Now I have found a way to delay Picasso image loading (or any other task). It's very simple really with the use of Handler and Runnable.
Now my code looks like this. The image replacement is pretty smooth in any case now.
// Set Background Poster in Try-catch in case file cannot be open
try {
// Get/Prepare "InterimPoster" jpeg file to be placeholder image
final ImageView iv = (ImageView) mRootview.findViewById(R.id.movie_poster);
final Bitmap bitmap = BitmapFactory.decodeStream(c.openFileInput("InterimPoster"));
final Drawable lowResPoster = new BitmapDrawable(getResources(), bitmap);
iv.setImageDrawable(lowResPoster);
// Download higher resolution image with 0.8 sec delay to avoid load complete before
// animation finishes (causing some flicker/overflow image problem).
Handler handler = new Handler();
Runnable runnable = new Runnable() {
@Override
public void run() {
Picasso.with(c).load("http://image.tmdb.org/t/p/w780" + mMovieInfo[2])
// still need placeholder here otherwise will flash of white image
.placeholder(lowResPoster)
.error(lowResPoster)
.fit()
.centerCrop()
.noFade() // without this image replacement will not be smooth
.into(iv);
}
};
handler.postDelayed(runnable, 800);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments