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
99
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Adopting Sorbet at Scale
ufuk
77
9.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
For a Future-Friendly Web
brad_frost
179
9.8k
Building Adaptive Systems
keathley
43
2.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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!