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
120
Generate Android App UI with Gemini
ムッチョ
June 19, 2024
Tweet
Share
More Decks by ムッチョ
See All by ムッチョ
AndroidアプリのUIをGeminiで生成する
musayazuju
0
86
Architecture Design for Local Database ~ Realm, CoreData, SwiftData ~
musayazuju
0
110
Databaseのことを考えずにiOSアプリを作る ローカルデータベースを使うときの アーキテクチャ設計
musayazuju
1
160
CoreDataからSwiftDataへの移行
musayazuju
1
140
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
71
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
How STYLIGHT went responsive
nonsquared
100
5.8k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Unsuck your backbone
ammeep
671
58k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
4 Signs Your Business is Dying
shpigford
185
22k
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!