Designing & Building a real Android app with Material Tools & Components

Google I/O 2018 introduced a huge shake-up of the Android guidelines, support libraries and tools for both developers and designers. In addition to Jetpack and AndroidX, developers are required to migrate their usage of the Design Support Library in favour of Material Components for Android. The Material Design team also introduced a host of new exciting guidelines and tools. This presentation covers what it is like to use these relatively new tools and components to build a real Android app, from design to development. This includes choosing colours using the Color Tool, iconography using Material Icons, designing the app in Sketch using the Material Theme Editor plugin, previewing the design using Gallery and, finally, building the app using Material Components for Android.

This was presented at Droidcon Kenya 2018:
https://twitter.com/droidconke/status/1047320655539200000

It was also presented at DevFest South Africa 2018:
https://devfest-southafrica.firebaseapp.com/schedule/2018-12-01?sessionId=157

The video recording of the presentation is available on YouTube:
https://www.youtube.com/watch?v=hjATvyrA0CQ

Transcript

1. Material Tools & Components Using them to design & build a real Android app
2. Nick Rout @ricknout
3. Jetpack AndroidX ConstraintLayout 2.0 MotionLayout New Architecture Components Android App Bundles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4. developer.android.com/jetpack/androidx/migrate ”com.android.support:design:$support_version” ”com.google.android.material:material:$material_version”
5. ... And lots more
6. New Material Design website
8. New design guidelines
9. •Layout •Navigation •Typography •Iconography •Shape •Motion •Theming •Components
10. New tools
11. Material Theme Editor - Sketch plugin - Theme-able components - Upload to Gallery Gallery - Share, present, upload - Inspect designs to get take to developer docs Color Tool & Icons - Put in base brand colors to get primary, secondary, dark, light - Text color suggestions - Choose an icon style
12. Material Components library
13. •New and updated components for Android •Publicly available on GitHub - track progress, issues and submit PRs •Heavily user tested •Align with guidelines* •Easy to theme / reuse*
14. – Me (and all of you?) “Okay, but what’s it really like to use all of these guidelines, tools and components together?”
15. Rugby Ranker
16. Watches Rugby Designer Developer Me
17. Choosing a color palette
18. World Rugby colors #2D8626 #2A3C81 #E51A19 #808080 #F6F7F8 #FFFFFF Major Minor
19. material.io/tools/color
20. First things first: implementation ”com.google.android.material:material:$material_version”
21. <style name="RugbyRankerTheme" parent=“Theme.MaterialComponents.Light.NoActionBar”> <item name=“colorPrimary">@color/world_rugby_green</item> <item name=“colorPrimaryVariant">@color/world_rugby_green_dark</item> <item name=“colorOnPrimary">@color/white</item> <item name=“colorSecondary”>@color/world_rugby_blue</item> <item name=“colorSecondaryVariant”>@color/world_rugby_blue_dark</item> <item name=“colorOnSecondary”>@color/white</item> </style> github.com/material-components/material-components-android/blob/master/docs/theming/Color.md
22. A word on themes...
23. 6 x AppCompat Themes (eg. Theme.AppCompat.Light.NoActionBar) 6 x Material Components Themes (eg. Theme.MaterialComponents.Light.NoActionBar) These will require switching over ALL existing widget styles to Material Components equivalents Use the .Bridge themes to incrementally upgrade
24. Deciding on typography
25. World Rugby font: Proprietary font called “FS Blake” :-( Closest open alternative: Lato Not that great... We need a modern, no-nonsense, easy to read font.
26. fonts.google.com
27. <font-family xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <font android:fontStyle="normal" android:fontWeight="600" android:font="@font/rajdhani_semibold" app:fontStyle="normal" app:fontWeight="600" app:font="@font/rajdhani_semibold" /> </font-family> Add .ttf / .otf files to res/font Use Downloadable Fonts! ... or XML Fonts
28. <style name=“WorldRugbyRankerTheme" parent=“…”> <item name="android:fontFamily">@font/rajdhani</item> <item name=“fontFamily">@font/rajdhani</item> </style>
29. Picking an iconography style
30. material.io/tools/icons
31. Standard icons: Custom icons:
32. Add VectorDrawables and use with app:srcCompat=“...”
33. Using Material Theme Editor
34. Download and install the Sketch plugin from: material.io/tools/theme-editor
35. ( 1 ) ( 2 ) ( 3 )
38. Color
39. Typography
40. Shape + Iconography
42. Previewing designs in Gallery
43. Upload to Gallery
44. View all screens (Artboards)
45. Inspect and comment
46. Building the app
47. Check out the code on GitHub!
48. Anatomy of the app icon
49. material.io/design/iconography/product-icons
50. 192dp x 192dp bounding box 176dp diameter Stripes reminiscent of rankings, rugby fields and old school jerseys Shadow specs: y = 4dp, blur = 4dp, color = #33000000 Incorporates World Rugby brand color Rugby ball shape also used for “add match” icon ‘R’ indicates both ‘Rugby’ and ‘Ranking’ Subtle green vertical gradient to provide a modern feel Looks good at big and small sizes
51. Remember to add an Adaptive Icon ic_launcher_background.xml ic_launcher_foreground.xml * in res/drawable-anydpi-v24 because of vector gradients <adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android"> <background android:drawable="@drawable/ic_launcher_background" /> <foreground android:drawable="@drawable/ic_launcher_foreground" /> </adaptive-icon> * in res/mipmap-anydpi-v26
52. The bad, up until very recently... •Many open issues and pull requests on Github repository •No real standout members in the Android community •Not all theme/style attributes propagate to all components •Things outstanding - shape and icon styles •Is it an extension of AppCompat? Is it its own thing?
53. But now... •Highly recommended - watch “The Components of Material Design” video from Android Dev Summit •Cameron Ketcham and Gautam Sajith - follow them •More active on Slack and social media •Issues/PRs addressed quicker and promises of faster release cadence (eg. 1.1.0-alpha01 recently) •Appears to be more community involvement
54. play.google.com/store/apps/details? id=com.ricknout.rugbyranker github.com/nicholasrout/rugby-ranker