Reputation: 7114
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
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