$30 off During Our Annual Pro Sale. View Details »

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:
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

Nick Rout

December 01, 2018
Tweet

More Decks by Nick Rout

Other Decks in Technology

Transcript

  1. Material Tools &
    Components
    Using them to design & build a real Android
    app

    View Slide

  2. Nick Rout
    @ricknout

    View Slide

  3. Jetpack
    AndroidX
    ConstraintLayout 2.0
    MotionLayout
    New Architecture Components
    Android App Bundles
    .
    .
    .
    .
    .
    . . . . . . .
    . . . . . .
    . . . . .
    . . . .
    . . .

    View Slide

  4. developer.android.com/jetpack/androidx/migrate
    ”com.android.support:design:$support_version”
    ”com.google.android.material:material:$material_version”

    View Slide

  5. ... And lots more

    View Slide

  6. New Material Design website

    View Slide

  7. View Slide

  8. New design guidelines

    View Slide

  9. •Layout
    •Navigation
    •Typography
    •Iconography
    •Shape
    •Motion
    •Theming
    •Components

    View Slide

  10. New tools

    View Slide

  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

    View Slide

  12. Material Components library

    View Slide

  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*

    View Slide

  14. – Me (and all of you?)
    “Okay, but what’s it really like
    to use all of these guidelines,
    tools and components together?”

    View Slide

  15. Rugby Ranker

    View Slide

  16. Watches Rugby
    Designer
    Developer
    Me

    View Slide

  17. Choosing a color palette

    View Slide

  18. World Rugby colors
    #2D8626 #2A3C81 #E51A19 #808080 #F6F7F8 #FFFFFF
    Major Minor

    View Slide

  19. material.io/tools/color

    View Slide

  20. First things first:
    implementation ”com.google.android.material:material:$material_version”

    View Slide

  21. <br/><item name=“colorPrimary">@color/world_rugby_green</item><br/><item name=“colorPrimaryVariant">@color/world_rugby_green_dark</item><br/><item name=“colorOnPrimary">@color/white</item><br/><item name=“colorSecondary”>@color/world_rugby_blue</item><br/><item name=“colorSecondaryVariant”>@color/world_rugby_blue_dark</item><br/><item name=“colorOnSecondary”>@color/white</item><br/>
    github.com/material-components/material-components-android/blob/master/docs/theming/Color.md

    View Slide

  22. A word on themes...

    View Slide

  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

    View Slide

  24. Deciding on typography

    View Slide

  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.

    View Slide

  26. fonts.google.com

    View Slide

  27. xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    android:fontStyle="normal"
    android:fontWeight="600"
    android:font="@font/rajdhani_semibold"
    app:fontStyle="normal"
    app:fontWeight="600"
    app:font="@font/rajdhani_semibold" />

    Add .ttf / .otf files to res/font
    Use Downloadable Fonts!
    ... or XML Fonts

    View Slide

  28. <br/><item name="android:fontFamily">@font/rajdhani</item><br/><item name=“fontFamily">@font/rajdhani</item><br/>

    View Slide

  29. Picking an iconography style

    View Slide

  30. material.io/tools/icons

    View Slide

  31. Standard icons:
    Custom icons:

    View Slide

  32. Add VectorDrawables and use with app:srcCompat=“...”

    View Slide

  33. Using Material Theme Editor

    View Slide

  34. Download and install the Sketch plugin from:
    material.io/tools/theme-editor

    View Slide

  35. ( 1 )
    ( 2 )
    ( 3 )

    View Slide

  36. View Slide

  37. View Slide

  38. Color

    View Slide

  39. Typography

    View Slide

  40. Shape + Iconography

    View Slide

  41. View Slide

  42. Previewing designs in Gallery

    View Slide

  43. Upload to Gallery

    View Slide

  44. View all screens (Artboards)

    View Slide

  45. Inspect and comment

    View Slide

  46. Building the app

    View Slide

  47. Check out the code
    on GitHub!

    View Slide

  48. Anatomy of the app icon

    View Slide

  49. material.io/design/iconography/product-icons

    View Slide

  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

    View Slide

  51. Remember to add an Adaptive
    Icon
    ic_launcher_background.xml ic_launcher_foreground.xml
    * in res/drawable-anydpi-v24 because of vector gradients




    * in res/mipmap-anydpi-v26

    View Slide

  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?

    View Slide

  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

    View Slide

  54. play.google.com/store/apps/details?
    id=com.ricknout.rugbyranker
    github.com/nicholasrout/rugby-ranker

    View Slide

  55. View Slide