TransitionDrawable — Small Gems of the Android Framework

While working on the next Snapp Mobile internal project I ran into a small Gem of the Android Framework I’ve not known about before even though it’s been there since API 1. It might be that I’m the last one to learn about the usefulness of this class in modern UIs but in the off chance that I’m not I thought I’d share a quick example how this small utility made my life easier.

In the app I have an onboarding screen which has two sections, categories and equipment. Use can move between these two sections.

Our app has strong theming and colour association for each type of element. Photography Categories are orange and Equipment is lilac. So naturally, when user switches between these two sections in onboarding we want the background colour to reflect the association:

I have built two Fragments and pressing the FAB moves user to the next one. Simply making the Fragment backgrounds right colour would, of course, work but that transition is not pleasant.

Enter TransitionDrawable!

This is the drawable definition:

I simply set that drawable as the background of my Fragment container. I make my Fragment backgrounds transparent and execute the Fragment transition while calling:

transition.startTransition(500)

Going the other way is equally simple:

transition.reverseTransition(500)

It’s worth noting that the Android Framework set the first item of your TransitionDrawable as the default background so you don’t have to worry about the initial state as long as you get your items into right order.

That’s it. Maybe not revolutionary but I’ve found myself writing interpolation function for the same use case. But this approach feels much more maintainable and readable.