Posted on May 24, 2024 • Edited on Jun 4, 2024 • Originally published at canopas.com

Exploring Shared Element Transition with Navigation in Compose

#android #beginners #animation #programming

Exciting News! Our blog has a new Home! 🚀

Background

Shared element transitions provide a smooth move between composables that share common content, creating a visual link as users navigate through different screens. These transitions are frequently employed in navigation to ensure a cohesive user experience.

Transitions play a vital role in mobile app design, providing a sense of continuity and improving user engagement.

Jetpack Compose simplifies the process of implementing animations, including shared element transitions when navigating between different composables.

In this blog post, we will explore how to implement shared element transitions in Jetpack Compose using Navigation.

⚠ Experimental: Shared element support is available from Compose 1.7.0-beta01, and is experimental, the APIs may change in future.

What we’ll implement in this blog?

The source code is available on GitHub.

The demonstrated UI is inspired by the Flutter library example for a shoe store, which can be found here.

APIs for Creating Shared Elements in Jetpack Compose

In Compose, there are several high-level APIs to facilitate the creation of shared elements:

SharedTransitionLayout: This is the outermost layout necessary for implementing shared element transitions. It provides a SharedTransitionScope. Composables must be within a SharedTransitionScope to utilize shared element modifiers.
Modifier.sharedElement(): This modifier indicates to the SharedTransitionScope that the composable should be matched with another composable for the transition.
Modifier.sharedBounds(): This modifier signals to the SharedTransitionScope that the composable's bounds should be used as the container bounds for the transition. Unlike sharedElement(), sharedBounds() is intended for visually different content.

Required Dependencies

Start by creating a new Compose project in Android Studio. If you already have a project, ensure you’ve added the necessary dependencies for Jetpack Compose and Navigation.

dependencies { implementation "androidx.compose.foundation:foundation:1.7.0-alpha07" implementation "androidx.navigation:navigation-compose:2.7.7" }

Creating an Immersive Navigation Experience with Shared Element Transitions

Let’s begin our sample implementation with the navigation setup. In this blog, we’ll use SharedTransitionLayout and Modifier.sharedElement.

As per the API instructions, the outermost layer should consist of the SharedTransitionLayout:

@OptIn(ExperimentalSharedTransitionApi::class) @Composable fun ShoesHomeView() { // Sample data stored in Utils object val brandsList by remember { mutableStateOf(Utils.brandList) } // Sample data stored in Utils object val shoesList by remember { mutableStateOf(Utils.shoeList) } // SharedTransitionLayout wraps the content to enable shared element transitions SharedTransitionLayout(modifier = Modifier.fillMaxSize()) { // NavController for navigation within the app val navController = rememberNavController() // NavHost defines the navigation graph and manages navigation NavHost(navController = navController, startDestination = "home") { // Home screen composable composable("home") { ShoesView( navController = navController, brandsList = brandsList, shoesList = shoesList, sharedTransitionScope = this@SharedTransitionLayout, // SharedTransitionLayout provides the SharedTransitionScope animatedVisibilityScope = this@composable // This composable provides the AnimatedVisibilityScope ) } // Detail screen composable composable( "shoe_detail/{index}", arguments = listOf(navArgument("index") { type = NavType.IntType }) ) { backStackEntry -> val index = backStackEntry.arguments?.getInt("index") val shoeDetails = shoesList.getOrNull(index ?: 0) // Display shoe detail if available if (shoeDetails != null) { ShoesDetailView( index = index ?: 0, shoe = shoeDetails, sharedTransitionScope = this@SharedTransitionLayout, // SharedTransitionLayout provides the SharedTransitionScope animatedVisibilityScope = this@composable // This composable provides the AnimatedVisibilityScope ) { navController.popBackStack() // Navigate back when back icon is clicked } } } } } }

With this, we are all set with our navigation that comprises two screens, i.e., ShoesView(Home Screen) and ShoesDetailView.

If you want to use predictive back with shared elements, use the latest navigation-compose dependency, using the snippet from the preceding section.

Add android:enableOnBackInvokedCallback="true" to yourAndroidManifest.xml file to enable predictive back. Here is the visual.

Home View

Here, we are going to see the implementation for ShoesListView and element transition, for detailed UI implementation, you can visit GitHub repository.

From the above navigation setup, we have sharedTransitionScope and animatedVisibilityScope along with the shoes list. We will use HorizontalPager for applying animation while scrolling items along with the combination of currentPageOffsetFraction, pageOffset, and graphicsLayer modifier.

@OptIn(ExperimentalSharedTransitionApi::class) @Composable fun LazyItemScope.ShoesListView( navController: NavController, shoesList: List<Shoe>, sharedTransitionScope: SharedTransitionScope, animatedVisibilityScope: AnimatedVisibilityScope ) { // Pager state to manage horizontal paging through the shoe list val pagerState = rememberPagerState(pageCount = { shoesList.size }) // HorizontalPager composable for displaying shoes horizontally HorizontalPager(state = pagerState, modifier = Modifier.padding(vertical = 8.dp)) { currentPage -> // Calculate current page offset for animation purposes val currentPageOffset = (pagerState.currentPage + pagerState.currentPageOffsetFraction - currentPage).coerceIn(-1f, 1f) // Calculate animations for shoe and card transformations val shoeRotationZ = lerp(-45f, 0f, 1f - currentPageOffset) val shoeTranslationX = lerp(150f, 0f, 1f - currentPageOffset) val shoesAlpha = lerp(0f, 1f, 1f - currentPageOffset) val shoesOffsetX = lerp(30f, 0f, 1f - currentPageOffset) val pageOffset = ((pagerState.currentPage - currentPage) + pagerState.currentPageOffsetFraction) val cardAlpha = lerp(0.4f, 1f, 1f - pageOffset.absoluteValue.coerceIn(0f, 1f)) val cardRotationY = lerp(0f, 40f, pageOffset.coerceIn(-1f, 1f)) val cardScale = lerp(0.5f, 1f, 1f - pageOffset.absoluteValue.coerceIn(0f, 1f)) // ShoeItemView composable for displaying individual shoes ShoeItemView( shoe = shoesList[currentPage], cardScale = cardScale, shoeRotationZ = shoeRotationZ, shoeTranslationX = shoeTranslationX, shoesAlpha = shoesAlpha, shoesOffsetX = shoesOffsetX, cardAlpha = cardAlpha, cardRotationY = cardRotationY, sharedTransitionScope = sharedTransitionScope, animatedVisibilityScope = animatedVisibilityScope, currentPage = currentPage ) { navController.navigate("shoe_detail/${currentPage}") // Navigate to shoe detail screen } } } @OptIn(ExperimentalSharedTransitionApi::class, ExperimentalAnimationSpecApi::class) @Composable fun LazyItemScope.ShoeItemView( shoe: Shoe, cardScale: Float, shoeRotationZ: Float, shoeTranslationX: Float, shoesAlpha: Float, shoesOffsetX: Float, cardAlpha: Float, cardRotationY: Float, sharedTransitionScope: SharedTransitionScope, animatedVisibilityScope: AnimatedVisibilityScope, currentPage: Int, onClick: () -> Unit ) { with(sharedTransitionScope) { // Transformation for bounds of shared elements to customize how // the shared element transition animation runs val boundsTransform = BoundsTransform { initialBounds, targetBounds -> keyframes { durationMillis = 1000 initialBounds at 0 using ArcMode.ArcBelow using FastOutSlowInEasing targetBounds at 1000 } } // Transformation for text bounds val textBoundsTransform = { _: Rect, _: Rect -> tween<Rect>(550) } // Main container for shoe item Box( modifier = Modifier .fillMaxWidth() .padding(horizontal = 60.dp) .clickable { onClick() }, contentAlignment = Alignment.Center ) { // Container for card Box( modifier = Modifier .fillMaxWidth() .graphicsLayer { rotationY = cardRotationY alpha = cardAlpha cameraDistance = 8 * density scaleX = cardScale scaleY = cardScale } .aspectRatio(0.8f) ) { // Background box for the shoe Box( modifier = Modifier .fillMaxSize() .clip(RoundedCornerShape(16.dp)) .background(shoe.color) .sharedElement( rememberSharedContentState(key = "${Constants.KEY_BACKGROUND}-$currentPage"), animatedVisibilityScope = animatedVisibilityScope, boundsTransform = boundsTransform ) ) // Text displaying shoe name Text( text = shoe.name, style = MaterialTheme.typography.titleLarge.copy( color = MaterialTheme.colorScheme.onPrimary ), modifier = Modifier .fillMaxWidth(0.7f) .padding(16.dp) .align(Alignment.TopStart) .sharedElement( rememberSharedContentState(key = "${Constants.KEY_SHOE_TITLE}-$currentPage"), animatedVisibilityScope = animatedVisibilityScope, boundsTransform = textBoundsTransform ) ) // Favorite icon button IconButton( onClick = { /*TODO*/ }, modifier = Modifier .align(Alignment.TopEnd) .padding(8.dp) .sharedElement( rememberSharedContentState(key = "${Constants.KEY_FAVOURITE_ICON}-$currentPage"), animatedVisibilityScope = animatedVisibilityScope, boundsTransform = textBoundsTransform ) ) { Icon( imageVector = Icons.Default.FavoriteBorder, contentDescription = "Favorite", tint = MaterialTheme.colorScheme.onPrimary, modifier = Modifier.size(30.dp) ) } // Details icon button IconButton(onClick = { /*TODO*/ }, modifier = Modifier.align(Alignment.BottomEnd)) { Icon( imageVector = Icons.AutoMirrored.Filled.ArrowForward, contentDescription = "Details", tint = MaterialTheme.colorScheme.onPrimary, ) } } // Image displaying shoe image Image( painter = painterResource(id = shoe.image), contentDescription = "Shoe Image", modifier = Modifier .fillParentMaxWidth() .zIndex(1f) .graphicsLayer { rotationZ = shoeRotationZ translationX = shoeTranslationX alpha = shoesAlpha } .offset(x = shoesOffsetX.dp, y = 0.dp) .sharedElement( rememberSharedContentState(key = "${Constants.KEY_SHOE_IMAGE}-$currentPage"), animatedVisibilityScope = animatedVisibilityScope, boundsTransform = boundsTransform ) ) } } } /** * Function to interpolate between two values with a given amount. * */ fun lerp(start: Float, stop: Float, amount: Float): Float { return start + (stop - start) * amount }

To enable shared element transition, we used Modifier.sharedElement() API that takes an AnimatedVisibilityScope as a parameter.
The key parameter in rememberSharedContentState() is the important thing that helps in shared element transition, ensuring that the transition is applied consistently across screens.
The boundTransformation is used for customizing how the shared element transition animation runs.
To change the animation spec used for the size and position movement, you can specify a different boundsTransform parameter on Modifier.sharedElement(). This provides the initial Rect position and target Rect position.
You can explore more customization from the official doc.

With the above code, we are all set for home screen content with pager animations as well.

This post only has implementation until HomeView, to read the complete guide including shared element usage at DetailScreen, please visit this blog.

The post is originally published on canopas.com.

If you like what you read, be sure to hit
💖 button below! — as a writer it means the world!

I encourage you to share your thoughts in the comments section below. Your input not only enriches our content but also fuels our motivation to create more valuable and informative articles for you.