Here\u2019s an example of the app running on the device, showcasing converting a photo to an Android bot that represents my likeness:<\/p>\n
![\"moving](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhxOHgFiXuoeTUjM4oXoTr84cmNqihVX2xt7ARBzl_6NOsgYy6VM2lNNpQtjBIH9vh3zP-Ap8cRw-ew2MMvfhaDkX7-1v2t8jiaHiQR6RqtAIGP8aWmN43mlKF7E5_Ynq3IOYM9HIKCWPIk8wi7KFYfvItrDc7IvEbpo_3oTV0p-9EpeQjC2wDUrl__4TQ\/s1080\/androidify-bot-demo-google-io.gif\")
<\/div>\nUnder the hood<\/span><\/h2>\nThe app combines a variety of different Google technologies, such as:<\/p>\n
\n\n- Gemini API<\/a><\/b> – through Firebase AI Logic SDK, for accessing the underlying Imagen and Gemini models.<\/li>\n<\/ul>\n
\n- Jetpack Compose<\/a><\/b> – for building the UI with delightful animations and making the app adapt to different screen sizes.<\/li>\n<\/ul>\n
\n- Navigation 3<\/b> – the latest navigation library for building up Navigation graphs with Compose.<\/li>\n<\/ul>\n
\n- CameraX Compose<\/a> and Media3 Compose<\/a><\/b> – for building up a custom camera with custom UI controls (rear camera support, zoom support, tap-to-focus) and playing the promotional video.<\/li>\n<\/ul>\n<\/ul>\n
This sample app is currently using a standard Imagen model, but we’ve been working on a fine-tuned model that’s trained specifically on all of the pieces that make the Android bot cute and fun; we’ll share that version later this year. In the meantime, don’t be surprised if the sample app puts out some interesting looking examples!<\/p>\n
How does the Androidify app work?<\/span><\/h2>\nThe app leverages our best practices for Architecture, Testing, and UI to showcase a real world, modern AI application on device.<\/p>\n
<\/p>\n![\"Flow](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEicZhSlnTWz7A9-stUVfbB-rbgpv38xFKgCjJSYoggrrfARVC2YFtyqNYW5_J3LMq20zfqeADQh52q6DwxBUBC455yKX3WctM23xfh-QlhvZBGoY6Q76UKr44ReVU5QWWNQ2P-IFW86caPOh5dIrIrNGBzQthLv7EU9cOCDCHMERjIUMyOg_h97t7q1GK8\/s16000\/androidify-app-flow-architecture.png\"\/)
<\/div>\nAndroidify app flow chart detailing how the app works with AI<\/em><\/center><\/imgcaption><\/image><\/p>\nAI in Androidify with Gemini and ML Kit<\/span><\/h2>\nThe Androidify app uses the Gemini models in a multitude of ways to enrich the app experience, all powered by the Firebase AI Logic SDK<\/a>. The app uses Gemini 2.5 Flash and Imagen 3 under the hood:<\/p>\n\n\n- Image validation:<\/b> We ensure that the captured image contains sufficient information, such as a clearly focused person, and assessing for safety. This feature uses the multi-modal capabilities of Gemini API, by giving it a prompt and image at the same time:<\/li>\n<\/ul>\n<\/ul>\n
<\/p>\n
\nval<\/span> response = generativeModel.generateContent(\n content {\n text(prompt)\n image(image)\n },\n)\n<\/pre>\n<\/div>\n<\/p>\n
\n\n- Text prompt validation:<\/b> If the user opts for text input instead of image, we use Gemini 2.5 Flash to ensure the text contains a sufficiently descriptive prompt to generate a bot.<\/li>\n<\/ul>\n
<\/p>\n
\n- Image captioning:<\/b> Once we\u2019re sure the image has enough information, we use Gemini 2.5 Flash to perform image captioning., We ask Gemini to be as descriptive as possible,focusing on the clothing and its colors.<\/li>\n<\/ul>\n
<\/p>\n
\n- \u201cHelp me write\u201d feature:<\/b> Similar to an \u201cI\u2019m feeling lucky\u201d type feature, \u201cHelp me write\u201d uses Gemini 2.5 Flash to create a random description of the clothing and hairstyle of a bot.<\/li>\n<\/ul>\n
<\/p>\n
\n- Image generation from the generated prompt:<\/b> As the final step, Imagen generates the image, providing the prompt and the selected skin tone of the bot.<\/li>\n<\/ul>\n<\/ul>\n
The app also uses the ML Kit pose detection<\/a> to detect a person in the viewfinder and enable the capture button when a person is detected, as well as adding fun indicators around the content to indicate detection.<\/p>\nExplore more detailed information about AI usage in Androidify<\/a>.<\/p>\nJetpack Compose<\/span><\/h2>\nThe user interface of Androidify is built using Jetpack Compose, the modern UI toolkit that simplifies and accelerates UI development on Android.<\/p>\n
Delightful details with the UI<\/span><\/h3>\nThe app uses Material 3 Expressive<\/a>, the latest alpha release that makes your apps more premium, desirable, and engaging. It provides delightful bits of UI out-of-the-box, like new shapes, componentry, and using the MotionScheme<\/span> variables wherever a motion spec is needed.<\/p>\nMaterialShapes<\/a><\/span> are used in various locations. These are a preset list of shapes that allow for easy morphing between each other\u2014for example, the cute cookie shape for the camera capture button:<\/p>\n<\/p>\n![\"Androidify](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjtTIuUO9OlzwfseVWyceNrYI5DWDcvyMZosXPJr1I5uN8X5vFGjpSQtSCqIGDVZpD8ocxogmtPfKftJb8jSjUt7E4dndHDue4x2Yvq8mwC2JkVuqyeGYGOOUEvSqk7koc7mUDXMTC4FYQYnvsi_ioJu4UClFadiv_HKZ7mLioCLHr3DpvnYrf_kbwq_f4\/s1600\/camera-button-materialshapes-androidify-google-io.png\")
<\/div>\nCamera button with a MaterialShapes.Cookie9Sided<\/span> shape<\/em><\/center><\/imgcaption><\/image><\/p>\nBeyond using the standard Material components, Androidify also features custom composables and delightful transitions tailored to the specific needs of the app:<\/p>\n
\n\n- There are plenty of shared element transitions across the app\u2014for example, a morphing shape shared element transition is performed between the \u201ctake a photo\u201d button and the camera surface.<\/li>\n<\/ul>\n
<\/p>\n
\n<\/p>\n![\"moving](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEhWVTQUwtQo13XnUS8EByVxH7Ou3rUWqyvY2BpsJh-Ub6ZA4_S3Z3yPZORg9TAUZvHNsaNjhUsAq3bcGZKDStCaeUCzcqxBDu4zwcalJ9ZSFKcyJyqocu6YVvv3yMhNuz-getfnHY5uVD6royUWUm58nBPCwQmA30uMUqopjL_MhRWYn10yeJgsf-yfiV0\/s1600\/morph-shared-element-androidify-google-io.gif\")
<\/div>\n<\/image><\/p>\n
- Custom enter transitions for the ResultsScreen<\/a><\/span> with the usage of marquee modifiers.<\/li>\n<\/ul>\n
<\/p>\n
\n<\/p>\n![\"animated](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEivftZEN51EFmOej_1nfp-7zrGWUxbJx7nEx5GgVAtjlK9t4f49VmKE0RSOWP6zhkhMTaj7fnYq5SH5su_5hzxCGoX9wXiyVEROOmPAwIev5dk6O8Uw_cIcPmqERVEA48vD4jcN3pSJvzHhLEchXU5h5locO8qOQFGO-eErP-oXSWU017BaF7Q3Auvjlh4\/s1600\/end-screen-animation-androidify-google-io.gif\")
<\/div>\n<\/image><\/p>\n
- Fun color splash animation as a transition between screens.<\/li>\n<\/ul>\n
<\/p>\n
\n<\/p>\n![\"moving](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEi_5rJvIIo6ioe_Jo5dkrOD7OuZdo4xJHbmnIqr-kVB6pViOimjtcqZUnxZD2trpDTvoySZWcxx4RjqQEPYhlm1vfr8M_NY7Y9rl7ea7XOUneHLGlIxHWQBjIGKaZZ78SddX1UoUYPoG88fNWcr9t09ShrI_KFZcg8nZaUF59enD7sbcL5x5gsLl-jsQiA\/s1600\/color-splash-androidify-google-io.gif\")
<\/div>\n<\/image><\/p>\n
- Animating gradient buttons for the AI-powered actions.<\/li>\n<\/ul>\n
<\/p>\n
\n<\/p>\n![\"animated](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEj1RYgxeWS2GZA6Lk9JK0E74VBJBhHeySxP12qXhYwGLl42-o1pdKBCdQY_QUq5z0yW_eHnaRFqT5TiAqyjGJVZ2TqH8WO-QqqJYWhPWjrUJfHveBowy_h5ltkZ9xa54QuAS0e2pANkENbkg0qb5CaaU8Zp5u-ebYgbC-i6HJ_ACzG_sdS6q1aH89cgAZk\/s1600\/animated-gradient-button-androidify-google-io.gif\")
<\/div>\n<\/image><\/ul>\n<\/ul>\n
To learn more about the unique details of the UI, read Androidify: Building delightful UIs with Compose<\/a><\/p>\nAdapting to different devices<\/span><\/h2>\nAndroidify is designed to look great and function seamlessly across candy bar phones, foldables, and tablets. The general goal of developing adaptive apps is to avoid reimplementing the same app multiple times on each form factor<\/b> by extracting out reusable composables, and leveraging APIs like WindowSizeClass<\/span> to determine what kind of layout to display.<\/p>\n<\/p>\n![\"a](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEic1TH6JufLXDvVrsaIgTSbPHlP6OnoAj5ZXxbUIr7bVTgGclDnLVJQcp8yPshtg8rrWQfFRG6W37kYYKwNyBiKzbkX2Z-z2WMuDzSHCmmt9fqvqTDObJWIIrWu0v_GznhdgALR8gcJfLjOMyBRB5g8anHmdwyqJyYWx9sAFmwbpu47HiSfQXZVknl5pow\/s16000\/adaptive-layouts-androidify-google-io.png\"\/)
<\/div>\nVarious adaptive layouts in the app<\/em><\/center><\/imgcaption><\/image><\/p>\nFor Androidify, we only needed to leverage the width window size class. Combining this with different layout mechanisms, we were able to reuse or extend the composables to cater to the multitude of different device sizes and capabilities.<\/p>\n
\n\n- Responsive layouts:<\/b> The CreationScreen<\/a><\/span> demonstrates adaptive design. It uses helper functions like isAtLeastMedium()<\/span> to detect window size categories and adjust its layout accordingly. On larger windows, the image\/prompt area and color picker might sit side-by-side in a Row<\/span>, while on smaller windows, the color picker is accessed via a ModalBottomSheet<\/span>. This pattern, called \u201csupporting pane\u201d, highlights the supporting dependencies between the main content and the color picker.<\/li>\n<\/ul>\n
<\/p>\n
\n- Foldable support:<\/b> The app actively checks for foldable device features. The camera screen uses WindowInfoTracker<\/span> to get FoldingFeature<\/span> information to adapt to different features by optimizing the layout for tabletop posture.<\/li>\n<\/ul>\n
<\/p>\n
\n- Rear display:<\/b> Support for devices with multiple displays is included via the RearCameraUseCase<\/a><\/span>, allowing for the device camera preview to be shown on the external screen when the device is unfolded (so the main content is usually displayed on the internal screen).<\/li>\n<\/ul>\n<\/ul>\n
Using window size classes, coupled with creating a custom @LargeScreensPreview<\/a><\/span> annotation, helps achieve unique and useful UIs across the spectrum of device sizes and window sizes.<\/p>\nCameraX and Media3 Compose<\/span><\/h2>\nTo allow users to base their bots on photos, Androidify integrates CameraX<\/a>, the Jetpack library that makes camera app development easier.<\/p>\nThe app uses a custom CameraLayout<\/a><\/span> composable that supports the layout of the typical composables that a camera preview screen would include\u2014 for example, zoom buttons, a capture button, and a flip camera button. This layout adapts to different device sizes and more advanced use cases, like the tabletop mode and rear-camera display. For the actual rendering of the camera preview, it uses the new CameraXViewfinder<\/a><\/span> that is part of the camerax-compose<\/span> artifact.<\/p>\n<\/p>\n![\"CameraLayout](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEgI8uGN5mVP0rjmzH6UdJm1lDfrQPg52kArxQaz0t41xh-3cM7dlbS1u6um4bPSIEhUiX8NorFs_tOI_V6K-rd8b7cEUJWIbOzbBlYOoPqz_lfIhfEakWDiqdHG1xQnhJLXvyeVgowNWqTCr3okJ4CiJaKSGzAaAw9ThkhRcIPk6trKZuh6BOCEzdfXb-s\/s16000\/cameralayout-camerax-media3-compose-androidify-google-io.png\"\/)
<\/div>\nCameraLayout<\/span> composable that takes care of different device configurations, such as table top mode<\/em><\/center><\/imgcaption><\/image>
<\/p>\n![\"CameraLayout](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjvgaQZTySov3PINb0Hce1XNxW6cbhtExTgKwZZbUQ9XYGGuMilMhqEbiVp6W73Bf-AP_uFKbGEYtav1nChf-zTuXCBHzxXkM_jxP4TvGOnTehRq0sJ5zlhqBAPzFbnLNTzr2IHoRAiWLN0Mil9VPC-44IYONEyFJiDece2PCDuFPF6XXPABYlbe2I7KFQ\/s16000\/adaptive-camera-layouts-androidify-google-io.png\"\/)
<\/div>\nCameraLayout<\/span> composable that takes care of different device configurations, such as table top mode<\/em><\/center><\/imgcaption><\/image><\/p>\nThe app also integrates with Media3<\/a> APIs to load an instructional video for showing how to get the best bot from a prompt or image. Using the new media3-ui-compose<\/span> artifact, we can easily add a VideoPlayer<\/a><\/span> into the app:<\/p>\n<\/p>\n
\n@Composable\nprivate<\/span> fun<\/span> VideoPlayer<\/span>(modifier: Modifier = Modifier) {\n val<\/span> context = LocalContext.current\n var<\/span> player by remember { mutableStateOf(null<\/span>) }\n LifecycleStartEffect(Unit) {\n player = ExoPlayer.Builder(context).build().apply {\n setMediaItem(MediaItem.fromUri(Constants.PROMO_VIDEO))\n repeatMode = Player.REPEAT_MODE_ONE\n prepare()\n }\n onStopOrDispose {\n player?.release()\n player = null<\/span>\n }\n }\n Box(\n modifier\n .background(MaterialTheme.colorScheme.surfaceContainerLowest),\n ) {\n player?.let { currentPlayer ->\n PlayerSurface(currentPlayer, surfaceType = SURFACE_TYPE_TEXTURE_VIEW)\n }\n }\n}\n<\/player><\/pre>\n<\/div>\nUsing the new onLayoutRectChanged<\/span> modifier, we also listen for whether the composable is completely visible or not, and play or pause the video based on this information:<\/p>\n<\/p>\n
\nvar<\/span> videoFullyOnScreen by remember { mutableStateOf(false<\/span>) } \n\nLaunchedEffect(videoFullyOnScreen) {\n if<\/span> (videoFullyOnScreen) currentPlayer.play() else<\/span> currentPlayer.pause()\n} \n\n\/\/ We add this onto the player composable to determine if the video composable is visible, and mutate the videoFullyOnScreen variable, that then toggles the player state. <\/span>\nModifier.onVisibilityChanged(\n containerWidth = LocalView.current.width,\n containerHeight = LocalView.current.height,\n) { fullyVisible -> videoFullyOnScreen = fullyVisible }\n\n\/\/ A simple version of visibility changed detection<\/span>\nfun<\/span> Modifier.onVisibilityChanged(\n containerWidth: Int,\n containerHeight: Int,\n onChanged: (visible: Boolean) -> Unit,\n) = this<\/span> then Modifier.onLayoutRectChanged(100<\/span>, 0<\/span>) { layoutBounds ->\n onChanged(\n layoutBounds.boundsInRoot.top > 0<\/span> &&\n layoutBounds.boundsInRoot.bottom < containerHeight &&\n layoutBounds.boundsInRoot.left > 0<\/span> &&\n layoutBounds.boundsInRoot.right < containerWidth,\n )\n}\n<\/pre>\n<\/div>\nAdditionally, using rememberPlayPauseButtonState<\/span>, we add on a layer on top of the player to offer a play\/pause button on the video itself:<\/p>\n<\/p>\n
\nval<\/span> playPauseButtonState = rememberPlayPauseButtonState(currentPlayer)\n OutlinedIconButton(\n onClick = playPauseButtonState::onClick,\n enabled = playPauseButtonState.isEnabled,\n ) {\n val<\/span> icon =\n if<\/span> (playPauseButtonState.showPlay) R.drawable.play else<\/span> R.drawable.pause\n val<\/span> contentDescription =\n if<\/span> (playPauseButtonState.showPlay) R.string.play else<\/span> R.string.pause\n Icon(\n painterResource(icon),\n stringResource(contentDescription),\n )\n }\n<\/pre>\n<\/div>\nCheck out the code for more details on how CameraX and Media3 were used in Androidify<\/a>. <\/p>\nNavigation 3<\/span><\/h2>\nScreen transitions are handled using the new Jetpack Navigation 3 library androidx.navigation3<\/span>. The MainNavigation<\/a><\/span> composable defines the different destinations (Home, Camera, Creation, About) and displays the content associated with each destination using NavDisplay<\/span>. You get full control over your back stack, and navigating to and from destinations is as simple as adding and removing items from a list.<\/p>\n<\/p>\n
\n@Composable\nfun<\/span> MainNavigation<\/span>() {\n val<\/span> backStack = rememberMutableStateListOf(Home)\n NavDisplay(\n backStack = backStack,\n onBack = { backStack.removeLastOrNull() },\n entryProvider = entryProvider {\n entry { entry ->\n HomeScreen(\n onAboutClicked = {\n backStack.add(About)\n },\n )\n }\n entry {\n CameraPreviewScreen(\n onImageCaptured = { uri ->\n backStack.add(Create(uri.toString()))\n },\n )\n }\n \/\/ etc<\/span>\n },\n )\n}\n<\/camera><\/home><\/navigationroute><\/pre>\n<\/div>\nNotably, Navigation 3 exposes a new composition local, LocalNavAnimatedContentScope<\/span>, to easily integrate your shared element transitions without needing to keep track of the scope yourself. By default, Navigation 3 also integrates with predictive back, providing delightful back experiences when navigating between screens, as seen in this prior shared element transition:<\/p>\n<\/p>\n![\"CameraLayout](\"https:\/\/blogger.googleusercontent.com\/img\/b\/R29vZ2xl\/AVvXsEjMN81Kqzol9hbhrH4CTbCUz5rKw1FkQkYxst1uZFtFarE3CsVcYgc_nuLOlhgmJLphHovpOZB2eTw0lEdi71qEWks1hARucQKbnmOlcsLgrsUwnPftJS0N6Uex_ZYECqWumfUdg-GQcTFxttRhFJkzY2pKKQVrwsIdMieNqX0Sz9WgvdOain2WIFoeKII\/s1600\/shared-element-transition-androidify-app-google-io.gif\")
<\/div>\n<\/image><\/p>\n
Learn more about Jetpack Navigation 3, currently in alpha<\/a>.<\/p>\nLearn more<\/span><\/h2>\nBy combining the declarative power of Jetpack Compose, the camera capabilities of CameraX, the intelligent features of Gemini, and thoughtful adaptive design, Androidify is a personalized avatar creation experience that feels right at home on any Android device. You can find the full code sample at github.com\/android\/androidify<\/a> where you can see the app in action and be inspired to build your own AI-powered app experiences.<\/p>\nExplore this announcement and all Google I\/O 2025 updates on io.google<\/a> starting May 22.<\/p>\n<\/div>\n
- \n
- Gemini API<\/a><\/b> – through Firebase AI Logic SDK, for accessing the underlying Imagen and Gemini models.<\/li>\n<\/ul>\n
- \n
- Jetpack Compose<\/a><\/b> – for building the UI with delightful animations and making the app adapt to different screen sizes.<\/li>\n<\/ul>\n
- \n
- Navigation 3<\/b> – the latest navigation library for building up Navigation graphs with Compose.<\/li>\n<\/ul>\n
- \n
- CameraX Compose<\/a> and Media3 Compose<\/a><\/b> – for building up a custom camera with custom UI controls (rear camera support, zoom support, tap-to-focus) and playing the promotional video.<\/li>\n<\/ul>\n<\/ul>\n
This sample app is currently using a standard Imagen model, but we’ve been working on a fine-tuned model that’s trained specifically on all of the pieces that make the Android bot cute and fun; we’ll share that version later this year. In the meantime, don’t be surprised if the sample app puts out some interesting looking examples!<\/p>\n
How does the Androidify app work?<\/span><\/h2>\n
The app leverages our best practices for Architecture, Testing, and UI to showcase a real world, modern AI application on device.<\/p>\n
<\/p>\n <\/div>\nAndroidify app flow chart detailing how the app works with AI<\/em><\/center><\/imgcaption><\/image><\/p>\n AI in Androidify with Gemini and ML Kit<\/span><\/h2>\n
The Androidify app uses the Gemini models in a multitude of ways to enrich the app experience, all powered by the Firebase AI Logic SDK<\/a>. The app uses Gemini 2.5 Flash and Imagen 3 under the hood:<\/p>\n
- \n
- Image validation:<\/b> We ensure that the captured image contains sufficient information, such as a clearly focused person, and assessing for safety. This feature uses the multi-modal capabilities of Gemini API, by giving it a prompt and image at the same time:<\/li>\n<\/ul>\n<\/ul>\n
<\/p>\n
\nval<\/span> response = generativeModel.generateContent(\n content {\n text(prompt)\n image(image)\n },\n)\n<\/pre>\n<\/div>\n<\/p>\n
- \n
- Text prompt validation:<\/b> If the user opts for text input instead of image, we use Gemini 2.5 Flash to ensure the text contains a sufficiently descriptive prompt to generate a bot.<\/li>\n<\/ul>\n
<\/p>\n
- \n
- Image captioning:<\/b> Once we\u2019re sure the image has enough information, we use Gemini 2.5 Flash to perform image captioning., We ask Gemini to be as descriptive as possible,focusing on the clothing and its colors.<\/li>\n<\/ul>\n
<\/p>\n
- \n
- \u201cHelp me write\u201d feature:<\/b> Similar to an \u201cI\u2019m feeling lucky\u201d type feature, \u201cHelp me write\u201d uses Gemini 2.5 Flash to create a random description of the clothing and hairstyle of a bot.<\/li>\n<\/ul>\n
<\/p>\n
- \n
- Image generation from the generated prompt:<\/b> As the final step, Imagen generates the image, providing the prompt and the selected skin tone of the bot.<\/li>\n<\/ul>\n<\/ul>\n
The app also uses the ML Kit pose detection<\/a> to detect a person in the viewfinder and enable the capture button when a person is detected, as well as adding fun indicators around the content to indicate detection.<\/p>\n
Explore more detailed information about AI usage in Androidify<\/a>.<\/p>\n
Jetpack Compose<\/span><\/h2>\n
The user interface of Androidify is built using Jetpack Compose, the modern UI toolkit that simplifies and accelerates UI development on Android.<\/p>\n
Delightful details with the UI<\/span><\/h3>\n
The app uses Material 3 Expressive<\/a>, the latest alpha release that makes your apps more premium, desirable, and engaging. It provides delightful bits of UI out-of-the-box, like new shapes, componentry, and using the MotionScheme<\/span> variables wherever a motion spec is needed.<\/p>\n
MaterialShapes<\/a><\/span> are used in various locations. These are a preset list of shapes that allow for easy morphing between each other\u2014for example, the cute cookie shape for the camera capture button:<\/p>\n
<\/p>\n <\/div>\nCamera button with a MaterialShapes.Cookie9Sided<\/span> shape<\/em><\/center><\/imgcaption><\/image><\/p>\n Beyond using the standard Material components, Androidify also features custom composables and delightful transitions tailored to the specific needs of the app:<\/p>\n
- \n
- There are plenty of shared element transitions across the app\u2014for example, a morphing shape shared element transition is performed between the \u201ctake a photo\u201d button and the camera surface.<\/li>\n<\/ul>\n
<\/p>\n
- \n
- Custom enter transitions for the ResultsScreen<\/a><\/span> with the usage of marquee modifiers.<\/li>\n<\/ul>\n
<\/p>\n
- \n
- Fun color splash animation as a transition between screens.<\/li>\n<\/ul>\n
<\/p>\n
- \n
- Animating gradient buttons for the AI-powered actions.<\/li>\n<\/ul>\n
<\/p>\n
- \n
- Responsive layouts:<\/b> The CreationScreen<\/a><\/span> demonstrates adaptive design. It uses helper functions like isAtLeastMedium()<\/span> to detect window size categories and adjust its layout accordingly. On larger windows, the image\/prompt area and color picker might sit side-by-side in a Row<\/span>, while on smaller windows, the color picker is accessed via a ModalBottomSheet<\/span>. This pattern, called \u201csupporting pane\u201d, highlights the supporting dependencies between the main content and the color picker.<\/li>\n<\/ul>\n
<\/p>\n
- \n
- Foldable support:<\/b> The app actively checks for foldable device features. The camera screen uses WindowInfoTracker<\/span> to get FoldingFeature<\/span> information to adapt to different features by optimizing the layout for tabletop posture.<\/li>\n<\/ul>\n
<\/p>\n
- \n
- Rear display:<\/b> Support for devices with multiple displays is included via the RearCameraUseCase<\/a><\/span>, allowing for the device camera preview to be shown on the external screen when the device is unfolded (so the main content is usually displayed on the internal screen).<\/li>\n<\/ul>\n<\/ul>\n
Using window size classes, coupled with creating a custom @LargeScreensPreview<\/a><\/span> annotation, helps achieve unique and useful UIs across the spectrum of device sizes and window sizes.<\/p>\n
CameraX and Media3 Compose<\/span><\/h2>\n
To allow users to base their bots on photos, Androidify integrates CameraX<\/a>, the Jetpack library that makes camera app development easier.<\/p>\n
The app uses a custom CameraLayout<\/a><\/span> composable that supports the layout of the typical composables that a camera preview screen would include\u2014 for example, zoom buttons, a capture button, and a flip camera button. This layout adapts to different device sizes and more advanced use cases, like the tabletop mode and rear-camera display. For the actual rendering of the camera preview, it uses the new CameraXViewfinder<\/a><\/span> that is part of the camerax-compose<\/span> artifact.<\/p>\n
<\/p>\n <\/div>\nCameraLayout<\/span> composable that takes care of different device configurations, such as table top mode<\/em><\/center><\/imgcaption><\/image> <\/p>\n <\/div>\nCameraLayout<\/span> composable that takes care of different device configurations, such as table top mode<\/em><\/center><\/imgcaption><\/image><\/p>\n The app also integrates with Media3<\/a> APIs to load an instructional video for showing how to get the best bot from a prompt or image. Using the new media3-ui-compose<\/span> artifact, we can easily add a VideoPlayer<\/a><\/span> into the app:<\/p>\n
<\/p>\n
\n@Composable\nprivate<\/span> fun<\/span> VideoPlayer<\/span>(modifier: Modifier = Modifier) {\n val<\/span> context = LocalContext.current\n var<\/span> player by remember { mutableStateOf(null<\/span>) }\n LifecycleStartEffect(Unit) {\n player = ExoPlayer.Builder(context).build().apply {\n setMediaItem(MediaItem.fromUri(Constants.PROMO_VIDEO))\n repeatMode = Player.REPEAT_MODE_ONE\n prepare()\n }\n onStopOrDispose {\n player?.release()\n player = null<\/span>\n }\n }\n Box(\n modifier\n .background(MaterialTheme.colorScheme.surfaceContainerLowest),\n ) {\n player?.let { currentPlayer ->\n PlayerSurface(currentPlayer, surfaceType = SURFACE_TYPE_TEXTURE_VIEW)\n }\n }\n}\n<\/player><\/pre>\n<\/div>\n Using the new onLayoutRectChanged<\/span> modifier, we also listen for whether the composable is completely visible or not, and play or pause the video based on this information:<\/p>\n
<\/p>\n
\nvar<\/span> videoFullyOnScreen by remember { mutableStateOf(false<\/span>) } \n\nLaunchedEffect(videoFullyOnScreen) {\n if<\/span> (videoFullyOnScreen) currentPlayer.play() else<\/span> currentPlayer.pause()\n} \n\n\/\/ We add this onto the player composable to determine if the video composable is visible, and mutate the videoFullyOnScreen variable, that then toggles the player state. <\/span>\nModifier.onVisibilityChanged(\n containerWidth = LocalView.current.width,\n containerHeight = LocalView.current.height,\n) { fullyVisible -> videoFullyOnScreen = fullyVisible }\n\n\/\/ A simple version of visibility changed detection<\/span>\nfun<\/span> Modifier.onVisibilityChanged(\n containerWidth: Int,\n containerHeight: Int,\n onChanged: (visible: Boolean) -> Unit,\n) = this<\/span> then Modifier.onLayoutRectChanged(100<\/span>, 0<\/span>) { layoutBounds ->\n onChanged(\n layoutBounds.boundsInRoot.top > 0<\/span> &&\n layoutBounds.boundsInRoot.bottom < containerHeight &&\n layoutBounds.boundsInRoot.left > 0<\/span> &&\n layoutBounds.boundsInRoot.right < containerWidth,\n )\n}\n<\/pre>\n<\/div>\nAdditionally, using rememberPlayPauseButtonState<\/span>, we add on a layer on top of the player to offer a play\/pause button on the video itself:<\/p>\n
<\/p>\n
\nval<\/span> playPauseButtonState = rememberPlayPauseButtonState(currentPlayer)\n OutlinedIconButton(\n onClick = playPauseButtonState::onClick,\n enabled = playPauseButtonState.isEnabled,\n ) {\n val<\/span> icon =\n if<\/span> (playPauseButtonState.showPlay) R.drawable.play else<\/span> R.drawable.pause\n val<\/span> contentDescription =\n if<\/span> (playPauseButtonState.showPlay) R.string.play else<\/span> R.string.pause\n Icon(\n painterResource(icon),\n stringResource(contentDescription),\n )\n }\n<\/pre>\n<\/div>\nCheck out the code for more details on how CameraX and Media3 were used in Androidify<\/a>. <\/p>\n
Navigation 3<\/span><\/h2>\n
Screen transitions are handled using the new Jetpack Navigation 3 library androidx.navigation3<\/span>. The MainNavigation<\/a><\/span> composable defines the different destinations (Home, Camera, Creation, About) and displays the content associated with each destination using NavDisplay<\/span>. You get full control over your back stack, and navigating to and from destinations is as simple as adding and removing items from a list.<\/p>\n
<\/p>\n
\n@Composable\nfun<\/span> MainNavigation<\/span>() {\n val<\/span> backStack = rememberMutableStateListOf(Home)\n NavDisplay(\n backStack = backStack,\n onBack = { backStack.removeLastOrNull() },\n entryProvider = entryProvider {\n entry { entry ->\n HomeScreen(\n onAboutClicked = {\n backStack.add(About)\n },\n )\n }\n entry {\n CameraPreviewScreen(\n onImageCaptured = { uri ->\n backStack.add(Create(uri.toString()))\n },\n )\n }\n \/\/ etc<\/span>\n },\n )\n}\n<\/camera><\/home><\/navigationroute><\/pre>\n<\/div>\n Notably, Navigation 3 exposes a new composition local, LocalNavAnimatedContentScope<\/span>, to easily integrate your shared element transitions without needing to keep track of the scope yourself. By default, Navigation 3 also integrates with predictive back, providing delightful back experiences when navigating between screens, as seen in this prior shared element transition:<\/p>\n
<\/p>\n <\/div>\n<\/image><\/p>\n
Learn more about Jetpack Navigation 3, currently in alpha<\/a>.<\/p>\n
Learn more<\/span><\/h2>\n
By combining the declarative power of Jetpack Compose, the camera capabilities of CameraX, the intelligent features of Gemini, and thoughtful adaptive design, Androidify is a personalized avatar creation experience that feels right at home on any Android device. You can find the full code sample at github.com\/android\/androidify<\/a> where you can see the app in action and be inspired to build your own AI-powered app experiences.<\/p>\n
Explore this announcement and all Google I\/O 2025 updates on io.google<\/a> starting May 22.<\/p>\n
<\/div>\n
- Rear display:<\/b> Support for devices with multiple displays is included via the RearCameraUseCase<\/a><\/span>, allowing for the device camera preview to be shown on the external screen when the device is unfolded (so the main content is usually displayed on the internal screen).<\/li>\n<\/ul>\n<\/ul>\n
- Foldable support:<\/b> The app actively checks for foldable device features. The camera screen uses WindowInfoTracker<\/span> to get FoldingFeature<\/span> information to adapt to different features by optimizing the layout for tabletop posture.<\/li>\n<\/ul>\n
<\/p>\n <\/div>\n<\/image><\/ul>\n<\/ul>\n
To learn more about the unique details of the UI, read Androidify: Building delightful UIs with Compose<\/a><\/p>\n
Adapting to different devices<\/span><\/h2>\n
Androidify is designed to look great and function seamlessly across candy bar phones, foldables, and tablets. The general goal of developing adaptive apps is to avoid reimplementing the same app multiple times on each form factor<\/b> by extracting out reusable composables, and leveraging APIs like WindowSizeClass<\/span> to determine what kind of layout to display.<\/p>\n
<\/p>\n <\/div>\nVarious adaptive layouts in the app<\/em><\/center><\/imgcaption><\/image><\/p>\n For Androidify, we only needed to leverage the width window size class. Combining this with different layout mechanisms, we were able to reuse or extend the composables to cater to the multitude of different device sizes and capabilities.<\/p>\n
- \n
- \n
- Responsive layouts:<\/b> The CreationScreen<\/a><\/span> demonstrates adaptive design. It uses helper functions like isAtLeastMedium()<\/span> to detect window size categories and adjust its layout accordingly. On larger windows, the image\/prompt area and color picker might sit side-by-side in a Row<\/span>, while on smaller windows, the color picker is accessed via a ModalBottomSheet<\/span>. This pattern, called \u201csupporting pane\u201d, highlights the supporting dependencies between the main content and the color picker.<\/li>\n<\/ul>\n
<\/p>\n <\/div>\n<\/image><\/p>\n
- Animating gradient buttons for the AI-powered actions.<\/li>\n<\/ul>\n
<\/p>\n <\/div>\n<\/image><\/p>\n
- Fun color splash animation as a transition between screens.<\/li>\n<\/ul>\n
<\/p>\n <\/div>\n<\/image><\/p>\n
- Custom enter transitions for the ResultsScreen<\/a><\/span> with the usage of marquee modifiers.<\/li>\n<\/ul>\n
- \n
- There are plenty of shared element transitions across the app\u2014for example, a morphing shape shared element transition is performed between the \u201ctake a photo\u201d button and the camera surface.<\/li>\n<\/ul>\n
- Image generation from the generated prompt:<\/b> As the final step, Imagen generates the image, providing the prompt and the selected skin tone of the bot.<\/li>\n<\/ul>\n<\/ul>\n
- \u201cHelp me write\u201d feature:<\/b> Similar to an \u201cI\u2019m feeling lucky\u201d type feature, \u201cHelp me write\u201d uses Gemini 2.5 Flash to create a random description of the clothing and hairstyle of a bot.<\/li>\n<\/ul>\n
- Image captioning:<\/b> Once we\u2019re sure the image has enough information, we use Gemini 2.5 Flash to perform image captioning., We ask Gemini to be as descriptive as possible,focusing on the clothing and its colors.<\/li>\n<\/ul>\n
- \n
- Text prompt validation:<\/b> If the user opts for text input instead of image, we use Gemini 2.5 Flash to ensure the text contains a sufficiently descriptive prompt to generate a bot.<\/li>\n<\/ul>\n
- \n
- Image validation:<\/b> We ensure that the captured image contains sufficient information, such as a clearly focused person, and assessing for safety. This feature uses the multi-modal capabilities of Gemini API, by giving it a prompt and image at the same time:<\/li>\n<\/ul>\n<\/ul>\n
- CameraX Compose<\/a> and Media3 Compose<\/a><\/b> – for building up a custom camera with custom UI controls (rear camera support, zoom support, tap-to-focus) and playing the promotional video.<\/li>\n<\/ul>\n<\/ul>\n
- Navigation 3<\/b> – the latest navigation library for building up Navigation graphs with Compose.<\/li>\n<\/ul>\n
- Jetpack Compose<\/a><\/b> – for building the UI with delightful animations and making the app adapt to different screen sizes.<\/li>\n<\/ul>\n