Appcelerator Blog

The Leading Resource for All Things Mobile

How to Use Device Specific Images

14 Flares 14 Flares ×

Previously we’ve looked at How to Use Density Specific Images. For this post, we expand the example app as we discover how to use images specific to certain (groups of) devices.

Why should you bother?

Well, for views that have fixed dimensions you probably shouldn’t. But for views of which one or both dimensions are relative to the screen size of the user’s device, providing density specific images alone won’t cut it.

If the aspect ratio (width / height) of the view is not fixed either you will need the Resizable Images we will discuss in our next post or you need to crop the image, which we will come to at the end of this post.

It is full width and/or height images (background or splash) in particular that we can address with device specific images.

iOS

We have seen that iOS uses filename suffixes for density specific images. The table Providing density specific images on iOS listed three options (@3x and @2x plus no suffix) for each image, but there are 7 more. Assuming our input to be /images/image.png again, Titanium considers the following paths, given the device matches the condition in the iPhone or iPad column.

Filename iPhone iPad Full-screen size (px)
image-736h@3x.png * == 6 Plus   2208×1242 (16:9)
image@3x.png == 6 Plus   2208×1242 (16:9)
image-667h@2x.png * == 6   1334×750 (16:9)
image-568h@2x.png * == 5   1136×640 (16:9)
image@2x~iphone.png * >= 4   960×640 (3:2)
image@2x~ipad.png *   >= 3
>= Mini 2
== Air
2048×1536 (4:3)
image@2x.png >= 4 >= 3
>= Mini 2
== Air
image~iphone.png * All   480×320 (3:2)
image~ipad.png *   All 1024×768 (4:3)
image.png All All

As you can see, we can use ~iphone and ~ipad to target images for iPhone (including iPod Touch) or iPad. The other new suffix you see is -<dp>h. This allows you to target 3 specific categories of iPhone screens by their height in DP.

* If you make sure you have all these images in place, it will show exactly as expected on all iOS devices.

See the example app for a demonstration of these suffixes.

Orientation specific images

Only launch/splash images support an additional suffix for iPad and iPhone 6 Plus, which is -Landscape or -Portrait. See the iOS graphic asset requirements and options for the exact filenames and dimensions. For regular views, you will have to handle orientation specific images yourself, for example using Jason Kneen’s Dynamic TSS Widget.

Android

We saw that Android uses folder names with so-called configuration qualifier names. The selection is done by the OS itself and described in detail in its API Guides.

It won’t surprise you that the many qualifiers also include some for screen sizes:

  • Smallest width (sw<N>dp)
  • Available width (w<B>dp)
  • Available height (h<B>dp)
  • Screen aspect (long|notlong)
  • Screen orientation (port|land)

Other than iOS, no image will exactly match the device. So for fullscreen (background) images you will still get stretched images or images that don’t fully cover the view. The best solution for these cases are nine-patch (next post) or cropped images (see below).

For images that have only one relative dimension (e.g. a full-width header image with auto-size height) it works fine you won’t end up with a blurry image taking up almost half of the screen when you open the app on a tablet.

See the example app for a demonstration of the Available width qualifier:

/images/res-w400dp-xhdpi/image.png
/images/res-w600dp-xhdpi/image.png
/images/res-w800dp-xhdpi/image.png

Crop on demand

The resizable images we’ll discuss in our next post of this series, will not work for photos or detailed images. If you don’t know the exact aspect ratio the image must have, then the above solutions won’t do and leave you with just one option: crop them.

Remote

To crop the images on a remote server, you simply have to send it the exact dimenions you need, in pixels of course. For example:

var view = Ti.UI.createImageView({
    hires: true // required for iOS to not scale down
});

// wait till we have the layed out size
view.addEventListener('postlayout', function getImage() {
  view.removeEventListener('postlayout', getImage);

  var ldf = Ti.Platform.displayCaps.logicalDensityFactor;

  var width = Math.round(view.size.width * ldf);
  var height = Math.round(view.size.height * ldf);

  view.image = 'http://placehold.it/' + width + 'x' + height;
});

Titanium automatically caches remote images based on the URL.

See the example app for a demonstration using placehold.it.

Local

To crop local, the idea is the same but you do the image manipulation in the app instead of on the server. For the best result, first down or upsize the image to cover the target dimensions and then crop the overflow.

See the example app for a demonstration including local cache.

14 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 14 Email -- 14 Flares ×

Sign up for updates!

Become a mobile leader. Take the first step to scale mobile innovation throughout your enterprise.
Get in touch
computer and tablet showing Appcelerator software
Start free, grow from there.
14 Flares Twitter 0 Facebook 0 Google+ 0 LinkedIn 14 Email -- 14 Flares ×