For a recent exercise, I messed around with shared element transitions in Android. This type transition is useful for selecting an image from one view that will be shown in another.

In this case, I created a gallery view and detail view. The gallery was made up of a grid of thumbnail images cropped to in the same size. The gallery view was a view pager allowing the user to swipe between images as well as zoom to scale each image. I also added in some bonus features like colored status and navigation bars and the ability to tap to show / hide everything in the detail view.

To demonstrate the transitions, I added a pull down menu showing the most common transition types: auto and explode. For explode, I provided two examples: one that just exploded the thumbnails and another that exploded everything including the toolbar, status bar, and navigation bar.

The hardest part of challenge was changing the scaleType between views. Based on my research, it wasn't possible to switch between scaleToFit and croppedFit. But I had found an exercise where it did work, but the code was convoluted with additional features. It took several attempts, but eventually I was able to work it out.

You can check it out on Github.