Generate Android App UI with Gemini

Slide 1

Slide 1 text

Generate Android App UI with

Slide 2

Slide 2 text

Introduction 👋 ● Name: Musa Yazici ● iOS Developer at Voicy Inc. ● Worked for 1 year as a developer of NativeCamp in Cebu🏝 @Mucchooooo

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

https://io.google/2024/ At Google I/O 2024…

Slide 5

Slide 5 text

There is a session on the Gemini Chat feature to help with Android development.

Slide 6

Slide 6 text

Gemini can understand the context of the Android projects!

Slide 7

Slide 7 text

Showcase to generate Jetpack compose code from a design image

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

And the result is…

Slide 10

Slide 10 text

🤔🤔🤔

Slide 11

Slide 11 text

✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅ Using proper UI components ❌ Difference in design detail Before After

Slide 12

Slide 12 text

✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅ Using proper UI components ❌ Difference in design detail Before After

Slide 13

Slide 13 text

✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅ Uses proper UI components ❌ Difference in design detail Before After

Slide 14

Slide 14 text

✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅ Uses proper UI components ❌ Differences in design details Before After

Slide 15

Slide 15 text

✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅ Using proper UI components ❌ Differences in design details Before After It will boost productivity!

Slide 16

Slide 16 text

Let’s try it!

Slide 17

Slide 17 text

Step 1: Open the Gemini tab

Slide 18

Slide 18 text

Step 2: Enter a prompt

Slide 19

Slide 19 text

Step2: Put a prompt Wait…

Slide 20

Slide 20 text

There is no image input option! 🤯

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

Gemini Advanced Google’s most capable AI models

Slide 23

Slide 23 text

The result of the code is…

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Java?

Slide 26

Slide 26 text

There are a few compile errors 🥺

Slide 27

Slide 27 text

But they were resolved after mentioning them to Gemini

Slide 28

Slide 28 text

The resulting UI is…

Slide 29

Slide 29 text

🤯

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

✅ Compiles without errors ✅ Recognizes each item’s characteristics ✅ Using proper UI components ❌ Differences in design details Before After Google’s showcase

Slide 32

Slide 32 text

❌ Not Compilable ❌ Doesn’t recognize the text properly ❌ Missing image ❌ Significant differences in design Before After Real

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

❌ imports and Composables only Code Comparison ✅ Hundreds of lines of code, including imports, MainActivity, Composable, and Preview Google’s showcase Real

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text