App asset management using Locomote.sh

Locomote.sh can be used to build and distribute images and other assets to iOS and Android apps.

Any Locomote content repository with an _app folder in the repository root can be used to publish app-specific resources. App resources should be arranged in the following directory structure:

_app/
    ios/
    android/
        assets/
        drawable-mdpi/
        ...
        drawable-xxxhdpi/
    common/

That is,

  • iOS specific assets are placed in the ios folder.

  • Android specific assets are placed under the android folder. Images should be placed in the drawable-* folder apprioriate for the image size; all other assets should be placed in the assets folder.

  • Assets which are common to both platforms can be placed in the common folder.

Image scaling

An app normally expects multiple versions of an image, each at different scales, for use on devices with different display PPI characteristics. On iOS this means providing @1x, @2x and @3x versions of an image. On Android, it means placing different versions of the image in one of the drawable-* folders, with drawable-ldpi used for the lowest resolution images, and drawable-xxxhdpi used for the highest.

If only one version of an app image asset is provided, then Locomote will attempt to generate other versions of the image from it by scaling the provided image. To preserve image quality, if will only do this when it can scale down an image to match a target PPI. This means that in most cases, only one version of any image is required, scaled for the highest display PPI on the target platform (e.g. xxx-hdpi on Android); Locomote will then automatically generate down scaled copies of the image for all the supported lower-PPI displays on the target platform (i.e. ldpi to xx-hdpi on Android). Locomote won't overwrite any lower-resolution versions of an image which are provided, so it is possible to provide two or three versions of an image at different resolutions, and Locomote will fill in the missing resolutions.

Common image assets and PPI suffixes

Locomote will automatically scale images placed in the common/ folder for different platform display resolutions, but to do this it needs to know the PPI that the source image is scaled for. This can be specified using a PPI suffix after the image filename. If you've worked with iOS then you will know about scale modifiers in an image filename - these are the @2x or @3x suffixes that are used to indicate higher resolution versions of images for Retina displays. A PPI suffix is a similar idea, but used to indicate a PPI value instead of a scale factor. So for example, a filename banner@360.png indicates that the image is scaled for 360 PPI. If placed in the _app/common folder then Locomote knows it can use the source image to generate a banner@2x.png image for iOS (at 326PPI) as well as the @1x size image (at 163 PPI); and it knows it can also use the source image to generate Android images from ldpi (at 120 PPI) to xhdpi (at 320 PPI).

Downloading images

Once published through a content repo, an app using the Locomote SDK will only download images and other assets appropriate for its platform and its display characteristics. This means that devices with low-resolution displays will only download the low-resolution copies of images, and so on.