Wednesday 24 October 2012

Android Scaled Images Tool

Android supports 4 screen types, extra high, high, medium and low density. Extra high density means that the screen has a higher number of pixels per inch than a lower density screen. If you have images in your app then you need to provide images for each screen type, so that the image size will remain consistent.

My approach to doing this is first create my extra high definition image and then resize it for the less dense screen types:

High Density - Reduce Image to 75% of the original size
Medium Density - Reduce Image to 50% of the original size
Low Density - Reduce Image to 37.5% of the original size




 I start with the top most image and then reduce it in size to create the other images. On your computer screen each image is becoming smaller, but on a Android phone with a low density display and a phone with a high density display will pick the right image so that to the user they appear the same physical size.

I've not found a tool yet on Eclipse to actually resize the images for me so I created my own. Its a .Net tool for Windows, you can download it from:

http://sites.google.com/site/pigdogbay/downloads

The tool is called AndroidScaledImages.msi

I've had a few issues with creating a shortcut in the users StartTo menu (a technical issue to do with advertised shortcuts being default in MS Setup). Anyhow you will need to create a short cut to the AndroidScaledImages.exe file in your Send To folder. To do this.


  1. Open the start menu
  2. Go to run / search
  3. Enter shell:sendto
  4. Now open a new explorer window
  5. Navigate to the program files\pig dog bay\Android Scaled Images
  6. Create a short cut to AndroidScaledImages.exe and drag it into your send to folder.
Once done, you can right click your extra high def image, send to, AndroidScaledImages.exe - shortcut
The high, medium and low density images will then be created in the same directory as the image you clicked. You then move each image into corresponding apps res/drawable folder, and then rename them all to the same name.

The tool is very simple and the source is below in case you want to role you own. If anyone has a better way of creating the lower density images,e.g. from Eclipse please let me know.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;

namespace AndroidScaledImages
{
    class Program
    {
        static void Main(string[] args)
        {
            if (args.Length != 1)
            {
                return;
            }
            if (!File.Exists(args[0]))
            {
                return;
            }
            string filename = Path.GetFileNameWithoutExtension(args[0]);
            string path = Path.GetDirectoryName(args[0]);
            Bitmap bitmap = new Bitmap(args[0]);
            Bitmap high = ResizeImage(bitmap,0.75);
            Bitmap medium = ResizeImage(bitmap,0.50);
            Bitmap low = ResizeImage(bitmap,0.375);
            high.Save(Path.Combine(path,filename + "_h.png"),ImageFormat.Png);
            medium.Save(Path.Combine(path, filename + "_m.png"), ImageFormat.Png);
            low.Save(Path.Combine(path, filename + "_l.png"), ImageFormat.Png);

        }

        static Bitmap ResizeImage(Bitmap original, double ratio)
        {
            double w = (double)original.Width;
            double h = (double)original.Height;
            w = w * ratio;
            h = h * ratio;
            Bitmap resized = new Bitmap((int)w, (int)h);
            using (Graphics g = Graphics.FromImage((Image)resized))
            {
                g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
                g.DrawImage(original, 0, 0, (int)w, (int)h);
            }
            return resized;    
        }


    }
}

No comments:

Post a Comment