Magic Selfie sample redesign #85

lethargicpanda · 2025-08-26T18:18:17Z

Implementation of new UI:

This is an early implementation of the screen. It has the following known issues that will be addressed in following PRs:

partially clipped generate button in input text field,
no progress animations,
no-op top bar back button.

gemini-code-assist

Summary of Changes

Hello @lethargicpanda, I'm Gemini Code Assist¹! 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 significantly redesigns the user interface of the Magic Selfie sample application. The changes focus on improving the visual appeal and user experience by integrating custom UI components from a shared ui-component module, standardizing the top app bar, and refining the input and feedback mechanisms. The underlying ML Kit Segmentation dependency was also updated to use a version catalog, ensuring consistent dependency management across the project.

Highlights

Dependency Updates: The project's dependency management was updated to include mlkitSegmentation in libs.versions.toml and the magic-selfie sample's build.gradle.kts was modified to use this new version catalog entry. Additionally, the magic-selfie sample now depends on the shared :ui-component module.
UI Redesign in MagicSelfieScreen: The MagicSelfieScreen.kt file underwent a significant UI overhaul. This includes replacing the standard TopAppBar with a custom SampleDetailTopAppBar, changing the main layout from a Column to a Box with a visually appealing background shader, and replacing standard Material Design components like Button and TextField with custom PrimaryButton, GenerateButton, SecondaryButton, and TextInput components from the newly integrated ui-component module.
Removal of SeeCodeButton: The SeeCodeButton.kt file was removed, as its functionality to link to the source code is now integrated directly into the SampleDetailTopAppBar component, streamlining the UI and reducing redundant code.
String Resource Updates: The strings.xml file was updated to reflect the new UI elements and messaging. This involved renaming existing strings, adding new ones for the redesigned components (e.g., magic_selfie_title, add_image, prompt_placeholder), and removing strings related to the old UI and background processing status messages.
UI Component Enhancement: The SecondaryButton composable in the ui-component module was enhanced by adding an enabled parameter. This allows for better control over the button's interactive state, enabling or disabling it based on application logic.

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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

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 issue 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.

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. ↩

gemini-code-assist

Code Review

This pull request introduces a significant and welcome redesign of the Magic Selfie sample's UI. It successfully componentizes UI elements into a shared :ui-component module, improving code organization and reusability. The new UI is more modern and visually appealing.

My review focuses on a few areas for improvement:

Adherence to lifecycle best practices for collecting state flows in Compose.
Correct handling of side effects to prevent bugs like repeated Toast messages.
Restoring user feedback for long-running operations to improve UX.
Enhancing accessibility by providing content descriptions for images.

Overall, this is a great update, and with a few adjustments, it will be even better.

...amples/magic-selfie/src/main/java/com/android/ai/samples/magicselfie/ui/MagicSelfieScreen.kt

lethargicpanda · 2025-08-26T20:06:36Z

cc @ksemenova @JolandaVerhoef

JolandaVerhoef

When ran on my emulator, I get an error saying "Failed to init module subject segmenter" which feels like a bit of a vague error. Assuming this is because there's not really a solid image (it's the weird emulator selfie camera), but just wanted to double check this is expected.

JolandaVerhoef · 2025-09-01T11:29:45Z

...amples/magic-selfie/src/main/java/com/android/ai/samples/magicselfie/ui/MagicSelfieScreen.kt

            )
        },
    ) { innerPadding ->
-        Column(
+        val imageBitmap = remember {


Since we're reusing this component in 3 places already (Imagen, Multimodal, and Selfie) - it would make sense to extract it into the ui-components module, wdyt?

I thought about it, but they all have a slightly different behavior (w/ and w/o input text, etc...) so it felt quicker to rebuild it adhoc for the sake of time. But eventually I want to revisit it.

lethargicpanda · 2025-09-02T18:21:57Z

When ran on my emulator, I get an error saying "Failed to init module subject segmenter" which feels like a bit of a vague error. Assuming this is because there's not really a solid image (it's the weird emulator selfie camera), but just wanted to double check this is expected.

@JolandaVerhoef thanks for flagging it. Is it the case with the main branch too?
The segmenter model is downloaded via Google Play services, was your emulator image a GMS one?

calren · 2025-09-03T04:13:07Z

...amples/magic-selfie/src/main/java/com/android/ai/samples/magicselfie/ui/MagicSelfieScreen.kt

+                        .height(80.dp)
+                        .align(Alignment.BottomCenter),
+                    primaryButton = {
+                        GenerateButton(


doesn't have to be addressed in this PR, but perhaps we should have GenerateButton and SecondaryButton's text parameter be optional, similar to how icon is optional right now

ksemenova · 2025-09-04T19:06:26Z

...amples/magic-selfie/src/main/java/com/android/ai/samples/magicselfie/ui/MagicSelfieScreen.kt

+private fun MagicSelfieScreenPreview() {
+    AISampleCatalogTheme {
+        MagicSelfieScreen(
+            uiState = MagicSelfieUiState.Initial,


Would be nice to add Previews for different Screen states

lethargicpanda requested review from calren and ksemenova as code owners August 26, 2025 18:18

gemini-code-assist bot reviewed Aug 26, 2025

View reviewed changes

lethargicpanda added 2 commits August 26, 2025 13:02

WIP

0367c7a

Replace Toast w/ snackbar

00c617b

lethargicpanda force-pushed the te/magic-selfie-redesign branch from fc97089 to 00c617b Compare August 26, 2025 20:04

Add preview

efd3272

JolandaVerhoef reviewed Sep 1, 2025

View reviewed changes

calren approved these changes Sep 3, 2025

View reviewed changes

ksemenova reviewed Sep 4, 2025

View reviewed changes

ksemenova approved these changes Sep 4, 2025

View reviewed changes

lethargicpanda merged commit 2fd3a9f into redesign Sep 4, 2025
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Magic Selfie sample redesign #85

Magic Selfie sample redesign #85

Uh oh!

lethargicpanda commented Aug 26, 2025 •

edited

Loading

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lethargicpanda commented Aug 26, 2025

Uh oh!

JolandaVerhoef left a comment

Uh oh!

JolandaVerhoef Sep 1, 2025

Uh oh!

lethargicpanda Sep 2, 2025

Uh oh!

lethargicpanda commented Sep 2, 2025

Uh oh!

calren Sep 3, 2025

Uh oh!

ksemenova Sep 4, 2025

Uh oh!

Uh oh!

Uh oh!

Magic Selfie sample redesign #85

Magic Selfie sample redesign #85

Uh oh!

Conversation

lethargicpanda commented Aug 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

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!

lethargicpanda commented Aug 26, 2025

Uh oh!

JolandaVerhoef left a comment

Choose a reason for hiding this comment

Uh oh!

JolandaVerhoef Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

lethargicpanda Sep 2, 2025

Choose a reason for hiding this comment

Uh oh!

lethargicpanda commented Sep 2, 2025

Uh oh!

calren Sep 3, 2025

Choose a reason for hiding this comment

Uh oh!

ksemenova Sep 4, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

lethargicpanda commented Aug 26, 2025 •

edited

Loading