[Jetsnack] Adding shared elements to Jetsnack 🎉 #1314
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
riggaroo
changed the title
…ntent as it transitions in size. Clip the background during transition.
Fix overlap of detail text.
…compose-samples into jetsnack/shared-element
Contributor
|
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.
|
# Conflicts: # Jetsnack/app/src/main/java/com/example/jetsnack/model/Snack.kt # Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Snacks.kt # Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt # Jetsnack/app/src/main/res/drawable-nodpi/almonds.jpg # Jetsnack/app/src/main/res/drawable-nodpi/cupcake.jpg # Jetsnack/app/src/main/res/drawable-nodpi/fruit.jpg # Jetsnack/app/src/main/res/drawable-nodpi/gingerbread.jpg # Jetsnack/app/src/main/res/drawable-nodpi/gluten_free.jpg # Jetsnack/app/src/main/res/drawable-nodpi/nuts.jpg # Jetsnack/app/src/main/res/drawable-nodpi/paleo.jpg # Jetsnack/app/src/main/res/drawable-nodpi/pretzels.jpg
riggaroo
changed the title
JolandaVerhoef
approved these changes
Aug 7, 2024
…compose-samples into jetsnack/shared-element
qqvladik
added a commit
to qqvladik/RnM
that referenced
this pull request
Feb 24, 2025
- Add `sharedBounds` and `sharedElement` to `CharacterCard` and `CharacterDetailScreen` for animated transitions. - As It said in https://developer.android.com/develop/ui/compose/animation/shared-elements#shared-bounds: "When using Text composables, sharedBounds() is preferred to support font changes such as transitioning between italic and bold or color changes." - Also in future Modifier.skipToLookaheadSize() can be used for animation of big texts, as it said here https://fvilarino.medium.com/shared-element-transitions-in-jetpack-compose-8f553078101e : "The skipToLookaheadSize() modifier instructs the animation framework to measure the animated child at its final size and to layout the child at that size." - Theoretically for image animation also can be sharedBounds(). For example, in case if higher resolution image is uploaded in Details. SharedBound() vs sharedElement(): android/compose-samples#1314 - "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 :)"
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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