Custom icons and splash screens in IBM MobileFirst Platform

I have to create custom application icons and splash screens for nearly every application I create with IBM Mobile First Platform.

Mostly, I have to work with iOS and Android applications, and I’ve now found a process and a set of tools that makes this a lot quicker.

NOTE: I’ll be concentrating on tools that work with Mac OSX exclusively, as I’m assuming you have access to this for creating your iOS hybrid applications.

Pre-requisites

I’m assuming you have a pre-existing MFP hybrid application project with an Android and iPhone (iOS) environment added to it. For the sake of argument, I’ll assume your project is called “MyProject” and the application is called “MyApp”. This results in a directory structure like MyProject/apps/MyApp.

The following commands will create an appropriate application:

mfp create MyProject
cd MyProject
mfp add hybrid MyApp
cd apps/MyApp
mfp add environment iphone
mfp add environment android

Create application icons

Firstly, create a 1024px x 1024px PNG icon file. You can use whichever editor you prefer for this. Generally, I use GIMP.

Don’t worry about rounded corners or anything – iOS will do this for you automatically, though Android will not. Transparency is preserved if you need it.

Once you have this file, you can feed it into the generation tools to make all the various sizes of icons you need.

Generating Android icons

Head over to makeappicon.com. Drop your 1024px x 1024px PNG file into the toaster. Once your files are “baked”, select the “Android” tab and get the website to email you your files.

Installing Android icons

The email you receive will have a ZIP file attached, with the following content:

Screen Shot 2015-02-19 at 13.32.52

Each of the android/drawable-* folders will contain an ic_launcher.png file. You need to copy these into your Android resource folder in your hybrid project.

cp -r icon/android/* MyProject/apps/MyApp/android/native/res

Make sure you adjust the command above to allow for your folders’ locations.

Now, adjust your android/native/AndroidManifest.xml file. You need to adjust the application element’s android:icon attribute to read @drawable/ic_launcher, like so:

<application android:label="@string/app_name" 
    android:icon="@drawable/ic_launcher">

This tells Android to use the ic_launcher.png files, not the pre-exisiting icon.png files. You can delete the icon.png files if you wish.

Generating iOS icons

You may have noticed that the archive you received from makeappicon.com included iOS icons, but unfortunately it’s an incomplete set. Thankfully, there’s an application that simplifies creation of the full set of iOS application icons, along with iOS splash screens.

Mark Bridges’s Asset Catalog Creator really helps out here. There are two versions; Asset Catalog Creator, and Asset Catalog Creator Free. Later on, you’ll need either the paid-for version (£1.49) or an in-app purchase from the free version (£0.79) to create iOS splash screens. I bought the full version.

Once you have the application installed, start it up and drag your 1024px x 1024px PNG icon file into the drop area, then generate the “iOS icon” asset catalog.

Installing iOS icons

Asset Catalog Creator has now generated an “asset catalog” – this is a really simple way of installing the icons into your iOS application. It also tells you how to install it, but in case you missed it, follow these instructions:

Open the iOS project in XCode. You can do this by opening MyProject/apps/MyApp/iphone/native/MyProjectMyAppIphone.xcodeproj with XCode.

Under the “General” tab in your project properties, find the “App Icons and Launch Images” section. Under “App Icons Source”, click “Use Asset Catalog”.

Screen Shot 2015-02-19 at 14.07.05

Choose to migrate existing app icons, and to migrate launch images. We’ll fix this up in a moment.

Drag the Media.xcassets folder generated by Asset Catalog Creator into your project root in XCode. Ensure you check “Copy items if needed” to install a copy of the files.

Screen Shot 2015-02-19 at 14.09.05
Screen Shot 2015-02-19 at 14.06.46

Click on the Media.xcassets folder. You’ll see several “sets” of resources: AppIcon (your new icons), AppIcon-1 (your old icons) and LaunchImage (your old splash screens). Make a note of the resource set you want to use as your application icons.

Now, go back to the “General” tab in your project properties, and select the correct resource set in “App Icons Source”.

Screen Shot 2015-02-19 at 14.18.39

Create splash screens

iOS is easiest and very similar to the iOS icons, so we’ll do that first.

Generating iOS splash screens

You’ll need a 2048px x 2048px version of your splash screen. Asset Catalog Creator can stretch, fit and crop this in various ways to generate all the versions you’ll need.

Using a method similar to that for iOS icons, use Asset Catalog Creator to create a set of iOS splash screens.

Installing iOS splash screens

Drag the generated LaunchImage.launchimage folder into the Media.xcassets folder in XCode:

Screen Shot 2015-02-19 at 14.24.54

Now, go back to the “General” tab in your project properties, and select the correct new resource set in “Launch Images Source”.

Screen Shot 2015-02-19 at 14.26.12

Generating Android splash screens

Android uses a special image format to create splash screens, known as a “9-patch image”. In the context of splash images, you’re only interested in marking up the “stretchable” areas of your image – you don’t have any content to “fill” the background with.

Take a look at Radley Marx’s guide and Google’s guide on 9-patch images.

There are many alternatives available for creating 9-patch images. I recommend the Android Asset Studio’s Simple Nine-patch Generator for basic splash screens. Alternatively, you could use the draw9patch tool included with the Android SDK.

Regardless, bear in mind that both of these tools are limited in capability when handling large images. I’d recommend a maximum size of 512px x 512px as a starting point.

Make sure you name your images splash.9.png.

Installing Android splash screens

Once you have generated your images using the tool of your choice, copy them into the appropriate drawable-* folders. If you have only one image, replace the drawable/splash.9.png image with it. Otherwise, delete any splash.9.png images you haven’t overwritten.

Conclusion

That’s it! Go ahead and compile your applications. Everything will look lovely.

Hardware accelerated Android emulator on Mac OS X

The Android emulator can be extremely slow when running in the default ARM emulation mode.

Fortunately, Google and Intel have worked together to give us a much faster alternative – the Intel Hardware Accelerated Execution Manager (HAXM).

I’ve had trouble getting this to work on Mac OS X in the past. I’m sure this should be documented somewhere, but sadly my Google fu is lacking today, so here is a quick summary of what I’ve recently learnt is needed to make it work.

Continue reading

Seeing the JavaScript console when writing PhoneGap applications in Eclipse

Recently I’ve been doing some work with writing PhoneGap/Dojo Mobile applications for Android, using Eclipse as the IDE. These work just fine with the Android emulator, but it took me a while to find where I could see the output of the JavaScript console. To show it, select Window -> Show View -> Other… in Eclipse. Then select the LogCat view (under the Android section). This will show all log messages for the emulator, but it can be further filtered to show only errors from the JavaScript console. Simply click on the green cross to add a Filter, then give the filter a name and enter “Web Console” for the Log Tag. Click OK and you’ll see only errors related to the browser (including JavaScript errors).