{"id":791,"date":"2023-08-17T15:05:36","date_gmt":"2023-08-17T12:05:36","guid":{"rendered":"https:\/\/barisuslucan.com\/en\/?p=791"},"modified":"2023-08-17T15:05:36","modified_gmt":"2023-08-17T12:05:36","slug":"jetpack-compose-navigation-animations-made-simple","status":"publish","type":"post","link":"https:\/\/barisuslucan.com\/en\/kotlin\/jetpack-compose-navigation-animations-made-simple\/","title":{"rendered":"Jetpack Compose Navigation: Animations Made Simple"},"content":{"rendered":"

Jetpack compose allows developers to seamlessly integrate impressive animations between screens to enrich the use experience. This results in a reduction of code and enhances its readability. The feature of Jetpack Compose simplifies the complexity of animations in mobile app development, saving developers time.

\"navigation<\/p>\n


Before we start do not forget to implement the below dependency:<\/p>\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
implementation<\/span> <\/span>"<\/span>androidx.navigation:navigation-compose:2.7.0<\/span>"<\/span><\/span><\/code><\/pre><\/div>\n\n\n

And then let’s prepare example screens:<\/p>\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
@Composable<\/span><\/span>\nfun<\/span> <\/span>ScreenA<\/span>(<\/span>navController<\/span>: <\/span>NavController<\/span>) <\/span>{<\/span><\/span>\n    <\/span>Box<\/span>(<\/span><\/span>\n        <\/span>modifier<\/span> <\/span>=<\/span> <\/span>Modifier<\/span><\/span>\n            <\/span>.<\/span>fillMaxSize<\/span>()<\/span>,<\/span><\/span>\n       <\/span>contentAlignment<\/span> <\/span>=<\/span> <\/span>Alignment<\/span>.<\/span>Center<\/span><\/span>\n    ) <\/span>{<\/span><\/span>\n<\/span>\n       <\/span>Text<\/span>(<\/span><\/span>\n           <\/span>modifier<\/span> <\/span>=<\/span> <\/span>Modifier<\/span><\/span>\n               <\/span>.<\/span>padding<\/span>(<\/span>top<\/span>=<\/span>15<\/span>.<\/span>dp<\/span>)<\/span><\/span>\n               <\/span>.<\/span>align<\/span>(<\/span>Alignment<\/span>.<\/span>TopCenter<\/span>)<\/span>,<\/span><\/span>\n           <\/span>text<\/span> <\/span>=<\/span> <\/span>"<\/span>Screen A<\/span>"<\/span>,<\/span><\/span>\n           <\/span>fontSize<\/span> <\/span>=<\/span> 25<\/span>.<\/span>sp<\/span>,<\/span><\/span>\n           <\/span>fontWeight<\/span> <\/span>=<\/span> <\/span>FontWeight<\/span>.<\/span>Bold<\/span>,<\/span><\/span>\n       )<\/span><\/span>\n<\/span>\n       <\/span>Button<\/span>(<\/span><\/span>\n           <\/span>onClick<\/span> <\/span>=<\/span> <\/span>{<\/span><\/span>\n               navController.navigate(<\/span>"<\/span>SCREEN_B<\/span>"<\/span>)<\/span><\/span>\n           }<\/span><\/span>\n<\/span>\n       ) {<\/span><\/span>\n           Text(text = <\/span>"<\/span>Screen B<\/span>"<\/span>)<\/span><\/span>\n       }<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span>\n<\/span>\n@Composable<\/span><\/span>\nfun ScreenB() {<\/span><\/span>\n    Box(<\/span><\/span>\n        modifier = Modifier<\/span><\/span>\n            .fillMaxSize(),<\/span><\/span>\n        contentAlignment = Alignment.Center<\/span><\/span>\n    ) {<\/span><\/span>\n        Text(<\/span><\/span>\n            text = <\/span>"<\/span>Screen B<\/span>"<\/span>,<\/span><\/span>\n            <\/span>fontSize<\/span> <\/span>=<\/span> 25<\/span>.<\/span>sp<\/span>,<\/span><\/span>\n            <\/span>fontWeight<\/span> <\/span>=<\/span> <\/span>FontWeight<\/span>.<\/span>Bold<\/span><\/span>\n        )<\/span><\/span>\n    <\/span>}<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n

Set up your navigation host like the below.<\/p>\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
                <\/span>NavHost<\/span>(<\/span><\/span>\n                    <\/span>navController<\/span> <\/span>=<\/span> <\/span>navHostController<\/span>,<\/span><\/span>\n                    <\/span>startDestination<\/span> <\/span>=<\/span> <\/span>"<\/span>SCREEN_A<\/span>"<\/span><\/span>\n                ) <\/span>{<\/span><\/span>\n                    <\/span>composable<\/span>(<\/span><\/span>\n                        <\/span>route<\/span> <\/span>=<\/span> <\/span>"<\/span>SCREEN_A<\/span>"<\/span><\/span>\n                    ) <\/span>{<\/span><\/span>\n                        <\/span>ScreenA<\/span>(<\/span>navController<\/span> <\/span>=<\/span> <\/span>navHostController<\/span>)<\/span><\/span>\n                    <\/span>}<\/span><\/span>\n<\/span>\n                    <\/span>composable<\/span>(<\/span><\/span>\n                        <\/span>route<\/span> <\/span>=<\/span> <\/span>"<\/span>SCREEN_B<\/span>"<\/span>,<\/span><\/span>\n                        <\/span>enterTransition<\/span> <\/span>=<\/span> <\/span>{<\/span><\/span>\n                            <\/span>slideIntoContainer<\/span>(<\/span><\/span>\n                                <\/span>towards<\/span> <\/span>=<\/span> <\/span>AnimatedContentTransitionScope<\/span>.<\/span>SlideDirection<\/span>.<\/span>Companion<\/span>.<\/span>Left<\/span>,<\/span><\/span>\n                                <\/span>animationSpec<\/span> <\/span>=<\/span> <\/span>tween<\/span>(<\/span>700<\/span>)<\/span><\/span>\n                            <\/span>)<\/span><\/span>\n                        <\/span>},<\/span><\/span>\n<\/span>\n                        <\/span>exitTransition<\/span> <\/span>=<\/span> <\/span>{<\/span><\/span>\n                            <\/span>slideOutOfContainer<\/span>(<\/span><\/span>\n                                <\/span>towards<\/span> <\/span>=<\/span> <\/span>AnimatedContentTransitionScope<\/span>.<\/span>SlideDirection<\/span>.<\/span>Companion<\/span>.<\/span>Left<\/span>,<\/span><\/span>\n                                <\/span>animationSpec<\/span> <\/span>=<\/span> <\/span>tween<\/span>(<\/span>700<\/span>)<\/span><\/span>\n                            <\/span>)<\/span><\/span>\n                        <\/span>},<\/span><\/span>\n                        <\/span>popEnterTransition<\/span> <\/span>=<\/span> <\/span>{<\/span><\/span>\n                            <\/span>slideIntoContainer<\/span>(<\/span><\/span>\n                                <\/span>towards<\/span> <\/span>=<\/span> <\/span>AnimatedContentTransitionScope<\/span>.<\/span>SlideDirection<\/span>.<\/span>Companion<\/span>.<\/span>Right<\/span>,<\/span><\/span>\n                                <\/span>animationSpec<\/span> <\/span>=<\/span> <\/span>tween<\/span>(<\/span>700<\/span>)<\/span><\/span>\n                            <\/span>)<\/span><\/span>\n                        <\/span>},<\/span><\/span>\n                        <\/span>popExitTransition<\/span> <\/span>=<\/span> <\/span>{<\/span><\/span>\n                            <\/span>slideOutOfContainer<\/span>(<\/span><\/span>\n                                <\/span>towards<\/span> <\/span>=<\/span> <\/span>AnimatedContentTransitionScope<\/span>.<\/span>SlideDirection<\/span>.<\/span>Companion<\/span>.<\/span>Right<\/span>,<\/span><\/span>\n                                <\/span>animationSpec<\/span> <\/span>=<\/span> <\/span>tween<\/span>(<\/span>700<\/span>)<\/span><\/span>\n                            <\/span>)<\/span><\/span>\n                        <\/span>}<\/span><\/span>\n                    ) <\/span>{<\/span><\/span>\n                        <\/span>ScreenB<\/span>()<\/span><\/span>\n                    <\/span>}<\/span><\/span>\n                <\/span>}<\/span><\/span><\/code><\/pre><\/div>\n\n\n

The properties enterTransition, exitTransition, popEnterTransition<\/span>, and popExitTransition<\/span> are utilized to define animations during screen transitions. Let’s delve into these properties in detail:

enterTransition:<\/strong> This defines the animation to be used when a screen is being displayed. For instance, when transitioning to the ScreenB, this animation is executed.<\/p>\n
    \n
  • slideIntoContainer<\/code>: Allows the screen to slide in from the outside.<\/li>\n
  • towards = AnimatedContentTransitionScope.SlideDirection.Companion.Left<\/code>: Indicates that the screen slides in from the left.<\/li>\n
  • animationSpec = tween(700)<\/code>: Specifies that the animation will last for 700 milliseconds.<\/li>\n<\/ul>\n

    exitTransition:<\/strong> This defines the animation to be used when a screen is being overlaid by another screen. For example, when transitioning away from the ScreenB to another screen, this animation is executed.<\/p>\n
      \n
    • slideOutOfContainer<\/code>: Allows the screen to slide out to the outside.<\/li>\n
    • towards = AnimatedContentTransitionScope.SlideDirection.Companion.Left<\/code>: Indicates that the screen slides out to the left.<\/li>\n<\/ul>\n

      popEnterTransition:<\/strong> This defines the animation to be used when the back button is pressed or when navigating backward using the NavController.<\/p>\n
        \n
      • slideIntoContainer<\/code>: Allows the screen to slide in from the outside.<\/li>\n
      • towards = AnimatedContentTransitionScope.SlideDirection.Companion.Right<\/code>: Indicates that the screen slides in from the right.<\/li>\n<\/ul>\n

        popExitTransition:\u00a0<\/strong> This defines the animation for how the previous screen will disappear when the back button is pressed or when navigating backward using the NavController.<\/p>\n
          \n
        • slideOutOfContainer<\/code>: Allows the screen to slide out to the outside.<\/li>\n
        • towards = AnimatedContentTransitionScope.SlideDirection.Companion.Right<\/code>: Indicates that the screen slides out to the right.<\/li>\n<\/ul>\n
          Through these animations, transitions between screens are made smoother and more aesthetically pleasing. This code snippet facilitates sliding transitions between ScreenA and ScreenB screens.<\/p>","protected":false},"excerpt":{"rendered":"
          Jetpack compose allows developers to seamlessly integrate impressive animations between screens to enrich the use experience. This results in a reduction of code and enhances its readability. The feature of Jetpack Compose simplifies the complexity of animations in mobile app development, saving developers time. Before we start do not forget to implement the below dependency: And then let’s prepare example screens: Set up your navigation host like the below. The properties enterTransition, exitTransition, popEnterTransition, and popExitTransition are utilized to define animations during screen transitions. Let’s delve into these properties in detail: enterTransition: This defines the animation to be used when…<\/p>\n","protected":false},"author":1,"featured_media":789,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[29],"tags":[],"class_list":["post-791","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kotlin"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts\/791","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/comments?post=791"}],"version-history":[{"count":6,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts\/791\/revisions"}],"predecessor-version":[{"id":800,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts\/791\/revisions\/800"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/media\/789"}],"wp:attachment":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/media?parent=791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/categories?post=791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/tags?post=791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}