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 help throughout the ecosystem of Android units. This put up supplies an summary of all of the bulletins, in case you missed any.
Compose June ‘24 launch
Compose is Android’s trendy, native UI toolkit that’s utilized by apps equivalent to Threads, Google Drive, and SoundCloud. This launch provides main options you’ve gotten 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 will 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 power to routinely animate the insertion, elimination, and reordering of things. Simply add Modifier.animateItem() to your checklist gadgets and adjustments will routinely animate. It’s also possible to customise the animation by offering totally different animation specs.
Take a look at the documentation for the directions.
Textual content
Textual content now helps inline hyperlinks and primary HTML formatting through 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 permits extra sturdy consumer experiences (equivalent to wealthy content material like keyboard gifs) and may be hoisted out of the part and up to date asynchronously.
Word: Materials TextField shall be up to date to make use of the brand new BasicTextField in a subsequent launch, however when you’d prefer to attempt it out in your apps, see the documentation.
Contextual Circulate Layouts
A generally requested format is a lazy circulation format that solely composes the content material that may match. When you’ve got ever wanted this performance, ContextualFlowRow and ContextualFlowColumn are for you. Given a max variety of strains, the circulation format will compose as many gadgets that may match after which present you the context of what was rendered. With this context, you possibly can then render a customized increase indicator that reveals a rely of remaining gadgets.
@OptIn(ExperimentalLayoutApi::class)
@Composable
personal enjoyable SuggestedSnacks(
snacks: Checklist<Snack>,
onSnackClick: (Snack) -> Unit,
modifier: Modifier = Modifier
) {
var maxLines by keep 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.dimension
) { 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 advance in Jetsnack with every Compose launch, because the 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 ought to be no adjustments required, however upgrading would possibly introduce breaking adjustments you probably 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 will let you customise the conduct of lazy format 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 routinely, lowering 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 sturdy skipping. For extra particulars see the documentation.
Compose compiler shifting to the Kotlin repository
In case you missed our earlier announcement, the Compose compiler shall 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 in regards to the new Compose Compiler Gradle plugin, see our announcement weblog put up.
Steady APIs
We proceed to stabilize experimental APIs and take away experimental annotations. Notable APIs for this launch embody Pager, AnchoredDraggable, SegmentedButton, SwipeToDismissBox, Slider, and extra.
Compose help throughout Android type components
We proceed to increase Jetpack Compose to all Android type components 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 yr we introduced quite a lot of updates to help 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 secure navigation in Navigation Compose
As of Jetpack Navigation 2.8.0-alpha08, the Navigation Element has a full kind secure system based mostly on Kotlin Serialization for outlining your navigation graph when utilizing our Kotlin DSL, designed to work finest with integrations like Navigation Compose.
Now, you possibly can outline your navigation locations and parameters as serializable objects.
// Outline a house vacation spot that does not take any arguments
@Serializable
object House
// 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 = House) {
composable<House> {
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 machine, or change the show or orientation. It additionally accurately handles digicam and floor lifecycles, one thing that may be tough when coping with cameras. It additionally permits complicated interactions within the digicam coordinate system, making it simple so that you can implement gestures equivalent to tap-to-focus or pinch-to-zoom.
You should utilize the Viewfinder composable even whenever 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 wanting ahead to your suggestions! Take a look at the recognized points, and increase bugs or characteristic requests to assist us create the very best digicam expertise in Compose.
Get began
We’re grateful for all the bug experiences and have requests submitted to our challenge 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 desirous about and dealing on. We are able to’t wait to see what you construct.
Blissful composing!