CODEWITHSUNDEEP
androidanimationexpandraise
Daniel Kim
Daniel Kim

Reputation: 267

CardView animation: raise and expand on click?

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)

Upvotes: 11

Views: 7917

Answers (2)

Rakib Hasan
Rakib Hasan

Reputation: 171

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>
  1. 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)
}

Upvotes: 0

freddiev4
freddiev4

Reputation: 2621

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

Upvotes: 3

Related Questions