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
80
Architecture Design for Local Database ~ Realm, CoreData, SwiftData ~
musayazuju
0
100
Databaseのことを考えずにiOSアプリを作る ローカルデータベースを使うときの アーキテクチャ設計
musayazuju
1
150
CoreDataからSwiftDataへの移行
musayazuju
1
97
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
245
12k
Fireside Chat
paigeccino
37
3.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
750
Bash Introduction
62gerente
614
210k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Being A Developer After 40
akosma
91
590k
4 Signs Your Business is Dying
shpigford
183
22k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
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!