Slide 1

Slide 1 text

Getting started on Android UI design hub

Slide 2

Slide 2 text

Hannah Olukoye

Slide 3

Slide 3 text

Agenda Definitions 1 Implementation + Demos 2 Summary & Questions 3

Slide 4

Slide 4 text

“Let’s explore the changing landscape of Android UI design together.”

Slide 5

Slide 5 text

Figma (Design Tool) A collaborative design interface that enables both web and mobile developers to build UI designs end-to-end, and these designs can easily be exported as code, e.g to Android Studio.

Slide 6

Slide 6 text

Material Design An open-source system that promotes user interface design ideals, facilitates collaboration between developers and designers, and enables quick deployment of apps to production.

Slide 7

Slide 7 text

Material Design - Components ❏ Foundation overview ❏ Environment ❏ Layout ✓ Navigation ❏ Color ❏ Typography ❏ Sound ❏ Iconography ❏ Shape ❏ Motion ❏ Interaction ❏ Communication ❏ Machine learning

Slide 8

Slide 8 text

Android UI 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.

Slide 9

Slide 9 text

Navigation Component ● Navigation Bar ● Navigation Drawer ● Navigation Rail

Slide 10

Slide 10 text

Responsive Layout

Slide 11

Slide 11 text

Android UI Kit

Slide 12

Slide 12 text

Figma Plugin + Android Studio

Slide 13

Slide 13 text

Navigation Drawer Demo

Slide 14

Slide 14 text

Navigation Rail Demo With screen size flexibility

Slide 15

Slide 15 text

1. Consistency Across Applications 2. Tools and Resources  3. Responsive Design and Accessibility 4. Efficient Development Process  Recap

Slide 16

Slide 16 text

Helpful 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 ● https://github.com/android/compose-samples/tree/main/Reply

Slide 17

Slide 17 text

Reach out on email - [email protected] Follow me on X @hannah_omu Thank You