Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 410
Raveesh Bhalla Avatar asked Dec 01 '14 18:12

Raveesh Bhalla


3 Answers

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

like image 71
Stromata Avatar answered Sep 23 '22 05:09

Stromata


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

like image 22
Anton A. Avatar answered Sep 23 '22 05:09

Anton A.


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

like image 44
Saket Avatar answered Sep 22 '22 05:09

Saket