What’s new in Jetpack Compose at I/O ‘24

Posted by Ben Trengrove – Developer Relations Engineer, and Nick Butcher – Product Supervisor for Jetpack Compose

At Google I/O 2024, we introduced the upcoming June ‘24 Jetpack Compose launch, filled with options designed to make Android growth quicker and simpler, it doesn’t matter what type issue you might be constructing for. We additionally introduced expanded Compose assist throughout the ecosystem of Android gadgets. This put up supplies an outline of all of the bulletins, in case you missed any.

Compose June ‘24 launch

Compose is Android’s fashionable, native UI toolkit that’s utilized by apps comparable to Threads, Google Drive, and SoundCloud. This launch provides main options you may have been asking for, together with shared factor transitions and checklist reordering animations, and improves efficiency.

Shared factor transitions

Modifier.sharedElement() and Modifier.sharedBounds() have been added to Compose. They let you create lovely transitions between screens with finer management than the View system allowed. Wrap your AnimatedContent composables in SharedTransitionLayout after which add the Modifier.sharedElement() or Modifier.sharedBounds() onto the content material that you just’d prefer to share between screens. Compose will then discover composables with matching keys and easily transition between them.

Navigation Compose and predictive again animations in Android 15 additionally work easily along with shared factor transitions. This lets you create display screen transitions immediately tied to the navigation gesture, which supplies a top quality consumer expertise.

Take a look at the documentation for extra info.

Lazy checklist merchandise animations

Lazy row and column now have the flexibility to mechanically animate the insertion, removing, and reordering of things. Simply add Modifier.animateItem() to your checklist objects and adjustments will mechanically animate. You can even customise the animation by offering completely different animation specs.

Take a look at the documentation for the directions.

Textual content

Textual content now helps inline hyperlinks and primary HTML formatting by way of the brand new AnnotatedString.fromHtml() extension. This converts primary HTML formatting, together with hyperlinks to an AnnotatedString, which might then be rendered by Compose.

BasicTextField positive aspects a brand new overload that accepts a TextFieldState; a brand new wealthy state object that enables extra sturdy consumer experiences (comparable to wealthy content material like keyboard gifs) and might be hoisted out of the part and up to date asynchronously.

Notice: Materials TextField will likely be up to date to make use of the brand new BasicTextField in a subsequent launch, however in the event you’d prefer to strive it out in your apps, see the documentation.

Contextual Circulation Layouts

A generally requested structure is a lazy move structure that solely composes the content material that may match. When you have ever wanted this performance, ContextualFlowRow and ContextualFlowColumn are for you. Given a max variety of strains, the move structure will compose as many objects that may match after which present you the context of what was rendered. With this context, you may then render a customized increase indicator that reveals a depend of remaining objects.

@OptIn(ExperimentalLayoutApi::class)
@Composable
personal enjoyable SuggestedSnacks(
   snacks: Listing<Snack>,
   onSnackClick: (Snack) -> Unit,
   modifier: Modifier = Modifier
) {
   var maxLines by bear in mind { mutableIntStateOf(1) }
   ContextualFlowRow(
       maxLines = maxLines,
       overflow = ContextualFlowRowOverflow.expandIndicator {
           val remainingItems = totalItemCount - shownItemCount
           MyOverflowIndicator(
               remainingItems = remainingItems,
               modifier = Modifier
                   .clickable {
                       // Develop the max strains on click on
                       maxLines += 1
                   }
           )
       },
       itemCount = snacks.measurement
   ) { index ->
       val snack = snacks[index]
       SnackItem(snack, onSnackClick)
   }
}

Efficiency enhancements

Jetpack Compose continues to get quicker with each launch. We’re happy to report that we’ve got improved the time to first pixel benchmark of our Jetsnack pattern by 17% in comparison with the January launch. We gained these enhancements just by updating the pattern app to the brand new Compose model. The chart under reveals the development in Jetsnack with every Compose launch, for the reason that August 2023 launch we’ve got almost halved the time to first pixel drawn of Jetsnack.

The indication APIs have been rewritten to permit for lazy creation of ripples, which is essential for scroll efficiency. For many apps, there needs to be no adjustments required, however upgrading may introduce breaking adjustments if in case you have customized indications. For assist with the migration, see the brand new documentation.

We proceed to enhance the effectivity of the Compose runtime, which accelerates all Compose code in your app. We’ve re-engineered the slot desk to a extra environment friendly knowledge construction, and we’re additionally producing extra environment friendly code by detecting and eradicating unused composition teams. Moreover, there are new APIs that now let you customise the conduct of lazy structure prefetching.

Sturdy skipping mode

Sturdy skipping mode has graduated from experimental standing and is now production-ready—the upcoming 2.0.20 compiler launch will allow this characteristic by default. Sturdy skipping mode simplifies composable skipping by permitting composables with unstable parameters to be skipped. This implies extra composables will skip mechanically, decreasing the necessity to manually annotate courses as steady. The Now In Android pattern noticed a 20% enchancment in residence display screen recomposition time when enabling robust skipping. For extra particulars see the documentation.

Compose compiler shifting to the Kotlin repository

In case you missed our earlier announcement, the Compose compiler will likely be hosted within the Kotlin repository from Kotlin 2.0. This implies you’ll now not have to attend for an identical Compose compiler to be launched to improve your Kotlin model. For full particulars on this alteration and to study concerning the new Compose Compiler Gradle plugin, see our announcement weblog put up.

Secure APIs

We proceed to stabilize experimental APIs and take away experimental annotations. Notable APIs for this launch embrace Pager, AnchoredDraggable, SegmentedButton, SwipeToDismissBox, Slider, and extra.

Compose assist throughout Android type elements

We proceed to increase Jetpack Compose to all Android type elements to make it quicker and simpler to construct lovely Android apps, it doesn’t matter what Android type issue you might be focusing on. At I/O this 12 months we introduced quite a few updates to assist constructing layouts that adapt throughout display screen sizes, Compose for TV reaching 1.0 Beta and updates to Compose for Put on OS.

Jetpack Libraries

Sort protected navigation in Navigation Compose

As of Jetpack Navigation 2.8.0-alpha08, the Navigation Part has a full kind protected system primarily based on Kotlin Serialization for outlining your navigation graph when utilizing our Kotlin DSL, designed to work greatest with integrations like Navigation Compose.

Now, you may outline your navigation locations and parameters as serializable objects.

// Outline a house vacation spot that does not take any arguments
@Serializable
object Dwelling

// Outline a profile vacation spot that takes an ID
@Serializable
knowledge class Profile(val id: String)

Then, when defining your NavGraph, passing the thing is sufficient. No extra route strings!

NavHost(navController, startDestination = Dwelling) {
    composable<Dwelling> {
        HomeScreen(onNavigateToProfile = { id ->
            navController.navigate(Profile(id))
        })
     }
     composable<Profile> { backStackEntry ->
         val profile: Profile = backStackEntry.toRoute()
         ProfileScreen(profile)
     }
}

For extra info, see this weblog put up.

CameraX Compose

We’re releasing a brand new Compose-specific CameraX artifact known as camera-viewfinder-compose. On this first alpha launch, you should use the brand new Viewfinder composable to show a digicam preview in your display screen that at all times reveals the proper facet ratio and rotation, whether or not you resize your window, unfold your system, or change the show or orientation. It additionally appropriately handles digicam and floor lifecycles, one thing that may be troublesome when coping with cameras. It additionally allows complicated interactions within the digicam coordinate system, making it straightforward so that you can implement gestures comparable to tap-to-focus or pinch-to-zoom.

You need to use the Viewfinder composable even if you aren’t utilizing any of the opposite CameraX libraries, and hyperlink it on to your Camera2 code.

We’re actively engaged on bettering the APIs and are trying ahead to your suggestions! Take a look at the recognized points, and elevate bugs or characteristic requests to assist us create the absolute best digicam expertise in Compose.

Get began

We’re grateful for the entire bug stories and have requests submitted to our concern tracker that led to those adjustments — they assist us to enhance Compose and construct the APIs you want. Please proceed offering your suggestions, and assist us make Compose higher for you.

Questioning what’s subsequent? Take a look at our roadmap to see the options we’re presently enthusiastic about and dealing on. We are able to’t wait to see what you construct.

Comfortable composing!