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.

Oscaroscillate

Answer 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

Bipartite

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. – Oscaroscillate

Answer 2

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

Mundt

How to reverse it, I mean how to apply when back button pressed? – Hecklau

And how to adjust speed? – Hecklau

Answer 3

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

Indue

Answer 4

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.

Obovoid