What's the proper way to scale/size background images for Android?

Question

I want to have an image cover the background of my Android game, but I'm new to Android development - are there conventions for what file type such an image should be?

What is a conventional size?

What's the proper way to scale/refit this image to different devices (right now I just added the imageresource to the back layout, but this scales the image and distorts it)?

I'm planning on using photoshop and drawing out the image there, is there a more recommended method?

Thanks

Answer 1

1. "Are there conventions for what file type such an image should be?" The image can be any common file format. PNG is common, probably because it's loss-less and supports transparency, but I don't know the details.

2. "What is a conventional size?" You will have to produce an image of various resolutions to support all the screens on which your game may be used. You can create new directories in your project tree that look like res/drawable-{screen-type}, where {screen-type} is a screen size/resolution/minimum dimension. For details on how this works see Supporting Multiple Screens.

3. "What's the proper way to scale/refit this image to different devices?" See #2. To avoid distorting your image, you will need to produce different sized/resolution images to fit various screen sizes.

4. With regards to Photoshop -- if you are producing a background with a complex design/graphic, you will probably want to use the graphics editor you know best, such as Photoshop. However, if you are making a background that will just be a simple pattern that repeats, or even just a solid, consider making just a small bit of the image, and then using an Android Shape Drawable or Nine Patch Drawable to tile/repeat/stretch your image. This will reduce the number of different-sized images you need to produce for different screens, and will also reduce the space your app takes up, since you will have fewer resources to package. For info on the Drawable resources that Android supports, see Drawable Resources.

Answer 2

The background drawable is stretched by default. If you want to change that, you can create an XML <bitmap> drawable resource referencing your image and set its gravity attribute to something different than fill.

The result can be better if your image is decomposed in different smaller images aligned properly. For exemple, a main background color, a top part and a bottom part. You can then combine the different layers with a Layer list drawable or using a custom layout.