How do I expand CardViews to show more detail like Google Keep cards?

user2900772 picture user2900772 · Dec 4, 2014 · Viewed 15.9k times · Source

I have some CardViews in my app and I want them to function like the cards in Google Keep. For example, when I click on a card that has text, it expands (with the animation) into another view.

If you're not sure what I mean, create a note on the Google Keep Android app, tap on the card that appears when the note is created. This is exactly what I want to happen in my app.

How do I go about doing this?

Answer

shkschneider picture shkschneider · Dec 4, 2014

New in Lollipop!

Activity + Fragment Transitions

By declaring "shared elements" that are common across two screens you can create a smooth transition between the two states.

album_grid.xml:

<ImageView
    …
    android:transitionName="@string/transition_album_cover" />

album_details.xml:

<ImageView
    …
    android:transitionName="@string/transition_album_cover" />

Java:

AlbumActivity.java
Intent intent = new Intent();
String transitionName = getString(R.string.transition_album_cover);
…
ActivityOptionsCompat options =
ActivityOptionsCompat.makeSceneTransitionAnimation(activity,
    albumCoverImageView,   // The view which starts the transition
    transitionName    // The transitionName of the view we’re transitioning to
    );
ActivityCompat.startActivity(activity, intent, options.toBundle());

Here we define the same transitionName in two screens. When starting the new Activity and this transition is animated automatically. In addition to shared elements, you can now also choreograph entering and exiting elements.