Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Generate Android App UI with Gemini
Search
ムッチョ
June 19, 2024
2
110
Generate Android App UI with Gemini
ムッチョ
June 19, 2024
Tweet
Share
More Decks by ムッチョ
See All by ムッチョ
AndroidアプリのUIをGeminiで生成する
musayazuju
0
84
Architecture Design for Local Database ~ Realm, CoreData, SwiftData ~
musayazuju
0
100
Databaseのことを考えずにiOSアプリを作る ローカルデータベースを使うときの アーキテクチャ設計
musayazuju
1
160
CoreDataからSwiftDataへの移行
musayazuju
1
98
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Agile that works and the tools we love
rasmusluckow
329
21k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
We Have a Design System, Now What?
morganepeng
52
7.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Transcript
Generate Android App UI with
Introduction 👋 • Name: Musa Yazici • iOS Developer at
Voicy Inc. • Worked for 1 year as a developer of NativeCamp in Cebu🏝 @Mucchooooo
None
https://io.google/2024/ At Google I/O 2024…
There is a session on the Gemini Chat feature to
help with Android development.
Gemini can understand the context of the Android projects!
Showcase to generate Jetpack compose code from a design image
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.
And the result is…
🤔🤔🤔
✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅
Using proper UI components ❌ Difference in design detail Before After
✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅
Using proper UI components ❌ Difference in design detail Before After
✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅
Uses proper UI components ❌ Difference in design detail Before After
✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅
Uses proper UI components ❌ Differences in design details Before After
✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅
Using proper UI components ❌ Differences in design details Before After It will boost productivity!
Let’s try it!
Step 1: Open the Gemini tab
Step 2: Enter a prompt
Step2: Put a prompt Wait…
There is no image input option! 🤯
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.
Gemini Advanced Google’s most capable AI models
The result of the code is…
None
Java?
There are a few compile errors 🥺
But they were resolved after mentioning them to Gemini
The resulting UI is…
🤯
None
✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅
Using proper UI components ❌ Differences in design details Before After Google’s showcase
❌ Not Compilable ❌ Doesn’t recognize the text properly ❌
Missing image ❌ Significant differences in design Before After Real
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
❌ imports and Composables only Code Comparison ✅ Hundreds of
lines of code, including imports, MainActivity, Composable, and Preview Google’s showcase Real
Why? 🤔
The model is the same as the one used in
the showcase: Gemini 1.5 Pro
Gemini Advanced is powered by Gemini 1.5 Pro 1M token
context window
Fake…? Before After
Fake…? Before After or still under development
Stay tuned for updates from Google!
Thank you!