Update Capture Button visuals by temcguir · Pull Request #461 · google/jetpack-camera-app

temcguir · 2026-01-14T02:36:13Z

This PR updates the appearance and behavior of the CaptureButton component to better match design mocks and improve preview visibility.

Key Changes

Visual Updates:
- Added a 50% semi-transparent black background to the capture button ring for better contrast.
- Adjusted the size of the capture button, ring stroke width, and nucleus to align with mocks.
- Updated Compose Previews to use a gradient background (Gray to Dark Gray) and forced a White content color, ensuring the semi-transparent background and button details are clearly visible.

Behavioral Fixes:
- Updated VIDEO_ONLY mode: The nucleus is now white when idle and turns red only when pressed or recording (previously it was always red).
- Fixed the capture animation to ensure it triggers correctly when capturing via volume buttons.
- Corrected the pressed state color for IMAGE_ONLY mode.
Refactoring:
- Simplified and updated preview logic to use the real CaptureButton implementation.

temcguir · 2026-01-14T02:37:54Z

/gemini summary

gemini-code-assist

Code Review

This pull request does a great job of updating the CaptureButton component's appearance and behavior. The changes align well with the design mocks, and the fixes for VIDEO_ONLY mode and volume button capture are significant improvements. The refactoring of the animation logic using updateTransition and the introduction of InteractionSource are excellent choices that follow Compose best practices. The simplification of the preview composables is also a welcome change that improves maintainability.

I've left a couple of comments: one to address a logic regression that could cause onRelease to be called twice, and another with a suggestion to simplify a boolean check for better readability. Overall, this is a high-quality contribution.

...ture/src/main/java/com/google/jetpackcamera/ui/components/capture/CaptureButtonComponents.kt

gemini-code-assist · 2026-01-14T02:39:24Z

Summary of Changes

This pull request refines the CaptureButton component by implementing several visual enhancements and behavioral corrections. The changes aim to align the button's appearance and interaction more closely with design mocks, improving user experience and visual clarity. Key updates include a new semi-transparent background, precise sizing adjustments, and fixes for recording state indicators and capture animations, alongside a streamlined preview setup.

Highlights

Visual Updates: A 50% semi-transparent black background has been added to the capture button ring for improved contrast. The capture button's overall size, ring stroke width, and nucleus dimensions have been adjusted to match design specifications. Compose Previews now utilize a gradient background (Gray to Dark Gray) and force a White content color, ensuring the semi-transparent background and button details are clearly visible in preview modes.
Behavioral Fixes: In VIDEO_ONLY mode, the nucleus now correctly appears white when idle and only turns red when pressed or actively recording, addressing a previous issue where it was always red. The capture animation has been fixed to trigger reliably when capturing via volume buttons. The pressed state color for IMAGE_ONLY mode has also been corrected.
Refactoring: The preview logic has been simplified and updated to directly use the real CaptureButton implementation, improving consistency and reducing redundancy in preview definitions.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

ui/components/capture/src/main/java/com/google/jetpackcamera/ui/components/capture/CaptureButtonComponents.kt
- Added new animation-related imports: animateColor, animateDp, snap, updateTransition.
- Introduced MutableInteractionSource, PressInteraction, and collectIsPressedAsState for enhanced interaction handling.
- Imported MaterialTheme, darkColorScheme, and CompositionLocalProvider for theme and content color management in previews.
- Added Brush import for gradient backgrounds.
- Decreased DEFAULT_CAPTURE_BUTTON_SIZE from 80f to 76f.
- Modified the CaptureButton composable to accept an interactionSource parameter.
- Implemented PressInteraction emission for key events to provide visual feedback.
- Removed redundant Log.d calls.
- Updated the private CaptureButton composable to use the new interactionSource and isPressedInteraction.
- Adjusted the animatedColor animation specification based on the isVisuallyDisabled state.
- Refactored onPress and awaitRelease logic to emit PressInteraction events.
- Passed isVisuallyDisabled and isPressed parameters to LockSwitchCaptureButtonNucleus and CaptureButtonNucleus.
- Reduced CaptureButtonRing borderWidth from 4f to 3f.
- Added a 50% semi-transparent black background to the CaptureButtonRing.
- Introduced NucleusState enum (Disabled, Idle, Pressed) for clearer state management.
- Adjusted idleImageCaptureScale to .74f and idleVideoCaptureScale to .26f.
- Added isVisuallyDisabled parameter to CaptureButtonNucleus.
- Renamed centerShapeSize to standardShapeSize and implemented a new centerShapeSize driven by pressTransition for image capture mode.
- Reworked the nucleus color animation using updateTransition and NucleusState to provide more granular control over color changes based on the button's state and capture mode.
- Removed the explicit alpha modification logic from CaptureButtonNucleus as it is now handled by the new color transitions.
- Refactored all @Preview composables to use a new PreviewCaptureButton wrapper, which configures a MaterialTheme with darkColorScheme, LocalContentColor as Color.White, and a gradient background for improved preview visibility.
- Updated LockSwitchCaptureButtonNucleus previews to correctly pass isVisuallyDisabled and isPressed.

Activity

The pull request author, temcguir, requested a summary of the changes.
A bot, gemini-code-assist[bot], provided a review comment suggesting to simplify the isPressableImageMode logic using a when expression for better readability, citing a style guide rule.

This also adds an additional interactionSource to the capture button so we can emulate touch events in our compose previews.

Also ensures the disabled state for the capture button has the correct animations for the nucleus.

Also animates to/from the pressed state

Kimblebee

some duplicate comments regarding readibility, otherwise I think the PR looks great

Kimblebee · 2026-01-30T22:16:24Z

...ture/src/main/java/com/google/jetpackcamera/ui/components/capture/CaptureButtonComponents.kt

 @Preview
 @Composable
 private fun CaptureButtonUnavailablePreview() {
-    CaptureButton(
-        onImageCapture = {},
-        onStartRecording = {},
-        onStopRecording = {},
-        onLockVideoRecording = {},
-        onIncrementZoom = {},
+    PreviewCaptureButton(
        captureButtonUiState = CaptureButtonUiState.Unavailable
    )
 }


nit: this @Preview function should be moved below PreviewCaptureButton

Kimblebee · 2026-01-30T22:18:56Z

...ture/src/main/java/com/google/jetpackcamera/ui/components/capture/CaptureButtonComponents.kt

+        transitionSpec = {
+            when {
+                NucleusState.Disabled isTransitioningTo NucleusState.Idle -> tween(
+                    durationMillis = 300


these durationMillis values could be constants?

Kimblebee · 2026-01-30T22:48:18Z

...ture/src/main/java/com/google/jetpackcamera/ui/components/capture/CaptureButtonComponents.kt

+            if (targetState) {
+                snap()
+            } else {
+                tween(durationMillis = 200)


another constant durationMillis?

Kimblebee · 2026-01-30T22:53:52Z

...ture/src/main/java/com/google/jetpackcamera/ui/components/capture/CaptureButtonComponents.kt

        },
-        animationSpec = tween(durationMillis = if (isVisuallyDisabled) 1000 else 300),
+        animationSpec = if (isVisuallyDisabled) {
+            tween(durationMillis = 1000)


more magic numbers to be moved to constants?

Kimblebee · 2026-01-30T22:57:07Z

...ture/src/main/java/com/google/jetpackcamera/ui/components/capture/CaptureButtonComponents.kt

+        }
+    ) { state ->
+        when (state) {
+            NucleusState.Disabled -> LocalContentColor.current.copy(alpha = 0.38f)


repeated alpha value .38f to be moved to a constant?

Kimblebee · 2026-01-30T23:00:23Z

...ture/src/main/java/com/google/jetpackcamera/ui/components/capture/CaptureButtonComponents.kt

+        Box(
+            modifier = Modifier
+                .size(captureButtonSize.dp)
+                .background(Color.Black.copy(alpha = 0.5f), CircleShape)


should this unique alpha value be a constant?

temcguir force-pushed the temcguir/update_capture_button_appearance branch from f12a849 to d9398ce Compare January 14, 2026 02:37

google deleted a comment from gemini-code-assist bot Jan 14, 2026

gemini-code-assist bot reviewed Jan 14, 2026

View reviewed changes

...ture/src/main/java/com/google/jetpackcamera/ui/components/capture/CaptureButtonComponents.kt Show resolved Hide resolved

temcguir changed the title ~~Temcguir/update capture button appearance~~ Update Capture Button visuals Jan 14, 2026

temcguir force-pushed the temcguir/capture_button_disabled_state branch from b15fb8a to 1f5bccd Compare January 15, 2026 02:02

temcguir added 10 commits January 14, 2026 18:37

Update CaptureButton Compose Previews to use real logic

e448e80

This also adds an additional interactionSource to the capture button so we can emulate touch events in our compose previews.

Simplify Preview logic for CaptureButtonComponent

cc0ca6b

Ensure pressed state for IMAGE_ONLY is right color

89b9ddb

Also ensures the disabled state for the capture button has the correct animations for the nucleus.

Make capture button nucles correct color and size during capture

4737c83

Also animates to/from the pressed state

Ensure capture animation works with volume buttons

539a226

Apply Spotless

828c02e

Adjust size of capture button, ring stroke, and nucleus to match mocks

940a090

Make capture button nucleus white when in idle VIDEO_ONLY mode

098cc25

Add 50% black background to capture button to match mocks

6e8f7c3

Update compose previews to use a gradient background for higher vis

647522b

temcguir force-pushed the temcguir/update_capture_button_appearance branch from d9398ce to 647522b Compare January 15, 2026 02:38

Kimblebee self-requested a review January 23, 2026 00:00

Kimblebee reviewed Jan 30, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update Capture Button visuals#461

Update Capture Button visuals#461
temcguir wants to merge 10 commits intotemcguir/capture_button_disabled_statefrom
temcguir/update_capture_button_appearance

temcguir commented Jan 14, 2026 •

edited

Loading

Uh oh!

temcguir commented Jan 14, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

gemini-code-assist bot commented Jan 14, 2026

Uh oh!

Kimblebee left a comment

Uh oh!

Kimblebee Jan 30, 2026

Uh oh!

Kimblebee Jan 30, 2026

Uh oh!

Kimblebee Jan 30, 2026

Uh oh!

Kimblebee Jan 30, 2026

Uh oh!

Kimblebee Jan 30, 2026

Uh oh!

Kimblebee Jan 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

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

Uh oh!

Key Changes

Uh oh!

temcguir commented Jan 14, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

gemini-code-assist bot commented Jan 14, 2026

Summary of Changes

Highlights

Uh oh!

Kimblebee left a comment

Choose a reason for hiding this comment

Uh oh!

Kimblebee Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Kimblebee Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Kimblebee Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Kimblebee Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Kimblebee Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Kimblebee Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

temcguir commented Jan 14, 2026 •

edited

Loading