Multiple Shared Elements

Question

I have the following situation inside of a soccer application.
We want to implement the shared elements between all these activities.

In my viewholder on the first Activity for the match I have set a android:transitionName which corresponds to the same transitionName on the second Activity.

<!-- item_viewholder (first activity) -->
<CustomViewContainingImageViewAndTextView
     android:id="@+id/item_match_hometeam"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:transitionName="@string/transition_morph_match_header_homeTeam" />

<!-- header (second activity) -->
<CustomViewContainingImageViewAndTextView
     android:id="@+id/item_match_hometeam_header"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:transitionName="@string/transition_morph_match_header_homeTeam" />

I start the second Activity with

final String awayTeamTransition = activityContext.getString(R.string.transition_morph_match_header_awayTeam);
final String homeTeamTransition = activityContext.getString(R.string.transition_morph_match_header_homeTeam);
final ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(
                   activityContext,
                   Pair.create(homeTeam, homeTeamTransition),
                   Pair.create(awayTeam, awayTeamTransition));
activityContext.startActivity(intent, options.toBundle());

Now this transition works fine but what if I want to have an even deeper detail.
Displaying statistics about the selected team and I want to have shared transition there too?

I tried setting the transitionName programmatically when the CustomViewContainingImageViewAndTextView was clicked to the new transitionName.

final String teamViewTransition = activityContext.getString(R.string.transition_morph_teamview_to_detail);
//teamView is the view that was clicked.
ViewCompat.setTransitionName(teamView, teamViewTransition);

final ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(
     activityContext,
     Pair.create(teamView, teamViewTransition));
activityContext.startActivity(teamInfoActivityIntent, options.toBundle());

this transitionName corresponds to the ImageView on the third Activity

<ImageView
   android:id="@+id/team_info_header_logo"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:transitionName="@string/transition_morph_teamview_to_detail" />

However the enterTransition fails, but the exitTransition works!
However this breaks the exitTransition from 2 --> 1

Sight. Hope someone takes some time to figure this out.

Thanks in advance

score 12 · Answer 1 · answered Jun 02 '16 at 12:54

Beyond any doubt, the problem is because you are changing transitionName of the view that you want to share from second Activity to third. But you should simply keep that transitionName in the second Activity but change transitionName of the view in third Activity's onCreate method, according to what we want to share from second Activity.

So let's keep our transition from first Activity to second, as it's working as expected. Let's look at the second Activity: we just need to send the transitionName of view, that we want to share as an extra of Intent to third Activity and then assign this value programmatically to the shared view in third Activity.

So here is the code of our second Activity:

View homeTeam = findViewById(R.id.home_team_detail);
View awayTeam = findViewById(R.id.away_team_detail);

View.OnClickListener onTeamClickListener = new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Activity activityContext = MultipleElementsDetail.this;
        final ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(
                activityContext,
                Pair.create(v, v.getTransitionName()));
        startActivity(new Intent(activityContext, SingleElementDetail.class)
           .putExtra("shared_element_transition_name", v.getTransitionName()), options.toBundle());
    }
};

homeTeam.setOnClickListener(onTeamClickListener);
awayTeam.setOnClickListener(onTeamClickListener);

So what I did here is just created the same OnClickListener for both teams, which creates shared transition, and starts new activity with Intent having transitionName of shared view as an extra.

And then in third Activity I've just get this extra from Intent and set it as a transitionName of shared view:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_single_element_detail);

    View team = findViewById(R.id.team_single);

    String transitionName = getIntent().getStringExtra("shared_element_transition_name");
    if (!TextUtils.isEmpty(transitionName)) {
        ViewCompat.setTransitionName(team, transitionName);
    }
}

And as a result we have something like this (I've used explode transition to better see the difference between activities):

Hope that helps and exactly the same what you want! :)

Hey man! I like your solution however my imageView in my third activity is in an fragment and in a recyclerview. So I would have to give my transition name to my activity pass it to my fragment pass it to my adapter pass it to my viewholder. What a hassle... — timr, Jun 05 '16 at 13:54
Yep, or you can save it in `SharedPreferences` or in database and then extract it in your `ViewHolder`/`Adapter`. Or you can set it as a `static` variable somewhere. Or you can even set it as a field in your model (i.e. `Team` class, it would be the simpliest way) and again then extract in `onBindViewHolder`. Anyway, you need to set it in runtime, cause you don't know what would be shared until it would be clicked :) — romtsn, Jun 05 '16 at 14:56
Could you post the code for this? I somehow just couldn't reproduce what you presented. — xiaoyu, Dec 06 '19 at 13:52

score 8 · Answer 2 · answered Mar 30 '17 at 16:30

I had this doubt myself, but I feel like the answer above is a little bit confusing. To put it simply if you have more than one shared elements to animate, you can create "Pair" of View & transitionName as much as you want. Here is a sample code for this:

    Pair statusAnim = Pair.create(holder.getOrderStatusView(), "track_job_status");
    Pair driverBundleAnim = Pair.create(holder.getDriverProfileBundle(), "driver_profile_bundle");
    ActivityOptions transitionActivityOptions = ActivityOptions.makeSceneTransitionAnimation((Activity) context, statusAnim, driverBundleAnim);
    context.startActivity(new Intent(context, TrackingActivity.class), transitionActivityOptions.toBundle());

Multiple Shared Elements

2 Answers2

Linked