How to prepare (what all sizes and resolutions) mockups and UI graphics for an Android app in PS


Question

I've seen similar questions asked here but they did not answer my question 100%. So please bear with me.

Now I am starting an app design project for iOS and Android. I've been designing for iOS for some time now but Android is totally a new thing for me. Android has so many devices at so many different resolutions and sizes that it is actually quite confusing to me at this point as to where to begin.

Is it possible to create your elements for the highest resolution and then use some method to scale them down for other smaller sizes? Or do we HAVE to do it manually and create them for each of the different sizes? What are the best practises and ideal flow for any such multi-platform requirement. Is there a way to easily reuse the iOS graphic assets? TIA :)

1
2
2/1/2015 10:46:00 AM

Yes, and you should. Android Design Elements can be generated wit a 9-patch generator. A system where all resolutions are supplied based on one png.

The nine-patch generator allows you to quickly generate simple nine-patches at different screen densities, based on the specified source artwork.

Your design should be flexible enough to honor this system. But this is all very well documented, so repeating it here seems out of the scope: Android Design Guidelines

Also consider reading this introduction:

While I was working on my first Android app, I found 9-patch (aka 9.png) to be confusing and poorly documented. After a little while, I finally picked up on how it works and decided to throw together something to help others figure it out.

Basically, 9-patch uses png transparency to do an advanced form of 9-slice or scale9. The guides are straight, 1-pixel black lines drawn on the edge of your image that define the scaling and fill of your image. By naming your image file name.9.png, Android will recognize the 9.png format and use the black guides to scale and fill your bitmaps.

enter image description here

As for Mockup Best practice: Use the resolution of your test-device, or rather, in it's dp size (the MDPI or unmultiplied aspect ratio of the screen).

2
2/2/2015 11:03:00 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^