Lollipop transitions - Fragment to Activity

Question

I am trying to figure out how to do Activity(or Fragment??) Transitions in Lollipop. I am using AppCompat v7 - v21.

Here is my scenario:

When an item in the GridView(inside Fragment) is clicked, I wish the image to make a transition as in the link here. How do I achieve it? And is there a way i can do it using styles? And if i do it through code, can I have a sample of how to do it from Fragment to Activity?

[EDIT]

This is what i achieved till now:

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);

            }
}

This is giving me the transition, but, the transition is not smooth enough as i expected. Still working on it.

Can i get these transitions in pre-lollipop devices? When i try to run the code in lower versions, for ex., 2.3.6, it crashes and says, NoSuchMethodDef getEnterTransition() . Are these transitions only related to Lollipop?