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

84ed0218b7b6eec8a5ac5af51c342c0c?s=47 Nick Rout
December 01, 2018

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

84ed0218b7b6eec8a5ac5af51c342c0c?s=128

Nick Rout

December 01, 2018
Tweet

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

  7. None
  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 )

  36. None
  37. None
  38. Color

  39. Typography

  40. Shape + Iconography

  41. None
  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

  55. None