:wave: On On SharedTransition API, I’m wondering ...

# compose

[allan.conda]

👋 On On SharedTransition API, I’m wondering if a case has been considered where other similar components are in the target destination, and avoid those elements to share the transition. Let me share details in the thread.

[allan.conda]

Consider this pseudo ui-hierarchy, where List and Item Detail are in different NavHost composable destination:

List:
  ItemRow 1 "Item-1"
    ItemDetail 1 
        ItemTitle "Item-1"
        // Related Items:
        ItemRow 2 "Item-2"
            ItemDetail 2 Title "Item-2"
                ItemRow 4 "Item-4"
                ItemRow 5 "Item-5"
            ItemRow 4 "Item-4"
        ItemRow 3 "Item-3"
  ItemRow 2 "Item-2"
  ItemRow 3 "Item-3"

The problem is that ItemRow 2 and ItemRow 3 also animates into ItemDetail 1 Title when I click on ItemRow 1. The issue looks specially worse because the RelatedItems have a delayed load so the RelatedItemRow animation happens when the transition is already finished.

I want only ItemRow 1 to animate into ItemDetail 1 ItemTitle when I click on it.

I’m wondering if it is possible to achieve this?

To summarize what I want:

Expected:
only Selected ItemRow <-> ItemTitle animation should happen

Actual:
ItemRow <-> ItemRow transition happens
only Selected ItemRow <-> ItemTitle animation should happen

Look for advice on this if anyone has encountered as similar case 🙇

[Doris Liu]

The problem is that ItemRow 2 and ItemRow 3 also animates into ItemDetail 1 Title when I click on ItemRow 1.

Do the ItemRows have different shared element keys? Sounds like multiple rows are matched to the same ItemDetail Title

[allan.conda]

ItemRow 1 is matched to ItemDetail Title, since they share the key “Item-1”

But also List:ItemRow1 is also matched with Detail:ItemRow1 because they have the same key, which I do not want to happen but can’t find a way to make it work in a nested way.

Item Detail layout is like this:

Item Detail
   Title
   Related Items: // loaded asynchronously
   ItemRow 2
   ItemRow 3

I don’t like the effect because I click on ItemRow 1 which is supposed to expand to fullscreen, but ItemRow 2 and ItemRow 3 from the list seems also trying to get in the ItemRow1 ’s “Detail Box”, after 2 seconds when data is loaded. If that makes sense 😅

I can shared a sample video if needed if it’s not clear, and thanks for checking this out!

[Doris Liu]

I would recommend having unique keys for the items. Aside from that, you'll need a key that matches the selected item for your details page. You could also consider using a data object for the keys: https://developer.android.com/develop/ui/compose/animation/shared-elements#unique-keys