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
   

   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