Adding shared elements to Jetsnack 🎉 #1314
Conversation
riggaroo
changed the title
…ntent as it transitions in size. Clip the background during transition.
Fix overlap of detail text.
…ared-element # Conflicts: # Jetsnack/gradle/libs.versions.toml
| @@ -41,183 +42,183 @@ val snacks = listOf( | |||
| price = 299 | |||
| ), | |||
| Snack( | |||
| id = 2L, | |||
| id = Random.nextLong(), | |||
There was a problem hiding this comment.
Cupcake above still has a fixed ID. Do these IDs need to be random? Also, isn't it now possible (albeit very improbable) that two snacks end up with the same ID?
There was a problem hiding this comment.
Its for preview purposes to be able to query for a certain snack. yes it is somewhat possible, but this is fake mock data so I dont think its worth the hassle of making it more robust.
…compose-samples into jetsnack/shared-element
…compose-samples into jetsnack/shared-element
| .sharedBounds( | ||
| rememberSharedContentState( | ||
| key = SnackSharedElementKey( | ||
| snackId = snack.id, | ||
| origin = snackCollectionId.toString(), | ||
| type = SnackSharedElementType.Image | ||
| ) | ||
| ), | ||
| animatedVisibilityScope = animatedVisibilityScope, | ||
| boundsTransform = snackDetailBoundsTransform |
There was a problem hiding this comment.
I have a question. 🤔
I think sharedBounds() was used in SnackItem to maintain the visual continuity of space and size, as it involves both an image and text. If there were only an image, would it be appropriate to use sharedElement() instead?
There was a problem hiding this comment.
It depends, if you have an Async image like this in this case, you'd want to use shared bounds as you may be loading up a higher resolution image. If you are using a standard image that you dont expect to be different, then yes you can use sharedElement :)
There was a problem hiding this comment.
May I interpret it such that sharedBounds is used when the resolution of a component is determined dynamically, and sharedElement is employed when it's static?
Additionally, as I have a keen interest in this topic, would you kindly recommend any references I could consult?
There was a problem hiding this comment.
Not exactly,
sharedBounds() is for content that is visually different but should share the same area between states, whereas sharedElement() expects the content to be the same.
See the new documentation for shared elements here:
https://developer.android.com/develop/ui/compose/animation/shared-elements#shared-bounds
There was a problem hiding this comment.
So if you were to apply some other transformations to the image, for example a black and white filter, you'd need to use sharedBounds.
There was a problem hiding this comment.
@riggaroo Thank you for your assistance. 😀
I understand the difference.
|
Will values be added to the 'element' tab later, or is it normal for it to be empty. In my opinion, it would be convenient for debugging to display the values applied to parameters other than the key in sharedContentState.
|
Adding shared elements between Home feed and SnackDetail.
Introduced
SnackSharedElementKeyto create a unique key for the shared element to match.Using
Modifier.sharedBounds()on the Card container, andModifier.sharedElement()on the Image.Using
Modifier.sharedBounds()withModifier.animateEnterExit()on Text.The above modifiers require being in an
AnimatedVisibilityScopeandSharedTransitionScope, in order to use the correct scope at the correct point, we save the scopes in a CompositionLocal and retrieve it when required.jetsnack.mp4