Shared Element Transition + Content Transition

Question

I am trying to achieve something real similar to the gif that can be seen in the following link:

Shared Element Transitions Between Views (not Activities or Fragments)

The only difference between that the transition needs to take place when there is an click event on a recyclerview item which is within an fragment (The fragment resides within an activity). The onClick then propogates to an activity which in turn hosts the actual fragment consisting of the details.

How can we go about achieving such animation?

For reference this is what my details xml looks like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <android.support.v7.widget.CardView

        android:id="@+id/card_view"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dip">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <TextView
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/holo_green_dark"
                android:layout_margin="10dip"
                android:id="@+id/detailsCardTitleNameTextView"
            />

            <include layout="@layout/divider_details"/>

            <TextView
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/black"
                android:text = "@string/director_name"
                android:layout_margin="10dip"
                android:id="@+id/detailsCardDirectorTextView"
            />



            <TextView
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/black"
                android:layout_margin="10dip"
                android:text="@string/released_date"
                android:id="@+id/detailsCardReleasedTextView"
            />
        </LinearLayout>
    </android.support.v7.widget.CardView>


    <android.support.v7.widget.CardView

        android:id="@+id/card_view5"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dip">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <TextView
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/holo_green_dark"
                android:layout_margin="10dip"
                android:text="@string/writers_title"
                android:id="@+id/detailsCardWriterTitleTextView"
            />

            <include layout="@layout/divider_details"/>

            <TextView
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/black"
                android:layout_margin="10dip"
                android:id="@+id/detailsCardWritersTextView"
            />
        </LinearLayout>
    </android.support.v7.widget.CardView>


    <android.support.v7.widget.CardView

        android:id="@+id/card_view2"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dip">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="wrap_content">


            <TextView
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/holo_green_dark"
                android:text="@string/plot_title"
                android:layout_margin="10dip"
                android:id="@+id/detailsCardPlotTitleTextView"
            />

            <include layout="@layout/divider_details"/>

            <TextView
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/black"
                android:layout_margin="10dip"
                android:id="@+id/detailsCardPlotTextView"
            />
        </LinearLayout>
    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView

        android:id="@+id/card_view3"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dip">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="wrap_content">

            <TextView
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/holo_green_dark"
                android:layout_margin="10dip"
                android:text="@string/imdb_rating"
                android:id="@+id/imdbRatingTitleTextView"
            />

            <include layout="@layout/divider_details"/>

            <TextView
                xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@android:color/black"
                android:layout_margin="10dip"
                android:id="@+id/imdbRatingTextView"
            />
        </LinearLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>

Any ideas, tips much appreciated. Thanks!