Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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:

It was also presented at DevFest South Africa 2018:

The video recording of the presentation is available on YouTube:

Nick Rout

December 01, 2018

More Decks by Nick Rout

Other Decks in Technology


  1. Jetpack AndroidX ConstraintLayout 2.0 MotionLayout New Architecture Components Android App

    Bundles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
  2. 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
  3. •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*
  4. – Me (and all of you?) “Okay, but what’s it

    really like to use all of these guidelines, tools and components together?”
  5. <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
  6. 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
  7. 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.
  8. 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
  9. 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
  10. 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?
  11. 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