Add an example of seeking between shared element states manually using SeekableTransitionState

.github/workflows/apply_spotless.yml

@@ -30,12 +30,12 @@ jobs:
 
  steps:
  - name: Checkout Repository
- uses: actions/checkout@v4
+ uses: actions/checkout@v3
  with:
  token: ${{ secrets.PAT || github.token }}
 
  - name: set up Java 17
- uses: actions/setup-java@v4
+ uses: actions/setup-java@v2
  with:
  distribution: 'zulu'
  java-version: '17'
@@ -44,6 +44,6 @@ jobs:
  run: ./gradlew :compose:spotlessApply --init-script gradle/init.gradle.kts --no-configuration-cache --stacktrace
 
  - name: Auto-commit if spotlessApply has changes
- uses: stefanzweifel/git-auto-commit-action@v5
+ uses: stefanzweifel/git-auto-commit-action@v4
  with:
  commit_message: Apply Spotless

.github/workflows/build.yml

@@ -29,11 +29,11 @@ jobs:
  timeout-minutes: 30
 
  steps:
- - uses: actions/checkout@v4
+ - uses: actions/checkout@v3
  with:
  token: ${{ secrets.PAT || github.token }}
  - name: set up Java 17
- uses: actions/setup-java@v4
+ uses: actions/setup-java@v2
  with:
  distribution: 'zulu'
  java-version: '17'

.github/workflows/sync_main_latest.yml

@@ -1,6 +1,5 @@
 name: Sync main and latest
 on:
- workflow_dispatch:
  push:
  branches:
  - main
@@ -11,17 +10,14 @@ jobs:
  name: Syncing branches
  steps:
  - name: Checkout
- uses: actions/checkout@v4
-
- - name: Set git config user
- run: git config user.email "compose-devrel-github-bot@google.com" && git config user.name "compose-devrel-github-bot"
+ uses: actions/checkout@v3
 
  - name: Merge main into latest
- run: git fetch && git switch latest && git merge -s ours origin/main --allow-unrelated-histories
+ run: git checkout latest && git merge main
 
  - name: Create pull request
  id: cpr
- uses: peter-evans/create-pull-request@v6
+ uses: peter-evans/create-pull-request@v4
  with:
  token: ${{ secrets.PAT }}
  commit-message: 🤖 Sync main to latest
@@ -31,5 +27,5 @@ jobs:
  branch: bot-sync-main
  delete-branch: true
  title: '🤖 Sync main to latest'
- body: 'Update `latest` with `main`'
+ body: Updated dependencies
  reviewers: ${{ github.actor }}

.github/workflows/update_deps.yml

@@ -7,9 +7,9 @@ jobs:
  build:
  runs-on: ubuntu-latest
  steps:
- - uses: actions/checkout@v4
+ - uses: actions/checkout@v3
  - name: set up JDK 17
- uses: actions/setup-java@v4
+ uses: actions/setup-java@v3
  with:
  java-version: 17
  distribution: 'zulu'
@@ -19,7 +19,7 @@ jobs:
  run: ./gradlew versionCatalogUpdate
  - name: Create pull request
  id: cpr
- uses: peter-evans/create-pull-request@v6
+ uses: peter-evans/create-pull-request@v4
  with:
  token: ${{ secrets.PAT }}
  commit-message: 🤖 Update Dependencies

compose/recomposehighlighter/src/main/java/com/example/android/compose/recomposehighlighter/MainActivity.kt

@@ -26,7 +26,7 @@ import androidx.compose.material.Button
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
@@ -43,7 +43,7 @@ class MainActivity : ComponentActivity() {
 
 @Composable
 private fun Content() {
- var counter by remember { mutableIntStateOf(0) }
+ var counter by remember { mutableStateOf(0) }
  Column(
  Modifier
  .fillMaxSize()

compose/recomposehighlighter/src/main/java/com/example/android/compose/recomposehighlighter/RecomposeHighlighter.kt

@@ -16,140 +16,100 @@
 
 package com.example.android.compose.recomposehighlighter
 
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.Stable
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.draw.drawWithCache
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
-import androidx.compose.ui.graphics.drawscope.ContentDrawScope
 import androidx.compose.ui.graphics.drawscope.Fill
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.graphics.lerp
-import androidx.compose.ui.node.DrawModifierNode
-import androidx.compose.ui.node.ModifierNodeElement
-import androidx.compose.ui.node.invalidateDraw
-import androidx.compose.ui.platform.InspectorInfo
 import androidx.compose.ui.platform.debugInspectorInfo
 import androidx.compose.ui.unit.dp
-import java.util.Objects
 import kotlin.math.min
-import kotlinx.coroutines.Job
 import kotlinx.coroutines.delay
-import kotlinx.coroutines.launch
 
 /**
  * A [Modifier] that draws a border around elements that are recomposing. The border increases in
  * size and interpolates from red to green as more recompositions occur before a timeout.
  */
 @Stable
-fun Modifier.recomposeHighlighter(): Modifier = this.then(RecomposeHighlighterElement())
-
-private class RecomposeHighlighterElement : ModifierNodeElement<RecomposeHighlighterModifier>() {
-
- override fun InspectorInfo.inspectableProperties() {
- debugInspectorInfo { name = "recomposeHighlighter" }
- }
-
- override fun create(): RecomposeHighlighterModifier = RecomposeHighlighterModifier()
-
- override fun update(node: RecomposeHighlighterModifier) {
- node.incrementCompositions()
- }
-
- // It's never equal, so that every recomposition triggers the update function.
- override fun equals(other: Any?): Boolean = false
-
- override fun hashCode(): Int = Objects.hash(this)
-}
-
-private class RecomposeHighlighterModifier : Modifier.Node(), DrawModifierNode {
-
- private var timerJob: Job? = null
-
- /**
- * The total number of compositions that have occurred.
- */
- private var totalCompositions: Long = 0
- set(value) {
- if (field == value) return
- restartTimer()
- field = value
- invalidateDraw()
- }
-
- fun incrementCompositions() {
- totalCompositions++
- }
-
- override fun onAttach() {
- super.onAttach()
- restartTimer()
- }
-
- override val shouldAutoInvalidate: Boolean = false
-
- override fun onDetach() {
- timerJob?.cancel()
- }
-
- /**
- * Start the timeout, and reset everytime there's a recomposition.
- */
- private fun restartTimer() {
- if (!isAttached) return
-
- timerJob?.cancel()
- timerJob = coroutineScope.launch {
+fun Modifier.recomposeHighlighter(): Modifier = this.then(recomposeModifier)
+
+// Use a single instance + @Stable to ensure that recompositions can enable skipping optimizations
+// Modifier.composed will still remember unique data per call site.
+private val recomposeModifier =
+ Modifier.composed(inspectorInfo = debugInspectorInfo { name = "recomposeHighlighter" }) {
+ // The total number of compositions that have occurred. We're not using a State<> here be
+ // able to read/write the value without invalidating (which would cause infinite
+ // recomposition).
+ val totalCompositions = remember { arrayOf(0L) }
+ totalCompositions[0]++
+
+ // The value of totalCompositions at the last timeout.
+ val totalCompositionsAtLastTimeout = remember { mutableStateOf(0L) }
+
+ // Start the timeout, and reset everytime there's a recomposition. (Using totalCompositions
+ // as the key is really just to cause the timer to restart every composition).
+ LaunchedEffect(totalCompositions[0]) {
  delay(3000)
- totalCompositions = 0
- invalidateDraw()
+ totalCompositionsAtLastTimeout.value = totalCompositions[0]
  }
- }
 
- override fun ContentDrawScope.draw() {
- // Draw actual content.
- drawContent()
+ Modifier.drawWithCache {
+ onDrawWithContent {
+ // Draw actual content.
+ drawContent()
 
- // Below is to draw the highlight, if necessary. A lot of the logic is copied from Modifier.border
+ // Below is to draw the highlight, if necessary. A lot of the logic is copied from
+ // Modifier.border
+ val numCompositionsSinceTimeout =
+ totalCompositions[0] - totalCompositionsAtLastTimeout.value
 
- val hasValidBorderParams = size.minDimension > 0f
- if (!hasValidBorderParams || totalCompositions <= 0) {
- return
- }
-
- val (color, strokeWidthPx) =
- when (totalCompositions) {
- // We need at least one composition to draw, so draw the smallest border
- // color in blue.
- 1L -> Color.Blue to 1f
- // 2 compositions is _probably_ okay.
- 2L -> Color.Green to 2.dp.toPx()
- // 3 or more compositions before timeout may indicate an issue. lerp the
- // color from yellow to red, and continually increase the border size.
- else -> {
- lerp(
- Color.Yellow.copy(alpha = 0.8f),
- Color.Red.copy(alpha = 0.5f),
- min(1f, (totalCompositions - 1).toFloat() / 100f),
- ) to totalCompositions.toInt().dp.toPx()
+ val hasValidBorderParams = size.minDimension > 0f
+ if (!hasValidBorderParams || numCompositionsSinceTimeout <= 0) {
+ return@onDrawWithContent
  }
- }
-
- val halfStroke = strokeWidthPx / 2
- val topLeft = Offset(halfStroke, halfStroke)
- val borderSize = Size(size.width - strokeWidthPx, size.height - strokeWidthPx)
 
- val fillArea = (strokeWidthPx * 2) > size.minDimension
- val rectTopLeft = if (fillArea) Offset.Zero else topLeft
- val size = if (fillArea) size else borderSize
- val style = if (fillArea) Fill else Stroke(strokeWidthPx)
-
- drawRect(
- brush = SolidColor(color),
- topLeft = rectTopLeft,
- size = size,
- style = style,
- )
+ val (color, strokeWidthPx) =
+ when (numCompositionsSinceTimeout) {
+ // We need at least one composition to draw, so draw the smallest border
+ // color in blue.
+ 1L -> Color.Blue to 1f
+ // 2 compositions is _probably_ okay.
+ 2L -> Color.Green to 2.dp.toPx()
+ // 3 or more compositions before timeout may indicate an issue. lerp the
+ // color from yellow to red, and continually increase the border size.
+ else -> {
+ lerp(
+ Color.Yellow.copy(alpha = 0.8f),
+ Color.Red.copy(alpha = 0.5f),
+ min(1f, (numCompositionsSinceTimeout - 1).toFloat() / 100f)
+ ) to numCompositionsSinceTimeout.toInt().dp.toPx()
+ }
+ }
+
+ val halfStroke = strokeWidthPx / 2
+ val topLeft = Offset(halfStroke, halfStroke)
+ val borderSize = Size(size.width - strokeWidthPx, size.height - strokeWidthPx)
+
+ val fillArea = (strokeWidthPx * 2) > size.minDimension
+ val rectTopLeft = if (fillArea) Offset.Zero else topLeft
+ val size = if (fillArea) size else borderSize
+ val style = if (fillArea) Fill else Stroke(strokeWidthPx)
+
+ drawRect(
+ brush = SolidColor(color),
+ topLeft = rectTopLeft,
+ size = size,
+ style = style
+ )
+ }
+ }
  }
-}

compose/snippets/build.gradle.kts

@@ -82,6 +82,7 @@ dependencies {
  implementation(composeBom)
  androidTestImplementation(composeBom)
 
+ implementation(libs.androidx.compose.foundation)
  implementation(libs.androidx.compose.ui)
  implementation(libs.androidx.compose.ui.util)
  implementation(libs.androidx.compose.ui.graphics)
@@ -93,8 +94,7 @@ dependencies {
 
  implementation(libs.androidx.compose.material3)
  implementation(libs.androidx.compose.material3.adaptive)
- implementation(libs.androidx.compose.material3.adaptive.layout)
- implementation(libs.androidx.compose.material3.adaptive.navigation)
+ implementation(libs.androidx.compose.material3.adaptive.navigation.suite)
  implementation(libs.androidx.compose.material)
 
  implementation(libs.androidx.compose.runtime)