{"id":346759,"date":"2025-08-13T13:57:01","date_gmt":"2025-08-13T18:57:01","guid":{"rendered":"https:\/\/michigandigitalnews.com\/index.php\/2025\/08\/13\/whats-new-in-the-jetpack-compose-august-25-release\/"},"modified":"2025-08-13T13:57:01","modified_gmt":"2025-08-13T18:57:01","slug":"whats-new-in-the-jetpack-compose-august-25-release","status":"publish","type":"post","link":"https:\/\/michigandigitalnews.com\/index.php\/2025\/08\/13\/whats-new-in-the-jetpack-compose-august-25-release\/","title":{"rendered":"What\u2019s new in the Jetpack Compose August \u201925 release"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n<\/p>\n

Posted by Meghan Mehta \u2013 Developer Relations Engineer and Nick Butcher \u2013 Product Manager<\/em><\/p>\n

<\/a><\/p>\n

Today, the Jetpack Compose August \u201825 release<\/a> is stable. This release contains version 1.9 of core compose modules (see the full BOM mapping<\/a>), introducing new APIs for rendering shadows, 2D scrolling, rich styling of text transformations, improved list performance, and more!<\/p>\n

To use today\u2019s release, upgrade your Compose BOM<\/a> version to 2025.08.00:<\/p>\n

<\/p>\n

\n
implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"<\/span>))\n<\/pre>\n<\/div>\n
Shadows<\/span><\/h2>\n
We’re happy to introduce two highly requested modifiers: Modifier.dropShadow()<\/a><\/span> and Modifier.innerShadow()<\/a><\/span> allowing you to render box-shadow effects (compared to the existing Modifier.shadow()<\/a><\/span> which renders elevation based shadows based on a lighting model).<\/p>\n
Modifier.dropShadow()<\/span><\/h3>\n
The dropShadow()<\/span> modifier draws a shadow behind your content. You can add it to your composable chain and specify the radius, color, and spread. Remember, content that should appear on top of the shadow (like a background) should be drawn after<\/a><\/i> the dropShadow()<\/span> modifier.<\/p>\n
<\/p>\n
\n
@Composable<\/span>\n@Preview<\/span>(showBackground <\/span>=<\/span> <\/span>true<\/span>)\nfun<\/span> <\/span>SimpleDropShadowUsage<\/span>() <\/span>{\n    <\/span>val<\/span> <\/span>pinkColor<\/span> <\/span>=<\/span> <\/span>Color(0<\/span>xFFe91e63)\n    <\/span>val<\/span> <\/span>purpleColor<\/span> <\/span>=<\/span> <\/span>Color(0<\/span>xFF9c27b0)\n    <\/span>Box(Modifier.fillMaxSize<\/span>()) <\/span>{\n        <\/span>Box(\n            <\/span>Modifier\n                <\/span>.size<\/span>(200.<\/span>dp)\n                <\/span>.align<\/span>(Alignment.Center<\/span>)\n                <\/span>.dropShadow<\/span>(\n                    <\/span>RoundedCornerShape(20.<\/span>dp),\n                    <\/span>dropShadow <\/span>=<\/span> <\/span>DropShadow(\n                        <\/span>15.<\/span>dp,\n                        <\/span>color <\/span>=<\/span> <\/span>pinkColor,\n                        <\/span>spread <\/span>=<\/span> <\/span>10.<\/span>dp,\n                        <\/span>alpha <\/span>=<\/span> <\/span>0.5f<\/span>\n                    <\/span>)\n                <\/span>)\n                <\/span>.background<\/span>(\n                    <\/span>purpleColor,\n                    <\/span>shape <\/span>=<\/span> <\/span>RoundedCornerShape(20.<\/span>dp)\n                <\/span>)\n        <\/span>)\n    <\/span>}\n}\n<\/pre>\n<\/div>\n
<\/p>\n
\"drop<\/div>\n
Figure 1.<\/b> Drop shadow drawn all around shape<\/em><\/center><\/imgcaption><\/image><\/p>\n
Modifier.innerShadow()<\/span><\/h3>\n
The Modifier.innerShadow()<\/span> draws shadows on the inset of the provided shape:<\/p>\n
<\/p>\n
\n
@Composable<\/span>\n@Preview<\/span>(showBackground <\/span>=<\/span> <\/span>true<\/span>)\nfun<\/span> <\/span>SimpleInnerShadowUsage<\/span>() <\/span>{\n    <\/span>val<\/span> <\/span>pinkColor<\/span> <\/span>=<\/span> <\/span>Color(0<\/span>xFFe91e63)\n    <\/span>val<\/span> <\/span>purpleColor<\/span> <\/span>=<\/span> <\/span>Color(0<\/span>xFF9c27b0)\n    <\/span>Box(Modifier.fillMaxSize<\/span>()) <\/span>{\n        <\/span>Box(\n            <\/span>Modifier\n                <\/span>.size<\/span>(200.<\/span>dp)\n                <\/span>.align<\/span>(Alignment.Center<\/span>)\n                <\/span>.background<\/span>(\n                    <\/span>purpleColor,\n                    <\/span>shape <\/span>=<\/span> <\/span>RoundedCornerShape(20.<\/span>dp)\n                <\/span>)\n                <\/span>.innerShadow<\/span>(\n                    <\/span>RoundedCornerShape(20.<\/span>dp),\n                    <\/span>innerShadow <\/span>=<\/span> <\/span>InnerShadow(\n                        <\/span>15.<\/span>dp,\n                        <\/span>color <\/span>=<\/span> <\/span>Color.Black<\/span>,\n                        <\/span>spread <\/span>=<\/span> <\/span>10.<\/span>dp,\n                        <\/span>alpha <\/span>=<\/span> <\/span>0.5f<\/span>\n                    <\/span>)\n                <\/span>)\n        <\/span>)\n    <\/span>}\n}\n<\/pre>\n<\/div>\n
<\/p>\n
\"modifier.innerShadow()<\/div>\n
Figure 2.<\/b> Modifier.innerShadow()<\/span> applied to a shape<\/em><\/center><\/imgcaption><\/image><\/p>\n
The order for inner shadows is very important. The inner shadow draws on top of the content, so for the example above, we needed to move the inner shadow modifier after the background modifier. We\u2019d need to do something similar when using it on top of something like an Image<\/span>. In this example, we\u2019ve placed a separate Box<\/span> to render the shadow in the layer above the image:<\/p>\n
<\/p>\n
\n
@Composable<\/span>\n@Preview<\/span>(showBackground <\/span>=<\/span> <\/span>true<\/span>)\nfun<\/span> <\/span>PhotoInnerShadowExample<\/span>() <\/span>{\n    <\/span>Box(Modifier.fillMaxSize<\/span>()) <\/span>{\n        <\/span>val<\/span> <\/span>shape<\/span> <\/span>=<\/span> <\/span>RoundedCornerShape(20.<\/span>dp)\n        <\/span>Box(\n            <\/span>Modifier\n                <\/span>.size<\/span>(200.<\/span>dp)\n                <\/span>.align<\/span>(Alignment.Center<\/span>)\n        <\/span>) <\/span>{\n            <\/span>Image(\n                <\/span>painter <\/span>=<\/span> <\/span>painterResource(id <\/span>=<\/span> <\/span>R.drawable<\/span>.cape_town<\/span>),\n                <\/span>contentDescription <\/span>=<\/span> <\/span>\"Image with Inner Shadow\"<\/span>,\n                <\/span>contentScale <\/span>=<\/span> <\/span>ContentScale.Crop<\/span>,\n                <\/span>modifier <\/span>=<\/span> <\/span>Modifier.fillMaxSize<\/span>()\n                    <\/span>.clip<\/span>(shape)\n            <\/span>)\n            <\/span>Box(\n                <\/span>modifier <\/span>=<\/span> <\/span>Modifier.fillMaxSize<\/span>()\n                    <\/span>.innerShadow<\/span>(\n                        <\/span>shape,\n                        <\/span>innerShadow <\/span>=<\/span> <\/span>InnerShadow(15.<\/span>dp,\n                            <\/span>spread <\/span>=<\/span> <\/span>15.<\/span>dp)\n                    <\/span>)\n            <\/span>)\n        <\/span>}\n    <\/span>}\n}\n<\/pre>\n<\/div>\n
<\/p>\n
\"Inner<\/div>\n
Figure 3.<\/b>Inner shadow on top of an image<\/em><\/center><\/imgcaption><\/image><\/p>\n
New Visibility modifiers<\/span><\/h2>\n
Compose UI 1.8 introduced onLayoutRectChanged<\/a><\/span>, a new performant way to track the location of elements on screen. We’re building on top of this API to support common use cases by introducing onVisibilityChanged<\/a><\/span> and onFirstVisible<\/a><\/span>.  These APIs accept optional parameters for the minimum fraction or amount of time the item has been visible for before invoking your action.<\/p>\n
Use onVisibilityChanged<\/span> for UI changes or side effects that should happen based on visibility, like automatically playing and pausing videos or starting an animation:<\/p>\n
<\/p>\n
\n
LazyColumn <\/span>{\n  <\/span>items(feedData) <\/span>{ <\/span>video <\/span>-><\/span>\n    <\/span>VideoRow(\n        <\/span>video,\n        <\/span>Modifier.onVisibilityChanged<\/span>(minDurationMs <\/span>=<\/span> <\/span>500<\/span>, <\/span>minFractionVisible <\/span>=<\/span> <\/span>1f<\/span>) <\/span>{\n          <\/span>visible <\/span>-><\/span>\n            <\/span>if<\/span> <\/span>(visible) <\/span>video.play<\/span>() <\/span>else<\/span> <\/span>video.pause<\/span>()\n          <\/span>},\n    <\/span>)\n  <\/span>}\n}\n<\/pre>\n<\/div>\n
Use onFirstVisible<\/span> for use cases when you wish to react to an element first becoming visible on screen for example to log impressions:<\/p>\n
<\/p>\n
\n
LazyColumn <\/span>{\n    <\/span>items(100<\/span>) <\/span>{\n        <\/span>Box(\n            <\/span>Modifier\n                <\/span>\/\/ Log impressions when item has been visible for 500ms<\/span>\n                <\/span>.onFirstVisible<\/span>(minDurationMs <\/span>=<\/span> <\/span>500<\/span>) <\/span>{ <\/span>\/* log impression *\/<\/span> <\/span>}\n                <\/span>.clip<\/span>(RoundedCornerShape(16.<\/span>dp))\n                <\/span>.drawBehind<\/span> <\/span>{ <\/span>drawRect(backgroundColor) <\/span>}\n                <\/span>.fillMaxWidth<\/span>()\n                <\/span>.height<\/span>(100.<\/span>dp)\n        <\/span>)\n    <\/span>}\n}\n<\/pre>\n<\/div>\n
Rich styling in OutputTransformation<\/span><\/span><\/h2>\n
BasicTextField<\/a><\/span> now supports applying styles like color and font weight from within an OutputTransformation<\/a><\/span>.<\/p>\n
The new TextFieldBuffer.addStyle()<\/a><\/span> methods let you apply a SpanStyle<\/a><\/span> or ParagraphStyle<\/a><\/span> to change the appearance of text, without changing the underlying TextFieldState<\/a><\/span>. This is useful for visually formatting input, like phone numbers or credit cards. This method can only be called inside an OutputTransformation<\/span>.<\/p>\n
<\/p>\n
\n
\/\/ Format a phone number and color the punctuation<\/span>\nval<\/span> <\/span>phoneTransformation<\/span> <\/span>=<\/span> <\/span>OutputTransformation <\/span>{\n    <\/span>\/\/ 1234567890 -> (123) 456-7890<\/span>\n    <\/span>if<\/span> <\/span>(length <\/span>==<\/span> <\/span>10<\/span>) <\/span>{\n        <\/span>insert(0<\/span>, <\/span>\"(\"<\/span>)\n        <\/span>insert(4<\/span>, <\/span>\") \"<\/span>)\n        <\/span>insert(9<\/span>, <\/span>\"-\"<\/span>)\n\n        <\/span>\/\/ Color the added punctuation<\/span>\n        <\/span>val<\/span> <\/span>gray<\/span> <\/span>=<\/span> <\/span>Color(0<\/span>xFF666666)\n        <\/span>addStyle(SpanStyle(color <\/span>=<\/span> <\/span>gray), <\/span>0<\/span>, <\/span>1<\/span>)\n        <\/span>addStyle(SpanStyle(color <\/span>=<\/span> <\/span>gray), <\/span>4<\/span>, <\/span>5<\/span>)\n        <\/span>addStyle(SpanStyle(color <\/span>=<\/span> <\/span>gray), <\/span>9<\/span>, <\/span>10<\/span>)\n    <\/span>}\n}\n\nBasicTextField(\n    <\/span>state <\/span>=<\/span> <\/span>myTextFieldState,\n    <\/span>outputTransformation <\/span>=<\/span> <\/span>phoneTransformation\n)\n<\/pre>\n<\/div>\n
LazyLayout<\/span><\/h2>\n
The building blocks of LazyLayout<\/span> are all now stable! Check out LazyLayoutMeasurePolicy<\/a><\/span>, LazyLayoutItemProvider<\/a><\/span>, and LazyLayoutPrefetchState<\/a><\/span> to build your own Lazy components.<\/p>\n
Prefetch Improvements<\/span><\/h3>\n
There are now significant scroll performance improvements in Lazy List<\/a> and Lazy Grid<\/a> with the introduction of new prefetch behavior. You can now define a LazyLayoutCacheWindow<\/a><\/span> to prefetch more content. By default, only one item is composed ahead of time in the direction of scrolling, and after something scrolls off screen it is discarded. You can now customize the amount of items ahead to prefetch and behind to retain through a fraction of the viewport or dp size. When you opt into using LazyLayoutCacheWindow<\/span>, items begin prefetching in the ahead area straight away.<\/p>\n
The configuration entry point for this is on LazyListState<\/span>, which takes in the cache window size:<\/p>\n
<\/p>\n
\n
@OptIn<\/span>(ExperimentalFoundationApi::<\/span>class)\n@Composable<\/span>\nprivate<\/span> <\/span>fun<\/span> <\/span>LazyColumnCacheWindowDemo<\/span>() <\/span>{\n    <\/span>\/\/ Prefetch items 150.dp ahead and retain items 100.dp behind the visible viewport<\/span>\n    <\/span>val<\/span> <\/span>dpCacheWindow<\/span> <\/span>=<\/span> <\/span>LazyLayoutCacheWindow(ahead <\/span>=<\/span> <\/span>150.<\/span>dp, <\/span>behind <\/span>=<\/span> <\/span>100.<\/span>dp)\n    <\/span>\/\/ Alternatively, prefetch\/retain items as a fraction of the list size<\/span>\n    <\/span>\/\/ val fractionCacheWindow = LazyLayoutCacheWindow(aheadFraction = 1f, behindFraction = 0.5f)<\/span>\n    <\/span>val<\/span> <\/span>state<\/span> <\/span>=<\/span> <\/span>rememberLazyListState(cacheWindow <\/span>=<\/span> <\/span>dpCacheWindow)\n    <\/span>LazyColumn(state <\/span>=<\/span> <\/span>state) <\/span>{\n        <\/span>items(1000<\/span>) <\/span>{ <\/span>Text(text <\/span>=<\/span> <\/span>\"<\/span>$<\/span>it\"<\/span>, <\/span>fontSize <\/span>=<\/span> <\/span>80.<\/span>sp) <\/span>}\n    <\/span>}\n}\n<\/pre>\n<\/div>\n
<\/p>\n
\"lazylayout<\/div>\n
<\/image><\/p>\n
Note:<\/b> Prefetch composes more items than are currently visible \u2014 the new cache window API will likely increase prefetching. This means that item’s LaunchedEffects<\/span> and DisposableEffects<\/span> may run earlier \u2013 do not use this as a signal for visibility e.g. for impression tracking. Instead, we recommend using the new onFirstVisible<\/span> and onVisibilityChanged<\/span> APIs. Even if you’re not manually customizing LazyLayoutCacheWindow<\/span> now, avoid using composition effects as a signal of content visibility, as this new prefetch mechanism will be enabled by default in a future release.<\/p><\/blockquote>\n
Scroll<\/span><\/h2>\n
2D Scroll APIs<\/span><\/h3>\n
Following the release of Draggable2D<\/a><\/span>, Scrollable2D<\/a><\/span> is now available, bringing two-dimensional scrolling to Compose. While the existing Scrollable<\/span> modifier handles single-orientation scrolling, Scrollable2D<\/span> enables both scrolling and flinging in 2D. This allows you to create more complex layouts that move in all directions, such as spreadsheets or image viewers. Nested scrolling is also supported, accommodating 2D scenarios.<\/p>\n
<\/p>\n
\n
val<\/span> <\/span>offset<\/span> <\/span>=<\/span> <\/span>remember <\/span>{ <\/span>mutableStateOf(Offset.Zero<\/span>) <\/span>}\nBox(\n    <\/span>Modifier.size<\/span>(150.<\/span>dp)\n        <\/span>.scrollable2D<\/span>(\n            <\/span>state <\/span>=<\/span>\n                <\/span>rememberScrollable2DState <\/span>{ <\/span>delta <\/span>-><\/span>\n                    <\/span>offset.value<\/span> <\/span>=<\/span> <\/span>offset.value<\/span> <\/span>+<\/span> <\/span>delta <\/span>\/\/ update the state<\/span>\n                    <\/span>delta <\/span>\/\/ indicate that we consumed all the pixels available<\/span>\n                <\/span>}\n        <\/span>)\n        <\/span>.background<\/span>(Color.LightGray<\/span>),\n    <\/span>contentAlignment <\/span>=<\/span> <\/span>Alignment.Center<\/span>,\n) <\/span>{\n    <\/span>Text(\n        <\/span>\"X=<\/span>${<\/span>offset.value<\/span>.x<\/span>.roundToInt<\/span>()}<\/span> Y=<\/span>${<\/span>offset.value<\/span>.y<\/span>.roundToInt<\/span>()}<\/span>\"<\/span>,\n        <\/span>style <\/span>=<\/span> <\/span>TextStyle(fontSize <\/span>=<\/span> <\/span>32.<\/span>sp),\n    <\/span>)\n}\n<\/pre>\n<\/div>\n
<\/p>\n
\"moving<\/div>\n
<\/image><\/p>\n
Scroll Interop Improvements<\/span><\/h3>\n
There are bug fixes and new features to improve scroll and nested scroll interop with Views, including the following:<\/p>\n