How to implement the "parent-to-child" navigational transition as prescribed by Material Design

Question

Google's Material Design guidelines prescribe the following transition for "parent-to-child" transitions when the parent consists of a list. (Material Design Guidelines)

How do I provide such a transition? I'm unaware of any inbuilt transition provided to make this possible.

score 11 · Answer 1 · answered May 02 '17 at 23:46

11

One option is to use ActivityOptionsCompat.makeScaleUpAnimation

Activity activity = getActivity();
Intent intent = new Intent(activity, OtherActivity.class);
Bundle options = ActivityOptionsCompat.makeScaleUpAnimation(
    sourceView, 0, 0, sourceView.getWidth(), sourceView.getHeight()).toBundle();

ActivityCompat.startActivity(activity, intent, options);

This will cause the new activity to expand vertically and horizontally outwards from your sourceView

answered May 02 '17 at 23:46

Stromata

245
4
9

4

How to reverse it, I mean how to apply when back button pressed? – Aditya May 12 '18 at 19:35
1

And how to adjust speed? – Aditya May 12 '18 at 19:35

score 3 · Answer 2 · answered Dec 02 '14 at 16:33

Start an activity with a shared element

To make a screen transition animation between two activities that have a shared element:

Enable window content transitions in your theme. Specify a shared elements transition in your style. Define your transition as an XML resource. Assign a common name to the shared elements in both layouts with the android:transitionName attribute. Use the ActivityOptions.makeSceneTransitionAnimation() method.

// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // start the new activity
        startActivity(intent, options.toBundle());
    }
});

For shared dynamic views that you generate in your code, use the View.setTransitionName() method to specify a common element name in both activities.

To reverse the scene transition animation when you finish the second activity, call the Activity.finishAfterTransition() method instead of Activity.finish().

Take from here Customize Activity Transitions

score 1 · Accepted Answer · answered Sep 14 '18 at 17:40

1

Hey I think I'm a few weeks late, but I just released a library for building this, inspired by Google Inbox: https://github.com/saket/InboxRecyclerView

answered Sep 14 '18 at 17:40

Saket

2,945
1
29
31

1

Glad to be able to mark an accepted answer so many years later - only solution that understands and handles all the complexity of the transition. – Raveesh Bhalla Sep 14 '18 at 18:21

score 0 · Answer 4 · edited Feb 24 '20 at 11:16

you can animation using below code

Intent intent = new Intent(MainActivity.this, NFCTagInformationActivity.class);
Bundle options = ActivityOptionsCompat.makeClipRevealAnimation(
            cvTagInfoSmall, 0, 0, cvTagInfoSmall.getWidth(), cvTagInfoSmall.getHeight()).toBundle();
ActivityCompat.startActivity(this, intent, options);

you can use makeScaleUpAnimation instead of makeClipRevealAnimation for different view transition animation.

How to implement the "parent-to-child" navigational transition as prescribed by Material Design

4 Answers4

Linked

Related