Added shared element transition between contact row and chat screen #74
Conversation
| prefilledText: String? = null, | ||
| viewModel: ChatViewModel = hiltViewModel(), | ||
| sharedTransitionScope: SharedTransitionScope, | ||
| animatedContentScope: AnimatedContentScope |
There was a problem hiding this comment.
You may want to consider using Composition locals here if the hierarchy is very deep and you find yourself passing these scopes around quite a bit. https://developer.android.com/develop/ui/compose/animation/shared-elements#understand-scopes
| ) | ||
| Text( | ||
| text = contact.name, | ||
| modifier = Modifier.Companion.sharedBounds( |
There was a problem hiding this comment.
You can remove the Companion bit here.
| onVideoClick = {}, | ||
| ) | ||
| SharedTransitionScope { | ||
| AnimatedContent(targetState = 1) {_ -> |
There was a problem hiding this comment.
Rather use AnimatedVisibility(true) here instead of AnimatedContent for previews.
| ) | ||
| } | ||
| composable( | ||
| route = "videoPlayer?uri={videoUri}", |
There was a problem hiding this comment.
You probably want to eventually switch this to also use type safe classes instead of strings.
| modifier = Modifier.fillMaxSize(), | ||
| ) | ||
| SharedTransitionLayout { | ||
| AnimatedContent(targetState = 1) { _ -> |
There was a problem hiding this comment.
Is this a preview? Or where is this used?
If shared elements aren't required in these examples, you could consider creating a Modifier.trySharedElement() that doesn't nessecarily need the scopes and just does a no-op when scopes are not present, and adds the modifiers when scopes are present. Then in screens where its not used, you wouldn't provide the scopes.
There was a problem hiding this comment.
Otherwise I'd change this to AnimatedVisibility(true) for a bit of a cleaner description.
| ) | ||
| .padding(16.dp) | ||
| .sharedBounds( | ||
| sharedTransitionScope.rememberSharedContentState(key = "Bounds${chat.chatWithLastMessage.id}"), |
There was a problem hiding this comment.
If this shared element is quite complex - you might want to consider introducing a class that represents the key - For example like this https://developer.android.com/develop/ui/compose/animation/shared-elements#unique-keys. It means it'll be strongly typed, easier to navigate the codebase and find the corresponding keys, and harder to override if you were to add another shared element on the same screen.
riggaroo
left a comment
riggaroo
left a comment
There was a problem hiding this comment.
Looking good! Left a few suggestions to improve some bits. Can you include a screen recording for the result?
2 participants
Added shared element/shared bounds transition between the contact row and the chat screen.
This demonstrates two simultaneous shared bounds transitions with a shared element transition for the icon.
There's also a bugfix for a Hilt-related crash in bubbles.