Material Design - Expanding (Transition) a Card to full screen

Question

I'm struggling to implement the expand feature of the card view described by the Material Design for Android.

In their design guidelines they show off different layouts for the Card component, but one example shows a card transition to fullscreen onClick.

This is the transition shown on their website:



I've tried out implementing a feature like this, but it would require much more work than what their guideline examples are suggesting... How does Material Design accomplish this? Is there a built-in feature for this, should I just manually translate and fit the card to fit the screen, or should I use an entirely new fragment or activity for the full-card-view?

Here are the Design guidelines, which contain that example, but nothing is said about the transition, neither on the documented Develop page, which is minimal really.

Answer 1

TL;DR

In the case of the gif image you've attached above, the RecyclerView and the detailed CardView should have their own separate Fragments which are operated in one single Activity.

Jump to the links at the end for the animation part.

Detail

Why so? Well, we had three choices:

1. Keep both Views in one Activity and overlap the detailed CardView on top of RecyclerView on click event. (This one is stupid, and not a good practice)

2. Create separate Activities for both Views (Recycler & fullscreen-Card)

3. The one I mentioned above.

RecyclerView and Detailed View shown as two separate Fragments

Now the reason for not choosing the 2nd option was because it is more performance intensive as compared to the 3rd one. We may not notice this in a small scale app but it certainly makes an impact when the app scales. Plus, creating fragments is more effective as we are sharing common views and variables in between the Views. So the best choice is number three. Note that this isn't a universal case and the usage will differ according to your requirement.

---

Using Fragments can be overwhelming at first but it keeps the code more organised when you get a hang of it. You should try to keep your app divided into few broadly divided activities and within those should be as many fragments as you want.

Here's a few links that helped me implement the exact same thing you're looking for.

• MDC: Material Motion
• Implementing Motion with MM
• Building Transitions with MM
• Hands-on experience in Codelab

All three of them helped me gain a better understanding on how the whole Material Motion framework works and how to implement it in my program.