How to automatically sign your Android apk using Ionic framework and Crosswalk

ionic-logo-268x300During the development of CoolKids I discovered a simple trick that can be a great time saver when you are building your app using Ionic Framework and the Crosswalk web view.

In few steps you’ll be able to automate the production of release signed apks of your app, ready to be published on the Google Play Store.

If you are developing an hybrid mobile app using the awesome Ionic Framework and you are targeting the Android platform, I strongly suggest you to use the Crosswalk web view for your app.

The most important advantage using Crosswalk is a consistent platform to deal with, if you don’t like to fix bugs arising from the fragmentation of Android webviews.

Using Crosswalk in your Ionic project is as easy as typing this command:

$ ionic browser add crosswalk

Ionic will take care of setting the building environment for you.

When you want to publish your app on the Google Play Store you have to build the apk in release mode, sign it with a key of your keystore and zipalign the package to optimize it.

Creating the keystore is out of scope of this howto, you can find all the details in the Ionic Documentation.

All of these steps can be automated by creating a file named release-signing.properties with your favorite text editor (vi in my case) in your platforms/android/ directory.

cd platforms/android/
vi release-signing.properties

In that file you can put only two lines:

storeFile=/path/to/keystore/yourname.keystore
keyAlias=youralias

Of course you have to modify the path to your keystore file and the alias of your key.

Then you can build your release apk with the command:

$ ionic build --release android

A little window will appear asking for the keystore password and the key password. If you don’t want to type the two passwords all times you can write them in the release-signing.properties files, adding two lines similar to the following:

storePassword=your_keystore_password
keyPassword=your_key_password

But I suggest to keep your password secret and avoid writing them in a clear text file.

At the end of the build you’ll find your apks in the platforms/android/build/outputs/apk/ directory. With this setup you should find two apks named android-x86-release.apk and android-armv7-release.apk there.

Remember that you have to upload both x86 and armv7 apks to the Play Store, because using Crosswalk your app contains native code which is architecture specific.

Remember to activate the “Advanced mode” in your Developer Console (if you are in “Simple mode” only one apk at a time can be activated) and upload one apk after the other. Google will be clever enough seeing that the apks target two different platforms. For more details on the topic see the Android documentation.

Thanks to baleboy who pointed out in the comments the need to upload both apks to the store.

Advertisements

16 thoughts on “How to automatically sign your Android apk using Ionic framework and Crosswalk

  1. Am I right in assuming that these are for Gradle-based builds used in Cordova 5.x and higher? For those of us not on the bleeding edge or maintaining older apps, we’ll be using the Ant-based build system instead…

    • This howto uses all the default tools and versions coming with Ionic Framework. My Cordova version is 4.3.0 and IIRC that uses ANT by default. Only when you add Crosswalk to the project (as in this howto) the build system is switched to Gradle.

  2. Thank you for this! Makes it a lot easier!
    However this is wrong :-
    ionic build –release android
    it should be :-
    ionic build android –release

  3. I do have to point out, that Crosswalk is not required for the Signing of the APK. I ran a couple of tests because Crosswalk ends up adding about 20MB to every APK, that’s just not cool…

    But the good news is follow this Tutorial for everything except adding Crosswalk and you can sign your APK with just Ionic.

  4. Thanks for the tip! What about zipalign? si it already done? looking to the sequence it’s not, am I wrong?

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s