CardView animation: raise and expand on click?

Question

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)

Unexceptionable

Answer 1

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

Deliquesce

can we do it with card views? – Redintegration

Answer 2

Steps:

1. create a xml file in res-> anim -> sale_up.xml
2. copy this animation file and paste to your sale_up.xml file. Code bellow -

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:toXScale="1.2"
        android:toYScale="1.2"
        android:duration="500"
        android:pivotX="50%"
        android:pivotY="50%" />
</set>

3. Now go to your activity or fragment and attatch the animation to your cardview like this -

// initialize the animation
val animation = AnimationUtils.loadAnimation(requireActivity(), R.anim.scale_up)
// attatch the animation while performing onClick on the desire cardview
binding.cardview.setOnClickListener {
    it.startAnimation(animation)
}

Effectually