Android images are confusing me

Question

I'm having a load of issues with android images.

I just don't know what sizes to make them and how to make them behave.

I'm coming from iphone development right, so in iphone dev I would fire up photoshop, create a canvas that is 640*960 and design my app.

I would then cut up the resulting design and export all the images with the extention @2x. Then I would scale it by 0.5 and export for standard display devices.

This is easy to understand... this is easy to do. If I want an image to take up half the screen I would make it 320px wide for the high res and 160px wide for standard res.

Unfortunately android isn't working like this. I can't figure it out. There is no "easy conversion" as it were. I don't know how many dip a screen in android is!

So I end up using things like wrap_content which doesn't help because then different screens just display different resolutions of the image. I'm having so many issues with extraneous margins on images and all sorts!

How to use images with android properly?

Answer 1

Android development is much more like web development. To be more specific it's more like web development where you allow the page to resize with the browser window. iPhone development is more like web dev where you use a fixed page width and can control a lot of the payout.

With Android the screen could be almost any size, and almost any orientation, but most crucially any of a variety of resolutions. It's just like @2x but you need more variants as Android is more varied. It's different but you'll get used to it.

This page is the official documentation re graphics: http://developer.android.com/guide/practices/screens_support.html

But in reality I have found this page to be of more practical use: http://coding.smashingmagazine.com/2011/06/30/designing-for-android/

The aim is that when you have an image of a particular physical size on the screen, it should display pretty much the same size on any device, whether it's a crappy low res one, or a super hi-res device (like those coming soon).

DIP is a measurement that relates to physical size rather than pixels. If you say something is 100dips wide it will be about the same physical size on all Android devices, no matter what the resolution of the device.

You could just stick hi-res graphics in the drawable-xhdpi folder, but Android will have to resize on the fly and so you may see performance and quality issues. This is why you have to provide a set.

Remember when designing that things will stretch. Don't try and fix everything to the same size, it won't work. So for example for buttons, you are likely to want to use stretchable images (read up on 9-patch images) so the app resizes depending on the different screen size.

Also, you may well be able to create many of the icons you need (menus, notifications etc) using Roman Nurik's FANTASTIC icon studio tool http://android-ui-utils.googlecode.com/hg/asset-studio/dist/index.html

So for example if you need an app launcher icon, just give his tool a bitmap, and it trims it, scales it, pads it, adds a 3D button effect (shine and shadow), and then squirts out versions for xhdpi, hdpi, mdpi, ldpi. It saves me DAYS of time on every project.

Good luck!

Answer 2

Have a look at these two links : first and second

Android phones come in different sizes and densities unlike iPhone. For android development you need to be clear what phone you are targeting(density wise) to use hard-coded values. If you want to make it general, it is good to use wrap_content. I dont know what problem you having with that. And what margins are you talking about? Can you specify?