Implementing the Gmail for Android selected email animation

14 October 2018

I really like the way that Gmail for Android shows the checked state for selected emails.

Why is this good? There are three visual affordances which make it very clear which emails are selected:

• the avatar is replaced by a checkmark
• the email’s background changes color
• the number of selected emails is displayed in the app bar

Why is it COOL? Look what happens when an email is selected and deselected quickly. The avatar animation is shown in reverse from the position it was at:

I have five requirements:

1. Display a list with items already selected (no animation).
2. Persist the selected state in the Presenter/ViewModel, not in the View.
3. Animate transitions to the checked and the not-checked states.
4. Report the transition to the checked/not-checked states back to the Presenter/ViewModel immediately. I don’t want to wait for the animations to complete, so other parts of the UI can update if necessary (like the app bar)
5. Handle spammy clicks as gracefully as Gmail — no jumping between the checked/not-checked styles, everything should be animated

I used the Rotate3dAnimation class from the Android samples to do the swivel itself. The main thing I changed from the sample was adding the matrix.preScale(-1f, 1f, centerX, 0f) so that the “back” of the view wasn’t reversed.

I didn’t manage to get the fifth requirement completed — luckily, it doesn’t look too bad played at the regular animation speed:

See the full solution here.

How would you have done this? Is the reverse easier than I was thinking or are there any tricks I’m missing out on? Let me know on Twitter!