Expand Google Cards

Question

I want to implement something like this. On tapping on a card, it should expand to show more details. I don't want any code but just some guide on how to go about implementing it. The transition should be smooth as in Google apps.

Answer 1

The way to recreate something like that, is to use shared element transitions.

Basically what this does, is connecting views between to layouts and when it switches layouts, the shared elements (views) are animated from the original position and size, to the final position and size of the other layout, creating a smooth transition between layouts.

For a more in depth explanation on shared element transitions look over here .

There is also a great Udacity course on Material Design, covering all these kind of animations and concepts in the form of short videos.