Tweet
Tweet

Slide 1

Slide 1 text

THANK YOU! Let’s get started! Android Worldwide Getting started on Android UI design hub

Slide 2

Slide 2 text

About Hannah ● GDE - Android ● Engineering Manager Android Worldwide

Slide 3

Slide 3 text

The Agenda ● Definitions ● Guidelines ● Implementation (The why) ● Resources ● QnA Android Worldwide

Slide 4

Slide 4 text

Android Design Hub A resource with expert advice to help Android developers create visually appealing and user-friendly interfaces for Android apps. Using Figma starter kits, UI samples and galleries. Android Worldwide

Slide 5

Slide 5 text

● Material Design Material is an open-source system that promotes user interface design ideals, facilitating collaboration between developers and designers, and enabling quick product production. Android Worldwide ❏ Foundation overview ❏ Environment ❏ Layout ✓ Navigation ❏ Color ❏ Typography ❏ Sound ❏ Iconography ❏ Shape ❏ Motion ❏ Interaction ❏ Communication ❏ Machine learning Material Material 2 Material 3

Slide 6

Slide 6 text

● Design Tools - Figma 1. WearOS Figma Kit 2. Android Mobile Figma Kit 3. TV Figma Kit Android Worldwide Figma is a collaborative design interface that enables both web and mobile developers build UI designs end to end and these designs can easily be exported as code e.g to Android Studio.

Slide 7

Slide 7 text

Figma Android Worldwide

Slide 8

Slide 8 text

Figma - Plugins Android Worldwide

Slide 9

Slide 9 text

Recommended Guidelines Android Worldwide ● For mobile ● For large screens

Slide 10

Slide 10 text

★ Navigation - Navigation bar (Mobile) Android Worldwide M2 M3

Slide 11

Slide 11 text

Navigation - Nav Rail (Large screens) Android Worldwide

Slide 12

Slide 12 text

Android Worldwide Recap

Slide 13

Slide 13 text

Building UIs (Before) Android Worldwide Recap

Slide 14

Slide 14 text

Building UIs (NOW) Android Worldwide Recap

Slide 15

Slide 15 text

Building UIs (NOW) Android Worldwide Recap

Slide 16

Slide 16 text

Resources ● https://medium.com/androiddevelopers/introducing-the-android-ui-design-hub-31d000186196 ● https://android-developers.googleblog.com/2023/05/introducing-android-ui-design-hub.html ● https://developer.android.com/jetpack/compose/tooling/relay/create-ui-package-in-figma ● https://m3.material.io/components/navigation-drawer/overview Android Worldwide

Slide 17

Slide 17 text

Thank You! Android Worldwide E-mail : [email protected] X : @hannah_omu