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.

[KGVID width="540" height="960"]https://radleymarx.com/wp/wp-content/uploads/2018/10/android-transitions-demo.mov[/KGVID]

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.