Home » Android » android – CardView animation: raise and expand on click?

android – CardView animation: raise and expand on click?

Posted by: admin May 14, 2020 Leave a comment

Questions:

I’m currently in the process of creating my first android app, and was wondering what the method would be to set a cardview to raise up and then expand into a larger rectangle, revealing a new fragment?

edit: (the new fragment would fill up the center third of the screen, no matter where the original card was located)

How to&Answers:

Authentic Motion

Tangible surfaces don’t just appear out of nowhere like a jump-cut in
a movie; they move into place helping to focus attention, establish
spatial relationships and maintain continuity. Materials respond to
touch to confirm your interaction and all changes radiate outward from
your touch point. All motion is meaningful and intimate, aiding the
user’s comprehension.

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" />

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.

Source: Implementing Material Design