-
Notifications
You must be signed in to change notification settings - Fork 4.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adding shared elements to Jetsnack 🎉 #1314
base: compose-latest
Are you sure you want to change the base?
Conversation
…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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@riggaroo Thank you for your assistance. 😀
I understand the difference.
Adding shared elements between Home feed and SnackDetail.
Introduced
SnackSharedElementKey
to 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
AnimatedVisibilityScope
andSharedTransitionScope
, 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