Generate Android App UI with Gemini

1. Generate Android App UI with
2. Introduction 👋 • Name: Musa Yazici • iOS Developer at Voicy Inc. • Worked for 1 year as a developer of NativeCamp in Cebu🏝 @Mucchooooo
4. https://io.google/2024/ At Google I/O 2024…
5. There is a session on the Gemini Chat feature to help with Android development.
6. Gemini can understand the context of the Android projects!
7. Showcase to generate Jetpack compose code from a design image
8. Prompt: For the image provided, use Jetpack Compose to build the screen so that the Compose Preview is as close to this image as possible. Also make sure to include imports, use Material 3.
9. And the result is…
10. 🤔🤔🤔
11. ✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅ Using proper UI components ❌ Difference in design detail Before After
12. ✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅ Using proper UI components ❌ Difference in design detail Before After
13. ✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅ Uses proper UI components ❌ Difference in design detail Before After
14. ✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅ Uses proper UI components ❌ Differences in design details Before After
15. ✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅ Using proper UI components ❌ Differences in design details Before After It will boost productivity!
16. Let’s try it!
17. Step 1: Open the Gemini tab
18. Step 2: Enter a prompt
19. Step2: Put a prompt Wait…
20. There is no image input option! 🤯
21. Let’s use the website The result from Gemini Advanced Prompt: For the image provided, use Jetpack Compose to build the screen so that the Compose Preview is as close to this image as possible. Also make sure to include imports, use Material 3.
22. Gemini Advanced Google’s most capable AI models
23. The result of the code is…
25. Java?
26. There are a few compile errors 🥺
27. But they were resolved after mentioning them to Gemini
28. The resulting UI is…
29. 🤯
31. ✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅ Using proper UI components ❌ Differences in design details Before After Google’s showcase
32. ❌ Not Compilable ❌ Doesn’t recognize the text properly ❌ Missing image ❌ Significant differences in design Before After Real
33. Level 1 https://www.vecteezy.com/vector-art/8295021- simple-store-drink-ui-design-template-vector-s uitable-designing-application-for-android-and-i os-clean-style-app-mobile Level 3 https://www.uistore.design/items/trackizer-free -app-ui-kit-for-figma/ Level 2 https://www.uistore.design/items/trackizer-free -app-ui-kit-for-figma/ ❌ Failed
34. ❌ imports and Composables only Code Comparison ✅ Hundreds of lines of code, including imports, MainActivity, Composable, and Preview Google’s showcase Real
35. Why? 🤔
36. The model is the same as the one used in the showcase: Gemini 1.5 Pro
37. Gemini Advanced is powered by Gemini 1.5 Pro 1M token context window
38. Fake…? Before After
39. Fake…? Before After or still under development
40. Stay tuned for updates from Google!
41. Thank you!