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

Judge an App by its icon

Judge an App by its icon

Android and launcher (homescreen) icons: as with everything, it’s a lot more complicated than you’d think, once you look into it. But it’s not so complicated that I cannot run you through it in a few minutes! If you want to know all the latest news on the matter, do join.

This is aimed at designers, but with an hands-on approach.

Agenda:
* What is an Android launcher?
* The ways of the past: free for all, but also squares, but also any shapes
* The ways of the present: shortcuts and circles, pretty much, unless other shapes
* The ways of the future: adaptive icons

For each of the “ways” we’ll have a few tips and tricks and examples of how you’d set them up. The end goal is to have a sample project which has a few examples of all the aforementioned things, and a sample project that you can check out for reference.

-----

Hack & Tell presented at Novoda -> http://novoda.tv
Video: https://www.youtube.com/watch?v=CLV9HvubgIY

Sebastiano Poggi

July 12, 2017
Tweet

More Decks by Sebastiano Poggi

Other Decks in Technology

Transcript

  1. Sebastiano Poggi
    Novoda, Android & Identity GDE
    JUDGE AN APP
    BY ITS ICON
    #berthaisback

    View Slide

  2. What’s a

    launcher

    anyway?

    View Slide

  3. launcher
    homescree

    View Slide

  4. launcher
    homescreen

    View Slide

  5. app drawer

    View Slide

  6. pre-4.0 doesn’t exist

    View Slide

  7. our example

    View Slide

  8. meet

    Be"ha

    View Slide

  9. Old-school icon

    No background*

    Baked-in shadow & padding

    No vectors nor webp

    View Slide

  10. Round icon

    Has background

    Baked-in shadow

    No vectors nor webp

    View Slide

  11. Adaptive icon

    View Slide

  12. Adaptive icon

    View Slide

  13. Adaptive icon

    View Slide

  14. Adaptive icon

    View Slide

  15. Adaptive icon

    View Slide

  16. Has background

    Dynamic masking

    Can use vectors !
    Adaptive icon

    View Slide

  17. it’s all about the layers

    View Slide

  18. it’s all about the layers

    View Slide

  19. View Slide

  20. View Slide

  21. Nick Butcher’s

    Adaptive Icons

    demo app

    View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. Has background

    Dynamic masking

    Can use vectors !
    Adaptive icon
    Legacy icons
    Round icons
    Adaptive icons
    up to Android 7.0
    from Android 7.1
    from Android 8.0

    View Slide

  26. Legacy icons
    Round icons
    Adaptive icons
    up to Android 7.0
    from Android 7.1
    from Android 8.0

    View Slide

  27. View Slide

  28. from Android 7.1
    Launcher sho"cuts

    View Slide

  29. Round icons
    Adaptive icons
    7.1 only
    8.0+

    View Slide

  30. h#ps://goo.gl/5KPtjV (pa" 1) and onwards
    Resources
    Nick Butcher’s Adaptive Icons on Medium
    h#ps://www.novoda.com/blog/exploring-android-nougat-7-1-app-sho"cuts/
    Andrei’s App Sho"cuts on Novoda Blog
    h#ps://github.com/rock3r/launcher-icon
    Be"ha example project on GitHub
    Man Doubting created by Dooder - freepik.com

    Be"ha icon derived from Cornecoba - freepik.com

    View Slide

  31. …questions?

    View Slide