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 full-size slide

  2. What’s a

    launcher

    anyway?

    View full-size slide

  3. launcher
    homescree

    View full-size slide

  4. launcher
    homescreen

    View full-size slide

  5. pre-4.0 doesn’t exist

    View full-size slide

  6. Old-school icon

    No background*

    Baked-in shadow & padding

    No vectors nor webp

    View full-size slide

  7. Round icon

    Has background

    Baked-in shadow

    No vectors nor webp

    View full-size slide

  8. Adaptive icon

    View full-size slide

  9. Adaptive icon

    View full-size slide

  10. Adaptive icon

    View full-size slide

  11. Adaptive icon

    View full-size slide

  12. Adaptive icon

    View full-size slide

  13. Has background

    Dynamic masking

    Can use vectors !
    Adaptive icon

    View full-size slide

  14. it’s all about the layers

    View full-size slide

  15. it’s all about the layers

    View full-size slide

  16. Nick Butcher’s

    Adaptive Icons

    demo app

    View full-size slide

  17. 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 full-size slide

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

    View full-size slide

  19. from Android 7.1
    Launcher sho"cuts

    View full-size slide

  20. Round icons
    Adaptive icons
    7.1 only
    8.0+

    View full-size slide

  21. 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 full-size slide

  22. …questions?

    View full-size slide