3

Ask DN: How do you prepare assets for Android?

5 years ago from , UI Designer at Rocker Creative

I'm currently working on some Android app designs. The client asks me to prepare assets for icons and other graphics. As we all know, Android has tons of screen resolutions. Some of them use different sizes for assets (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi). I'm wondering how you manage all this stuff. So for example you create app design in Sketch (because it's super easy in Sketch to export different sizes of assets). As a foundation, I use screen resolution = 720x1280px (I think it's one of the Nexus resolutions). From this point, what multiplier should I use for each asset size?

Or maybe do you have some other technique for doing this?

13 comments

  • Marc EdwardsMarc Edwards, 5 years ago (edited 5 years ago )

    Some of them use different sizes for assets (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi).

    You’ll likely only need mdpi, hdpi, xhdpi and xxhdpi. You may want xxxhdpi, but it’s not as essential as they others right now.

    I'm wondering how you manage all this stuff.

    A combination of Photoshop scripts, actions and Hazel rules.

    Here’s my complete workflow, including iOS and Android exporting: http://bjango.com/articles/appdesignworkflow/

    From this point, what multiplier should I use for each asset size?

    If you use mdpi as your starting point:

    • mdpi = ~160dpi = 1×, or 100%
    • hdpi = ~240dpi = 1.5×, or 150%
    • xhdpi = ~320dpi = 2×, or 200%
    • xxhdpi = ~480dpi = 3×, or 300%
    • xxxhdpi = ~640dpi = 4×, or 400%
    6 points
  • Ron C, 5 years ago

    I'm new to designing for Android and iOS apps. I was frustrated with how many different densities Android has but found a great photoshop plugin. It's called PNG EXPRESS. I design in xxxhdpi resolution and the plugin to export for all the different densities. It also works with exporting iOS designs. I usually want free things but because $29 isn't a crazy price, I went ahead and bought it. It's worth every penny and has made my life easier!

    http://www.pngexpress.com/

    0 points
  • Ryan Hicks, 5 years ago

    This has all your answers. http://rustyshelf.org/2014/07/08/the-android-screen-fragmentation-myth/

    And this possibly. http://sebastien-gabriel.com/designers-guide-to-dpi/home

    0 points
  • Evgeny BelyaevEvgeny Belyaev, 5 years ago (edited 5 years ago )

    I use an alpha version of Resonator (Photoshop CC Plugin).

    Site — http://resonator.cc/

    "Collector"

    It collects your design elements from input PSDs to one Res-Project-Name.psd.

    Screenshot — http://inft.ly/paxDJxk

    "Saver"

    It saves icons from your Res-Project-Name.psd to appropriate folders.

    Screenshot — http://inft.ly/LSSmuXz

    0 points
  • Sergi MiralSergi Miral, 5 years ago

    Right now I'm working in xxhdpi using as a base the 'avuik' Sketch template (perfect to preview on the nexus5).

    For exporting I'm using the GenerateAndroidAssets plugin and I've tweaked the factor variables in the plugin to take as factor 1 the xxhdpi size, so:

    var factors = [ ["mdpi",0.34], ["hdpi", 0.5], ["xhdpi", 0.67], ["xxhdpi", 1], ["xxxhdpi", 1.34]];

    It may not be the best option because of the rounded values, but honestly I am not sure... But well, it seems to do the trick. Let me know if you try this way, or if you have a better technique ;)

    0 points
  • Pawel LudwiczakPawel Ludwiczak, 5 years ago

    (post title should be: "How do you prepare assets for Android?" - sory for mistake, I can't edit it :()

    0 points