ImageView Shared Element Transition between Fragment and Activity

Question

I am displaying images of movie in a viewpager. Whenever a user selects an image, it would be animated(resized) and drawn on another activity. The problem is I am not able to implement animation correctly.

This is the code of my viewpager(inside MoviesPager.java fragment):

View v = inflater.inflate(R.layout.pager_fragment, container, false);
poster = (ImageView) v.findViewById(R.id.selectedMoviePoster);
final View sharedView=poster;
final String transitionName=y.getOriginalTitle();
ActivityCompat.startActivity(getActivity(),sendMovie, ActivityOptions.makeSceneTransitionAnimation(getActivity(),sharedView,transitionName).toBundle());

Here "y" is the movie object which is going to be displayed.

This is the code of MainActivity.java inside which viewpager is implemented:

getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);//=<item name="android:windowActivityTransitions">true</item>*/
getWindow().setExitTransition(new Fade());//=<item name="android:windowExitTransition">@transition/fade</item>
getWindow().setSharedElementExitTransition(new ChangeImageTransform());//same as above

This is the code of Movie.java which displays movie details

getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);
getWindow().setEnterTransition(new Fade());
getWindow().setSharedElementEnterTransition(new ChangeImageTransform());

Transition name is set as:

1) in activity_main.xml

    <android.support.v4.view.ViewPager
    android:id="@+id/currentMoviesViewPager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:transitionName="viewPagerTransition"/>

2) in activity_movie.xml

    <android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorAccent"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll">

        <ImageView
            android:id="@+id/selectedMoviePoster"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="1"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="10dp"
            android:background="@android:color/white"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="1"/>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

3) in pager_fragment.xml which is the xml for fragment of viewpager

    <android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    card_view:cardElevation="40dp"
    card_view:cardCornerRadius="4dp"
    android:clipChildren="false"
    android:clipToPadding="false">


    <ImageView
        android:id="@+id/selectedMoviePoster"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ProgressBar
        android:id="@+id/loadPosterProgress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

</android.support.v7.widget.CardView>

And I am using Universal Image Loader in both activities to download and display Image.

Also if possible can I store images before loading so that I don'e have to download everytime. Image resize to imageview is also not working perfectly.

I have used two different themes for both activities and here is the code.

4) styles.xml:

<resources>

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowBackground">@android:color/darker_gray</item>
    <item name="android:windowContentTransitions">true</item>
</style>

<style name="Theme.AppCompat.Light.FullScreen">
    <item name="windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowBackground">@android:color/darker_gray</item>
    <item name="android:windowContentTransitions">true</item>
</style>

Answer 1

What you can do for this transition is :

                    View sharedView = holder.event_pic;
                    String transitionName = mContext.getString(R.string.event_image);
                    Intent intent_event_description = new Intent(mContext, EventDescription.class);
                    if (Build.VERSION.SDK_INT >= 21) {
                        ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation(activity, sharedView, transitionName);
                        mContext.startActivity(intent_event_description, transitionActivityOptions.toBundle());
                    }

Make sure you provide same id's for both the images.

In your style theme :

    <item name="android:windowContentTransitions">true</item>

Please provide same transition name to both the images :

           <ImageView
            android:id="@+id/selectedMoviePoster"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax"
            android:transitionName="selectedMoviePoster"
            app:layout_collapseParallaxMultiplier="1"/>

            <ImageView
             android:id="@+id/selectedMoviePoster"
             android:layout_width="match_parent"
             android:transitionName="selectedMoviePoster"
             android:layout_height="match_parent"/>