Lollipop Transitions - Activity Snippet

Question

Lollipop Transitions - Activity Snippet

I'm trying to figure out how to perform actions (or fragments?) Transitions in Lollipop. I am using AppCompat v7 - v21.

Here is my scenario:

enter image description here

When an element in the GridView (inside the fragment) is clicked, I want the image to perform the transition, as in the link here . How do I achieve this? And is there a way I can do this using styles? And if I do this with code, can I get a sample of how to do this from Fragment to Activity?

[EDIT]

This is what I have achieved so far:

styles.xml: values-v21

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <!-- API 21 theme customizations can go here. -->
        <item name="windowActionBar">false</item>
        <item name="android:colorPrimary">@color/dark_grey</item>
        <item name="android:colorPrimaryDark">@color/dark_grey</item>
        <item name="android:colorAccent">@color/dark_grey</item>
        <item name="android:colorControlNormal">@color/white</item>

        <!-- enable window content transitions -->
        <item name="android:windowContentTransitions">true</item>
        <item name="android:windowAllowEnterTransitionOverlap">true</item>
        <item name="android:windowAllowReturnTransitionOverlap">true</item>
        <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
        <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
    </style>

</resources>

onItemClick () in MainActivity:

    Intent i = new Intent(this, DetailActivity.class);
    i.putExtra("url", url);
    i.putExtra("twoPane", false);
    i.putExtra("title", title);
    i.putExtra("imageurl", imageurl);
    // startActivity(i);

    ActivityOptionsCompat options = ActivityOptionsCompat
            .makeSceneTransitionAnimation(this,
                    v.findViewById(R.id.item_imageview), imageurl);
    ActivityCompat.startActivity(this, i, options.toBundle());

In DetailActivity:

    imageview = (SquareImageView) findViewById(R.id.imageview_detail);
    ViewCompat.setTransitionName(imageview, imageurl);
    imageview.setImageUrl(imageurl, ImageCacheManager.getInstance()
            .getImageLoader());

        getWindow().getEnterTransition().addListener(new TransitionListener() {
            @Override
            public void onTransitionEnd(Transition transition) {

                if (Const.DEBUGGING_INT)
                    Log.d(Const.DEBUG, "onTransitionEnd");

                //fadeOutAndHideImage(imageview);

                if (mDetailFragment == null)
                    mDetailFragment = new DetailFragment();
                getSupportFragmentManager()
                        .beginTransaction()
                        .replace(R.id.detail_fragment_container,
                                mDetailFragment).commit();

                mDetailFragment.setParameters(bundle);

            }
}