Skip to content

Add Rule of Thirds grid overlay to camera preview#485

Open
temcguir wants to merge 5 commits intomainfrom
temcguir/capture_grid
Open

Add Rule of Thirds grid overlay to camera preview#485
temcguir wants to merge 5 commits intomainfrom
temcguir/capture_grid

Conversation

@temcguir
Copy link
Collaborator

@temcguir temcguir commented Mar 3, 2026

Adds a toggleable "Rule of Thirds" grid overlay to the camera
preview to help with shot composition.

Key changes include:

  • A GridType enum (NONE, RULE_OF_THIRDS) was introduced to
    manage grid visibility, allowing for future extensibility.
  • The grid selection is persisted in DataStore through the
    SettingsRepository.
  • A toggle button has been added to the Quick Settings panel.
  • The grid overlay features a fade-in/fade-out animation. The
    fade-out is handled within a NonCancellable context to
    prevent the animation from being interrupted, which avoids
    visual flickering.
  • For iconography, the button uses the standard
    Icons.Default.Grid3x3 for the "on" state and a local vector
    asset (grid_3x3_off.xml) for the "off" state.
Screenshot_20260303-121449 Screenshot_20260303-121511

temcguir added 4 commits March 3, 2026 12:05
Adds a toggleable "Rule of Thirds" grid overlay to the camera
preview to help with shot composition.

Key changes include:
- A `GridType` enum (`NONE`, `RULE_OF_THIRDS`) was introduced to
  manage grid visibility, allowing for future extensibility.
- The grid selection is persisted in DataStore through the
  `SettingsRepository`.
- A toggle button has been added to the Quick Settings panel.
- The grid overlay features a fade-in/fade-out animation. The
  fade-out is handled within a `NonCancellable` context to
  prevent the animation from being interrupted, which avoids
  visual flickering.
- For iconography, the button uses the standard
  `Icons.Default.Grid3x3` for the "on" state and a local vector
  asset (`grid_3x3_off.xml`) for the "off" state.
@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a significant new feature to the camera application: a 'Rule of Thirds' grid overlay. This enhancement aims to improve the user's ability to compose visually appealing photographs by providing a classic compositional guide directly within the preview. The implementation includes robust state management, persistence of user preferences, and a smooth, animated user experience, all while being thoroughly tested.

Highlights

  • Rule of Thirds Grid Overlay: A toggleable 'Rule of Thirds' grid overlay has been added to the camera preview to assist with shot composition. This feature includes a fade-in/fade-out animation for smooth transitions, handled within a NonCancellable context to prevent interruption and flickering.
  • Grid Type Management and Persistence: A new GridType enum (NONE, RULE_OF_THIRDS) was introduced to manage grid visibility, allowing for future extensibility. The selected grid type is now persisted in DataStore through the SettingsRepository, ensuring user preferences are saved across sessions.
  • Quick Settings Integration: A dedicated toggle button for the grid overlay has been added to the Quick Settings panel, providing easy access for users to enable or disable the feature. Custom iconography is used for both 'on' and 'off' states.
  • Testing and UI State Updates: New UI tests were added to verify the functionality of toggling the grid on and off. The UI state (TrackedCaptureUiState, PreviewDisplayUiState, QuickSettingsUiState) and their adapters were updated to correctly manage and reflect the GridType.

🧠 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
  • app/src/androidTest/java/com/google/jetpackcamera/PreviewScreenTest.kt
    • Added can_toggle_grid_on_and_off test to verify grid overlay visibility changes via Quick Settings.
  • core/model/src/main/java/com/google/jetpackcamera/model/GridType.kt
    • Introduced GridType enum with NONE and RULE_OF_THIRDS values.
    • Added companion object functions toProto() and fromProto() for GridType conversion.
  • core/model/src/main/proto/com/google/jetpackcamera/model/proto/grid_type.proto
    • Added new proto file defining GridTypeProto enum for data serialization.
  • data/settings/src/androidTest/java/com/google/jetpackcamera/settings/LocalSettingsRepositoryInstrumentedTest.kt
    • Added can_update_grid_type test to verify persistence of GridType in LocalSettingsRepository.
  • data/settings/src/main/java/com/google/jetpackcamera/settings/LocalSettingsRepository.kt
    • Imported GridType and its proto conversion functions.
    • Updated CameraAppSettings mapping to include gridType from proto.
    • Implemented updateGridType function to persist the selected grid type.
  • data/settings/src/main/java/com/google/jetpackcamera/settings/SettingsRepository.kt
    • Imported GridType.
    • Added updateGridType suspend function to the SettingsRepository interface.
  • data/settings/src/main/java/com/google/jetpackcamera/settings/model/CameraAppSettings.kt
    • Imported GridType.
    • Added gridType property to CameraAppSettings data class with GridType.NONE as default.
  • data/settings/src/main/java/com/google/jetpackcamera/settings/test/FakeSettingsRepository.kt
    • Imported GridType.
    • Implemented updateGridType for the FakeSettingsRepository.
  • data/settings/src/main/proto/com/google/jetpackcamera/settings/jca_settings.proto
    • Imported grid_type.proto.
    • Added grid_type field (type GridTypeProto) to the JcaSettings message.
  • data/settings/src/test/java/com/google/jetpackcamera/settings/ProtoConversionTest.kt
    • Added unit tests for GridType to GridTypeProto and GridTypeProto to GridType conversions.
  • feature/preview/src/main/java/com/google/jetpackcamera/feature/preview/PreviewScreen.kt
    • Imported GridType.
    • Updated PreviewScreen and ContentScreen to accept and pass onUpdateGridType callback.
    • Modified LayoutWrapper to accept debugHidingComponents parameter.
    • Updated PreviewDisplay to include debugHidingComponents and render RuleOfThirdsGrid conditionally.
  • feature/preview/src/main/java/com/google/jetpackcamera/feature/preview/PreviewViewModel.kt
    • Imported GridType.
    • Initialized gridType in trackedCaptureUiState from settingsRepository.
    • Added updateGridType function to update UI state and persist the setting.
  • ui/components/capture/src/main/java/com/google/jetpackcamera/ui/components/capture/CaptureScreenComponents.kt
    • Imported Canvas, Offset, GridType, NonCancellable, collectLatest, withContext for grid drawing and animation.
    • Added RuleOfThirdsGrid composable with fade-in/fade-out animation logic.
    • Modified PreviewDisplay to integrate RuleOfThirdsGrid and pass debugHidingComponents.
    • Added @Preview composables for RuleOfThirdsGrid and PreviewDisplayGridAnimation.
  • ui/components/capture/src/main/java/com/google/jetpackcamera/ui/components/capture/TestTags.kt
    • Added GRID_OVERLAY and QUICK_SETTINGS_GRID_BUTTON constants for UI testing.
  • ui/components/capture/src/main/java/com/google/jetpackcamera/ui/components/capture/quicksettings/QuickSettingsScreen.kt
    • Imported GridType and QuickSetGrid.
    • Updated QuickSettingsBottomSheet to accept onGridClick callback.
    • Integrated QuickSetGrid into the quick settings list.
    • Updated @Preview functions to include gridType in QuickSettingsUiState.Available.
  • ui/components/capture/src/main/java/com/google/jetpackcamera/ui/components/capture/quicksettings/ui/QuickSetGrid.kt
    • Added new file defining QuickSetGrid composable for the quick settings panel.
  • ui/components/capture/src/main/java/com/google/jetpackcamera/ui/components/capture/quicksettings/ui/QuickSettingsComponents.kt
    • Imported Icons.Default.Grid3x3.
    • Added QuickSettingsGrid composable, which serves as the visual toggle button for the grid.
  • ui/components/capture/src/main/res/drawable/grid_3x3_off.xml
    • Added new vector drawable for the 'grid off' icon.
  • ui/components/capture/src/main/res/values/strings.xml
    • Added string resources quick_settings_grid_text and quick_settings_grid_description.
  • ui/uistate/capture/src/main/java/com/google/jetpackcamera/ui/uistate/capture/TrackedCaptureUiState.kt
    • Imported GridType.
    • Added gridType property to TrackedCaptureUiState with GridType.NONE as default.
  • ui/uistate/capture/src/main/java/com/google/jetpackcamera/ui/uistate/capture/compound/PreviewDisplayUiState.kt
    • Imported GridType.
    • Added gridType property to PreviewDisplayUiState with GridType.NONE as default.
  • ui/uistate/capture/src/main/java/com/google/jetpackcamera/ui/uistate/capture/compound/QuickSettingsUiState.kt
    • Imported GridType.
    • Added gridType property to QuickSettingsUiState.Available data class.
  • ui/uistateadapter/capture/src/main/java/com/google/jetpackcamera/ui/uistateadapter/capture/GridUiStateAdapter.kt
    • Added new file defining GridType.Companion.from extension function for TrackedCaptureUiState.
  • ui/uistateadapter/capture/src/main/java/com/google/jetpackcamera/ui/uistateadapter/capture/compound/CaptureUiStateAdapter.kt
    • Imported GridType.
    • Updated captureUiState function to pass gridType to PreviewDisplayUiState and QuickSettingsUiState.
  • ui/uistateadapter/capture/src/main/java/com/google/jetpackcamera/ui/uistateadapter/capture/compound/QuickSettingsUiStateAdapter.kt
    • Imported TrackedCaptureUiState.
    • Updated QuickSettingsUiState.Companion.from function to accept TrackedCaptureUiState and derive quickSettingsIsOpen, focusedQuickSetting, and gridType from it.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

The pull request successfully introduces a toggleable "Rule of Thirds" grid overlay to the camera preview. The implementation includes a new GridType enum, persistence in DataStore, a quick settings toggle button, and a fade-in/fade-out animation for the grid. Unit and instrumentation tests for the new functionality and proto conversions are also included, demonstrating good test coverage. The use of NonCancellable context for the fade-out animation is a thoughtful detail to prevent visual flickering.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant