\n
![](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjiHsgx03_pIhu49ZCTyXVL6E4fv9gcl03Ze2FBajjx3tEjA4jP3ywIVSQeE09YfkPDpGGqa2odqrbeSABDs10Q_TbP4r5MSvvUenhggHVq0HMiPqfvrIZDywm3GSDZqxdKqqaI_cdfZ0PFdUzKNgqsVYjW2IP2FkoOzSrcx6zNvxlMrNR31qEdf4_o-rU\/s1600\/social-What%E2%80%99s-new-in-Jetpack-Compose-at-IO-24.png\")
<\/p>\nPosted by Ben Trengrove \u2013 Developer Relations Engineer, and Nick Butcher \u2013 Product Manager for Jetpack Compose<\/em><\/p>\n At Google I\/O 2024, we announced the upcoming June \u201824 Jetpack Compose release, packed with features designed to make Android development faster and easier, no matter what form factor you are building for. We also announced expanded Compose support across the ecosystem of Android devices. This post provides an overview of all the announcements, in case you missed any.<\/p>\n Compose<\/a> is Android’s modern, native UI toolkit that is used by apps<\/a> such as Threads<\/a>, Google Drive<\/a>, and SoundCloud<\/a>. This release adds major features you have been asking for, including shared element transitions and list reordering animations, and improves performance.<\/p>\n Navigation Compose and predictive back animations in Android 15 also work smoothly together with shared element transitions. This allows you to create screen transitions directly tied to the navigation gesture, which provides a high quality user experience.<\/p>\n Check out the documentation<\/a> for more information.<\/p>\n Lazy row and column now have the ability to automatically animate the insertion, removal, and reordering of items. Just add Modifier.animateItem()<\/span> to your list items and changes will automatically animate. You can also customize the animation by providing different animation specifications.<\/p>\n Check out the documentation<\/a> for the instructions.<\/p>\n Text now supports inline links and basic HTML formatting via the new AnnotatedString.fromHtml()<\/a><\/span> extension. This converts basic HTML formatting, including links to an AnnotatedString<\/a><\/span>, which can then be rendered by Compose.<\/p>\n BasicTextField<\/a><\/span> gains a new overload that accepts a TextFieldState<\/a><\/span>; a new rich state object that allows more robust user experiences (such as rich content like keyboard gifs) and can be hoisted out of the component and updated asynchronously.<\/p>\n Note: Material TextField<\/span> will be updated to use the new BasicTextField<\/span> in a subsequent release, but if you\u2019d like to try it out in your apps, see the documentation<\/a>.<\/p>\n<\/blockquote>\n \nA commonly requested layout is a lazy flow layout that only composes the content that can fit. If you have ever needed this functionality, ContextualFlowRow<\/a><\/span> and ContextualFlowColumn<\/a><\/span> are for you. Given a max number of lines, the flow layout will compose as many items that can fit and then provide you the context of what was rendered. With this context, you can then render a custom expand indicator that shows a count of remaining items.<\/p>\n Jetpack Compose continues to get faster with every release. We are pleased to report that we have improved the time to first pixel benchmark of our Jetsnack sample by 17% compared to the January release. We gained these improvements simply by updating the sample app to the new Compose version. The chart below shows the improvement in Jetsnack with each Compose release, since the August 2023 release we have nearly halved the time to first pixel drawn of Jetsnack.<\/p>\n The indication APIs have been rewritten to allow for lazy creation of ripples, which is very important for scroll performance. For most apps, there should be no changes required, but upgrading might introduce breaking changes if you have custom indications. For help with the migration, see the new documentation<\/a>.<\/p>\n We continue to improve the efficiency of the Compose runtime, which speeds up all Compose code in your app. We\u2019ve re-engineered the slot table to a more efficient data structure, and we are also generating more efficient code by detecting and removing unused composition groups. Additionally, there are new APIs<\/a> that now allow you to customize the behavior of lazy layout prefetching.<\/p>\n Strong skipping mode has graduated from experimental status and is now production-ready\u2014the upcoming 2.0.20 compiler release will enable this feature by default. Strong skipping mode simplifies composable skipping by allowing composables with unstable parameters to be skipped. This means more composables will skip automatically, reducing the need to manually annotate classes as stable. The Now In Android<\/a> sample saw a 20% improvement in home screen recomposition time when enabling strong skipping. For more details see the documentation<\/a>.<\/p>\n In case you missed our previous announcement<\/a>, the Compose compiler will be hosted in the Kotlin repository from Kotlin 2.0. This means you will no longer have to wait for a matching Compose compiler to be released to upgrade your Kotlin version. For full details on this change and to learn about the new Compose Compiler Gradle plugin, see our announcement blog post<\/a>.<\/p>\n We continue to stabilize experimental APIs and remove experimental annotations. Notable APIs for this release include Pager<\/span><\/a>, AnchoredDraggable<\/span><\/a>, SegmentedButton<\/span><\/a>, SwipeToDismissBox<\/span><\/a>, Slider<\/span><\/a>, and more.<\/p>\n We continue to extend Jetpack Compose to all Android form factors to make it faster and easier to build beautiful Android apps, no matter what Android form factor you are targeting. At I\/O this year we announced a number of updates to support building layouts that adapt across screen sizes<\/a>, Compose for TV<\/a> reaching 1.0 Beta and updates to Compose for Wear OS<\/a>.<\/p>\n As of Jetpack Navigation 2.8.0-alpha08, the Navigation Component has a full type safe system based on Kotlin Serialization for defining your navigation graph when using our Kotlin DSL, designed to work best with integrations like Navigation Compose.<\/p>\n Now, you can define your navigation destinations and parameters as serializable objects.<\/p>\n Then, when defining your NavGraph<\/span>, passing the object is enough. No more route strings!<\/p>\n For more information, see this blog post<\/a>.<\/p>\n We are releasing a new Compose-specific CameraX artifact called camera-viewfinder-compose<\/span>. In this first alpha release<\/a>, you can use the new Viewfinder<\/span> composable to display a camera preview on your screen that always shows the correct aspect ratio and rotation, whether you resize your window, unfold your device, or change the display or orientation. It also correctly handles camera and surface lifecycles, something that can be difficult when dealing with cameras. It also enables complex interactions in the camera coordinate system, making it easy for you to implement gestures such as tap-to-focus or pinch-to-zoom.<\/p>\n You can use the Viewfinder<\/span> composable even when you aren\u2019t using any of the other CameraX libraries, and link it directly to your Camera2 code.<\/p>\n We are actively working on improving the APIs and are looking forward to your feedback! Check out the known issues<\/a>, and raise bugs or feature requests<\/a> to help us create the best possible camera experience in Compose.<\/p>\n We\u2019re grateful for all of the bug reports and feature requests submitted to our issue tracker<\/a> that led to these changes \u2014 they help us to improve Compose and build the APIs you need. Please continue providing your feedback, and help us make Compose better for you.<\/p>\n Wondering what\u2019s next? Check out our roadmap<\/a> to see the features we\u2019re currently thinking about and working on. We can\u2019t wait to see what you build.<\/p>\n Happy composing!<\/p>\n<\/div>\n![](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhe8ysY9PjhnMfmY1OASEvKI1hyphenhyphenLh-oAIrrlUAb87og0ZesmAVlf7_JauqiIG9gttYy7Y1O4D7YRZY0jzcH4lgS5QZCU3OSptHYh7bg9jlUYONoGyWG2L4zYTNTYj8YPIoq0n6bCfwTabXJeyE09ZQYbZzHKXDwPEdVy2Ti5wO69jIdAqQxa1l7HR-A3-Q\/s1600\/HEADER-What%E2%80%99s-new-in-Jetpack-Compose-at-IO-24%20%281%29.png\")
<\/a><\/p>\nCompose June \u201824 release <\/h3>\n
Shared element transitions<\/span><\/h4>\n
<\/a><\/div>\n
\nModifier.sharedElement()<\/span> and Modifier.sharedBounds()<\/span> have been added to Compose. They allow you to create beautiful transitions between screens with finer control than the View system allowed. Wrap your AnimatedContent<\/span> composables in SharedTransitionLayout<\/span> and then add the Modifier.sharedElement()<\/span> or Modifier.sharedBounds()<\/span> onto the content that you\u2019d like to share between screens. Compose will then find composables with matching keys and smoothly transition between them.<\/p>\nLazy list item animations<\/span><\/h4>\n
<\/a><\/div>\nText<\/span><\/h4>\n
\n
Contextual Flow Layouts<\/span><\/h4>\n
@OptIn<\/span>(<\/span>ExperimentalLayoutApi:<\/span>:<\/span>class)<\/span>\n@Composable<\/span>\nprivate<\/span> fun SuggestedSnacks<\/span>(<\/span>\n snacks:<\/span> List<<\/span>Snack>,<\/span>\n onSnackClick:<\/span> (<\/span>Snack)<\/span> -><\/span> Unit,<\/span>\n modifier:<\/span> Modifier =<\/span> Modifier\n)<\/span> {<\/span>\n var maxLines by remember {<\/span> mutableIntStateOf(<\/span>1<\/span>)<\/span> }<\/span>\n ContextualFlowRow(<\/span>\n maxLines =<\/span> maxLines,<\/span>\n overflow =<\/span> ContextualFlowRowOverflow.<\/span>expandIndicator<\/span> {<\/span>\n val remainingItems =<\/span> totalItemCount -<\/span> shownItemCount\n MyOverflowIndicator(<\/span>\n remainingItems =<\/span> remainingItems,<\/span>\n modifier =<\/span> Modifier\n .<\/span>clickable<\/span> {<\/span>\n \/\/ Expand the max lines on click<\/span>\n maxLines +=<\/span> 1<\/span>\n }<\/span>\n )<\/span>\n },<\/span>\n itemCount =<\/span> snacks.<\/span>size<\/span>\n )<\/span> {<\/span> index -><\/span>\n val snack =<\/span> snacks[<\/span>index]<\/span>\n SnackItem(<\/span>snack,<\/span> onSnackClick)<\/span>\n }<\/span>\n}<\/span><\/span>\n<\/pre>\n<\/div>\n<\/a><\/div>\nPerformance improvements<\/span><\/h4>\n
<\/a><\/div>\nStrong skipping mode<\/span><\/h4>\n
Compose compiler moving to the Kotlin repository<\/span><\/h4>\n
Stable APIs<\/span><\/h4>\n
Compose support across Android form factors<\/h3>\n
Jetpack Libraries<\/h3>\n
Type safe navigation in Navigation Compose<\/span><\/h4>\n
\/\/ Define a home destination that doesn't take any arguments<\/span>\n@Serializable<\/span>\nobject Home\n\n\/\/ Define a profile destination that takes an ID<\/span>\n@Serializable<\/span>\ndata class<\/span> Profile<\/span>(<\/span>val id:<\/span> String)<\/span>\n<\/span><\/pre>\n<\/div>\nNavHost(<\/span>navController,<\/span> startDestination =<\/span> Home)<\/span> {<\/span>\n composable<<\/span>Home><\/span> {<\/span>\n HomeScreen(<\/span>onNavigateToProfile =<\/span> {<\/span> id -><\/span>\n navController.<\/span>navigate<\/span>(<\/span>Profile(<\/span>id))<\/span>\n })<\/span>\n }<\/span>\n composable<<\/span>Profile><\/span> {<\/span> backStackEntry -><\/span>\n val profile:<\/span> Profile =<\/span> backStackEntry.<\/span>toRoute<\/span>()<\/span>\n ProfileScreen(<\/span>profile)<\/span>\n }<\/span>\n}<\/span><\/span>\n<\/pre>\n<\/div>\nCameraX Compose<\/span><\/h4>\n
Get started<\/h3>\n