Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 887
user2900772 Avatar asked Dec 04 '14 17:12

user2900772


People also ask

What is card layout Android?

In Android, CardView is another main element that can represent the information in a card manner with a drop shadow called elevation and corner radius which looks consistent across the platform. CardView was introduced in Material Design in API level 21 (Android 5.0 i.e Lollipop).


1 Answers

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.

like image 109
shkschneider Avatar answered Nov 13 '22 22:11

shkschneider