Update CaptureButton sizing, colors, and Material 3 Expressive motion specs by temcguir · Pull Request #578 · google/jetpack-camera-app

temcguir · 2026-09-23T19:19:35Z

This PR updates CaptureButton, CaptureButtonRing, and CaptureButtonNucleus to use Material 3 Expressive motion specifications and refined sizing and geometry.

Key Changes

Button and Ring Sizing:
- Updated default capture button diameter from 76.dp to 86.dp.
- Animated outer ring stroke width (3.dp <-> 0.dp) using MotionScheme.expressive().fastSpatialSpec() so the outer border smoothly transitions when entering or leaving CaptureMode.STANDARD.
- Added KDoc documentation to CaptureButtonRing and keyed isCaptureButtonPressed with remember(initialPressed) to properly support LocalInitialPressedState.
Spatial and Effects Motion Specs:
- Updated CaptureButtonNucleus size and corner radius animations to use MotionScheme.expressive().fastSpatialSpec(), synchronizing the scale transition and corner radius morph (8.dp when locked).
- Replaced fixed-duration color transitions with MotionScheme.expressive().fastEffectsSpec(), updated recording indicator color to #ED0000, and updated the CaptureMode.IMAGE_ONLY pressed nucleus to be fully opaque white to match the design spec.
Standard (Hybrid) Mode Transitions:
- Added latent idle scale (0.80f) and pressed capture scale (0.86f) with a responsive spring spec (stiffness = 1800f, dampingRatio = 0.65f), instant color materialization, and a 50ms visual press hold for quick taps so taps reliably materialize and bounce within the outer ring border.
- Configured stopping video recording in standard mode to expand smoothly outward instead of collapsing to 0.dp.
Testing:
- Added unit tests verifying outer ring border visibility across capture modes and recording states.
- Added unit tests verifying spring scale dynamics, disabled animation behavior, and image-only nucleus scaling.

… specs

… nucleus scaling

gemini-code-assist

Code Review

This pull request refactors the CaptureButton animations to utilize Material 3 Expressive Motion schemes, replacing hardcoded durations and transitions. It also introduces new tests to verify the behavior of the button ring border and scaling animations. The review feedback suggests optimizing performance by deferring state reading of animatedColor and animatedBorderWidth using lambda providers to prevent excessive recompositions of the CaptureButton. Additionally, it is recommended to update the corresponding tests for these lambda parameters and to import CompositionLocalProvider directly in the test file instead of using its fully qualified name.

Extracts the recording red color (Color(0xFFED0000)) into an internal CaptureTokens object in :ui:components:capture. Updates CaptureButtonNucleus and ElapsedTimeText to use the shared token instead of duplicating the literal color value, and adds a unit test verifying the token value.

…creenshot goldens

…lock switch

…on_ring_cleanup

davidjiagoogle · 2026-10-01T07:09:20Z

+            when {
+                disableAnimations -> snap()
+                NucleusSizeState.PressedStandard in setOf(initialState, targetState) ->
+                    snappyStandardTapSpatialSpec
+                else -> fastSpatialSpec
            }


Using NucleusSizeState.PressedStandard in setOf(initialState, targetState) has two issues:

When starting a long-press recording in CaptureMode.STANDARD, the button first enters PressedStandard on finger-down and then transitions from PressedStandard (initialState) to RecordingPressed (targetState) once the long-press timeout elapses. Because initialState == PressedStandard, that transition into video recording unintentionally uses snappyStandardTapSpatialSpec (stiffness = 1800f, dampingRatio = 0.65f) instead of fastSpatialSpec.

setOf(initialState, targetState) allocates a new Set on every transition check.

Consider scoping this specifically to the IdleStandard <-> PressedStandard tap transitions using isTransitioningTo:

Suggested change

when {

disableAnimations -> snap()

NucleusSizeState.PressedStandard in setOf(initialState, targetState) ->

snappyStandardTapSpatialSpec

else -> fastSpatialSpec

}

when {

disableAnimations -> snap()

(NucleusSizeState.IdleStandard isTransitioningTo NucleusSizeState.PressedStandard) ||

(NucleusSizeState.PressedStandard isTransitioningTo NucleusSizeState.IdleStandard) ->

snappyStandardTapSpatialSpec

else -> fastSpatialSpec

}

davidjiagoogle · 2026-10-01T07:09:20Z

+        val currentBorderWidth = borderWidth()
+        if (currentBorderWidth > 0f) {
+            // todo(): use a canvas instead of a box.
+            //  the sizing gets funny so the scales need to be completely readjusted
+            Box(
+                modifier = Modifier
+                    .testTag(CAPTURE_BUTTON_RING_BORDER)
+                    .size(
+                        captureButtonSize.dp
+                    )
+                    .border(currentBorderWidth.dp, color(), CircleShape)
+            )
+        }


Even though color and borderWidth are passed as lambdas, borderWidth() (line 687) and color() (line 697) are still invoked directly in the composition body of CaptureButtonRing, causing CaptureButtonRing to recompose on every animation frame. To defer reading until the draw phase (or isolate the conditional visibility), consider extracting val showBorder by remember(borderWidth) { derivedStateOf { borderWidth() > 0f } } and drawing the border inside Modifier.drawBehind / Canvas (which would also resolve the todo() on line 689).

nit: animatedBorderWidth is State<Dp>, so line 616 unwraps animatedBorderWidth.value.value (Dp -> Float) only for line 697 to re-wrap currentBorderWidth.dp (Float -> Dp). Changing borderWidth to () -> Dp = { BORDER_WIDTH.dp } avoids the double .value.value and re-wrapping.

davidjiagoogle · 2026-10-01T07:09:20Z

+                            scope.launch {
+                                if (!disableAnimations) {
+                                    delay(50) // Ensure visible press state for fast taps
+                                }
+                                interactionSource.emit(PressInteraction.Release(press))
+                            }


Here the 50ms press release delay is guarded by if (!disableAnimations), whereas the volume key release path in onKeyUp (line 299) calls delay(50) unconditionally. Please also check !disableAnimations in onKeyUp and extract 50L into a shared constant (e.g., private const val PRESS_RELEASE_DELAY_MS = 50L).

davidjiagoogle · 2026-10-01T07:09:20Z

+    val fastSpatialSpec = remember { MotionScheme.expressive().fastSpatialSpec<Dp>() }
+    val snappyStandardTapSpatialSpec = remember {
+        spring<Dp>(dampingRatio = 0.65f, stiffness = 1800f)
+    }
+    val fastEffectsSpec = remember { MotionScheme.expressive().fastEffectsSpec<Color>() }


nit: MotionScheme.expressive() and its spec factories (fastSpatialSpec, fastEffectsSpec, defaultEffectsSpec) do not depend on composition state, so wrapping them in 6 separate remember blocks across CaptureButton (lines 430–432), CaptureButtonRing (line 670), and CaptureButtonNucleus (lines 867–871) is redundant. Consider defining these specs (along with the 0.65f damping ratio and 1800f stiffness on line 869) once in CaptureTokens or as file-level constants.

davidjiagoogle · 2026-10-01T07:09:21Z

 * @param idleVideoCaptureScale the scale factor for the idle size of the video-only nucleus. Must be between 0 and 1.
 * @param pressedVideoCaptureScale the scale factor for the pressed size of the video-only nucleus. Must be between 0 and 1.
 */


nit: @param idleImageCaptureScale on line 837 states it is only for the "idle size of the image-only nucleus", but lines 921–923 now also use it for NucleusSizeState.PressedStandard. Please update the KDoc to reflect both uses.

davidjiagoogle · 2026-10-01T07:09:21Z

                modifier = Modifier
                    .size(centerShapeSize)
                    .clip(RoundedCornerShape(cornerRadius))
-                    .alpha(
-                        if (isTapping &&
-                            currentUiState.value ==
-                            CaptureButtonUiState.Enabled.Idle(CaptureMode.IMAGE_ONLY)
-                        ) {
-                            .5f // transparency to indicate click ONLY on IMAGE_ONLY
-                        } else {
-                            1f // solid alpha the rest of the time
-                        }
-                    )
                    .background(animatedColor)
            ) {}
        }


nit: Now that the .alpha(...) modifier has been removed from the inner Box, the middle Box(modifier = Modifier) on line 977 (and the empty {} body on line 984) can be simplified to a single inner Box.

davidjiagoogle · 2026-10-01T07:09:21Z

 import androidx.compose.ui.semantics.SemanticsPropertyKey
 import androidx.compose.ui.semantics.SemanticsPropertyReceiver
 const val CAPTURE_BUTTON = "CaptureButton"
+const val CAPTURE_BUTTON_RING_BORDER = "CaptureButtonRingBorder"


nit: Per the repository style guide (Section 10: Test Tags and Semantics), new test tag values should use lower_snake_case (e.g., "capture_button_ring_border", matching CAPTURE_BUTTON_NUCLEUS = "capture_button_nucleus" in CaptureButtonTest.kt). Also consider marking it internal if it is only used within :ui:components:capture.

temcguir added 3 commits September 23, 2026 01:26

Respect LocalDisableAnimations and add KDoc in CaptureButtonRing

522e796

Update CaptureButton sizing, colors, and Material 3 Expressive motion…

b0aa27c

… specs

Add unit tests for CaptureButtonRing border visibility and image-only…

e9a4942

… nucleus scaling

gemini-code-assist Bot reviewed Sep 23, 2026

View reviewed changes

temcguir added 4 commits September 23, 2026 19:33

Defer CaptureButtonRing state reads via lambda providers and update s…

139d7bb

…creenshot goldens

Increase pressed recording preview width to 172.dp to avoid clipping …

3070f93

…lock switch

Merge remote-tracking branch 'origin/main' into temcguir/capture_butt…

d888d46

…on_ring_cleanup

temcguir requested a review from Kimblebee September 24, 2026 22:30

temcguir added 4 commits September 29, 2026 00:11

Merge branch 'main' into temcguir/capture_button_ring_cleanup

74a0ae3

Use fully opaque white for pressed nucleus in IMAGE_ONLY mode

de346e5

Merge branch 'main' into temcguir/capture_button_ring_cleanup

ceaf874

Merge branch 'main' into temcguir/capture_button_ring_cleanup

a7cafa5

temcguir requested a review from davidjiagoogle September 30, 2026 18:28

Merge branch 'main' into temcguir/capture_button_ring_cleanup

772ce3e

davidjiagoogle reviewed Oct 1, 2026

View reviewed changes

davidjiagoogle requested changes Oct 1, 2026

View reviewed changes

Navigation Menu

Update CaptureButton sizing, colors, and Material 3 Expressive motion specs - #578

Update CaptureButton sizing, colors, and Material 3 Expressive motion specs#578
temcguir wants to merge 12 commits into
mainfrom
temcguir/capture_button_ring_cleanup

temcguir commented Sep 23, 2026 •

edited

Loading

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

davidjiagoogle Oct 1, 2026

Uh oh!

davidjiagoogle Oct 1, 2026

Uh oh!

davidjiagoogle Oct 1, 2026

Uh oh!

davidjiagoogle Oct 1, 2026

Uh oh!

davidjiagoogle Oct 1, 2026

Uh oh!

davidjiagoogle Oct 1, 2026

Uh oh!

davidjiagoogle Oct 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

temcguir commented Sep 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Key Changes

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

davidjiagoogle Oct 1, 2026

Choose a reason for hiding this comment

Uh oh!

davidjiagoogle Oct 1, 2026

Choose a reason for hiding this comment

Uh oh!

davidjiagoogle Oct 1, 2026

Choose a reason for hiding this comment

Uh oh!

davidjiagoogle Oct 1, 2026

Choose a reason for hiding this comment

Uh oh!

davidjiagoogle Oct 1, 2026

Choose a reason for hiding this comment

Uh oh!

davidjiagoogle Oct 1, 2026

Choose a reason for hiding this comment

Uh oh!

davidjiagoogle Oct 1, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

temcguir commented Sep 23, 2026 •

edited

Loading