Activity Transition animation in a ListView in Android Lollipop with Material Design

Question

I am using a Master/Detail pattern and currently moving to Android Lollipop. I want to have one of the new activity transistions if I click on a item in my ListView. The animations are working but I do not know how to make a certain animation between the shared element (in my case a ImageView).

If I click on a row in my custom ListView (with image and text), the transition should switch to the image in my DetailActivtiy. It should look like in this video: http://youtu.be/RhiPJByIMrM?t=2m41s or this video: http://youtu.be/XkWI1FKKrs4

I already added this code to both of my ImageViews:

<ImageView
            android:transitionName="@string/transition_title_image"/>

My ListActivity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    if (Build.VERSION.SDK_INT >= 21) {
        //To enable window content transitions in your code instead, call the Window.requestFeature() method:
        getWindow().requestFeature(android.view.Window.FEATURE_CONTENT_TRANSITIONS);
        Transition ts_enter = new Slide();  //Slide(); //Explode();
        Transition ts_exit = new Explode();

        ts_enter.setDuration(2000);
        ts_exit.setDuration(2000);
        /*
        If you have set an enter transition for the second activity,
        the transition is also activated when the activity starts.
        */
        getWindow().setEnterTransition(ts_enter);
        getWindow().setExitTransition(ts_exit);
    }
    super.onCreate(savedInstanceState);

Using this method to call my DetailActivity:

    if (Build.VERSION.SDK_INT >= 21) {
        Intent intent = new Intent(ArticleListActivity.this, ArticleDetailActivity.class);
        intent.putExtra("pos", id);
        intent.putExtra("articleList", articleList);
        String transitionName = getString(R.string.transition_title_image);
        ImageView article_thumb = (ImageView) findViewById(R.id.article_thumb);

        ActivityOptionsCompat options =
                ActivityOptionsCompat.makeSceneTransitionAnimation(ArticleListActivity.this,
                        article_thumb,   // The view which starts the transition
                        transitionName    // The transitionName of the view we’re transitioning to
                );
        ActivityCompat.startActivity(ArticleListActivity.this, intent, options.toBundle());
    }

My DetailActivity:

@Override
protected void onCreate(Bundle savedInstanceState) {
    if (Build.VERSION.SDK_INT >= 21) {
        //To enable window content transitions in your code instead, call the Window.requestFeature() method:
        getWindow().requestFeature(android.view.Window.FEATURE_CONTENT_TRANSITIONS);
        Transition ts_enter = new Slide();  //Slide(); //Explode();
        Transition ts_exit = new Explode();  //Slide(); //Explode();

        ts_enter.setDuration(2000);
        ts_exit.setDuration(2000);

        getWindow().setEnterTransition(ts_enter);
        getWindow().setExitTransition(ts_exit);
    }
    super.onCreate(savedInstanceState)

;

Answer 1

Try this:

1. First, make sure you give each ImageView in your first activity a unique transition name. If all of the image views have the same transition name, the framework will not know which one to choose when the animation begins and the transition will not behave properly.

2. When the ImageView is clicked, pass its unique transition name to the details activity as an Intent extra.

3. In the details activity's onCreate() method, retrieve the name from the intent bundle, and set it as the ImageView's transition name.