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
74
Generate Android App UI with Gemini
ムッチョ
June 19, 2024
Tweet
Share
More Decks by ムッチョ
See All by ムッチョ
AndroidアプリのUIをGeminiで生成する
musayazuju
0
50
Architecture Design for Local Database ~ Realm, CoreData, SwiftData ~
musayazuju
0
51
Databaseのことを考えずにiOSアプリを作る ローカルデータベースを使うときの アーキテクチャ設計
musayazuju
1
98
CoreDataからSwiftDataへの移行
musayazuju
1
33
Featured
See All Featured
Ruby is Unlike a Banana
tanoku
96
11k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
5
480
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
0
96
Designing with Data
zakiwarfel
98
5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.6k
It's Worth the Effort
3n
182
27k
Building an army of robots
kneath
302
42k
Fashionably flexible responsive web design (full day workshop)
malarkey
401
65k
Bash Introduction
62gerente
608
210k
Being A Developer After 40
akosma
84
590k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
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!