Zeeshan Shabbir
Zeeshan Shabbir

Reputation: 7114

Shared Transition doesn't work recyclerview to fragment

I am trying to implement shared transition in my app. I want to ImageView in RecyclerView that will be present in next fragment, to have shared transtion from RecyclerView to fragment. But it isn't working. Here is how i did it.

Recycler's item layout

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

    <ImageView
        android:id="@+id/iv_cover"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:scaleType="centerCrop"
        android:transitionName="cover"
        android:src="@drawable/ic_check_circle" />

    <View
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="#30000000" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="150dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/tv_title"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@color/colorPrimary"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:text="BBC"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Caption"
            android:textColor="#fff"
            android:textSize="16dp" />

        <TextView
            android:id="@id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@color/colorPrimary"
            android:maxLines="3"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"
            android:text="NEWS TITLE"
            android:textAppearance="@style/TextAppearance.AppCompat.Caption"
            android:textColor="#fff"
            android:textSize="20sp" />
    </RelativeLayout>
</RelativeLayout>

Fragment layout

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

    <ImageView
        android:id="@+id/iv_cover"
        android:transitionName="cover"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/tv_description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/btn_story"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Read Full Story"
        android:layout_gravity="center"/>
</LinearLayout>

Here is the java code that i used

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //ImageView ivCover = (ImageView) getActivity().findViewById(R.id.iv_cover);
            getActivity().getSupportFragmentManager()
                    .beginTransaction()
                    .replace(android.R.id.content, feedFragment, "Feed")
                    .addSharedElement(cover, "cover")
                    .addToBackStack("Feed")
                    .commit();
        } 

Here is the Fragment Code

@Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        postponeEnterTransition();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            setSharedElementEnterTransition(TransitionInflater.from(getContext()).inflateTransition(android.R.transition.move));
        }
    }
 private void loadData() {
    String title = null;
    String description = null;
    String urlToImage = null;
    String url = null;
    try {
        title = getArguments().getString(ARG_PARAM1);
        description = getArguments().getString(ARG_PARAM2);
        url = getArguments().getString(ARG_PARAM3);
        urlToImage = getArguments().getString(ARG_PARAM4);
    } catch (Exception e) {
        e.printStackTrace();
    }
    if (title != null)
        tvTitle.setText(title);
    if (tvDescription != null)
        tvDescription.setText(description);
    if (urlToImage != null)
        Picasso.with(getActivity()).load(urlToImage).into(ivCover, new Callback() {
            @Override
            public void onSuccess() {
                startPostponedEnterTransition();
            }

            @Override
            public void onError() {
                startPostponedEnterTransition();
            }
        });
}

Here is the style

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- 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:windowContentTransitions">true</item>
</style>

What am i doing wrong? Please guide me here. Thanks

Upvotes: 5

Views: 4916

Answers (1)

Akshay Mahajan
Akshay Mahajan

Reputation: 2190

In your onBindViewHolder, add the following line:

holder.ivCover.setTransitionName("trans_image" + position);

Each Shared element should have a unique transition name.

So instead of .addSharedElement(cover, "cover") ,

write .addSharedElement(cover, imageTransitionName)

where,

imageTransitionName = rv_imageView.getTransitionName(); 

and, depending on your implementation (onClickListener will need view.findViewById() instead of getActivity(). ..) ,

ImageView rv_imageView =(ImageView) getActivity().findViewById(R.id.iv_cover);

Also you can also try fade or slide_right or your own custom transition.

All of this will work in the scenario when you click an item and a new detailed fragment appears

So you need to send imageTransitionName in a bundle...and get that argument in details (say) fragment,like

String imageTransitionName = bundle.getString("TRANS_NAME");
view.findViewById(R.id.iv_cover).setTransitionName(imageTransitionName);

Upvotes: 12

Related Questions