Use Crosswalk With Ionic Framework Android Apps

It is no secret, that many Android devices handle web pages poorly.  Unless you have Android 4.4, your device is using whatever proprietary browser your manufacturer has decided to give you.  The lucky ones who are running Android 4.4 tend to have higher end Nexus or Motorola devices.

This isn’t the end of the road for your hybrid development journeys.  Using Crosswalk in your application replaces the default web runtime with the runtime 4.4 users are already enjoying.  The best part is that this will work with Apache Cordova, Phonegap, and Ionic Framework.  For the sake of this article I’m going to aim it towards Cordova and Ionic Framework, but Phonegap should be pretty similar.

There are some things you need to note before going into this tutorial:

  1. As of writing this article, Crosswalk does not work with Apache Cordova higher than 3.5.  We are on 3.6.3 as of right now.  This won’t stop us from using Crosswalk though.
  2. The Crosswalk installation process is not automated.  It isn’t a long or difficult process, but it is still something that must be done manually.
  3. Your final APK file will be large.  Around 40MB large.

If you are alright with all of the above, then continue these steps for creating an Ionic Framework Android app with maximum performance.

Let’s go ahead and start by downloading the stable Cordova Crosswalk packages.  If you plan on supporting both x86 and ARM architectures, then download both.  If you choose only one, you’ll get a smaller APK binary, but your app will not work with every device out there.

Now we can create our blank Ionic Framework project with Android support:

You’ll notice that the platform I’m adding is [email protected] because like I said earlier, the current Crosswalk build doesn’t work with the latest Apache Cordova.  I’m sure this will be resolved in the future, but for now we need to stick with 3.5.

Navigate to IonicProject/platforms/android/CordovaLib and wipe out all files and directories in there.  We are going to replace the content of CordovaLib with all the Crosswalk files.

Extract both the x86 and ARM Crosswalk archives and do the following:

If you prefer not to copy with the command prompt, just copy all files in the framework directory to your CordovaLib directory.  Note, that we only did this for the x86 architecture directory.

If we plan to add both architectures, we only need to add one directory from the second architecture.  Run the following from the command prompt or do it manually:

We are just copying the armeabi-v7a directory to sit side-by-side with the x86 directory.

There is one more file we need to copy for everything to work.  You need to copy one of the VERSION files from the Cordova Crosswalk root directory into your IonicProject/platforms/android directory.

Once this is done, using your terminal, navigate to IonicProject/platforms/android/CordovaLib/ and run the following commands:

Now for the home stretch, we are almost done.

Your project needs to sport two permissions in order to use Crosswalk.  There is a good probability that your application is already using them, but if it isn’t, add the following two lines to your AndroidManifest.xml file found in your IonicProject/platforms/android directory:

Navigate to the root of your Ionic project and run a standard Android build command:

If everything went as it should, you should find a ~40MB IonicProject-debug.apk file in your build directory.  It will use Chromium as the web view, something not found before Android 4.4.  Most, if not all of your performance issues should be eliminated with Crosswalk.

A video version of this article can be seen below.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Ludek

    Hey Nic,

    great article and exactly what I need right now because I’m having problems with some Ionic controls on older Android devices. So this will be great help to me. I’m pretty new to Cordova/Ionic though so I have a noob question:

    How would I go about adding Crosswalk to an existing Ionic project that already uses Cordova 3.6? Should I just remove Android platform from my project and add it again using @3.5 version? Can I use 3.6 for iOS and 3.5 for Android? Should I?

    Thanks in advance for your answer.

    • Hi Ludek,

      This announcement was made by Apache Cordova recently:

      http://cordova.apache.org/announcements/2014/08/04/android-351.html

      Because of this, Google will not approve Android applications that make use of 3.5.0 and below. Although I have not tried Crosswalk with 3.5.1, I believe it should work. At the time of writing this comment, 3.6 may even work since we are now officially on 4.0. It is worth a try.

      You don’t have to worry about iOS since Crosswalk is only for Android. You can be free to use the latest iOS platform without trouble.

      Let me know if you have further questions 🙂

  • Nimrod

    Hi Nic,

    Thanks for this article it was really insightful and helpful for me.

    The only point that wasn’t clear to me were the commands to “Update Crosswalk Library Project”, can u share the link to the CLI android command manual? I don’t know where to find that 🙂

    One last point which u may find useful, Google Play accept multiple APK’s option for a single app, so u can build a smaller version for each architecture (x86 or ARM) and upload them to the store, each customer will get the apropriate version.
    Here is a link which explain how to do it http://developer.android.com/google/play/publishing/multiple-apks.html (btw they recommend not to do it for under then 50mb… I guess that’s because it’s more complicated then uploading one file..)

    Cheers!

    • Hi Nimrod,

      Thank you for adding the information regarding multiple APK files. I had forgotten about that.

      Here is a link to various Android CLI commands:

      http://developer.android.com/tools/projects/projects-cmdline.html

      Regards,

    • Siddharth

      Hey!

      Can you tell me how to built for specific architectures? (One build for X86 and the other for ARM)

      • Hi Siddharth,

        If you want to build for x86, follow the instructions, but exclude the armeabi-v7a directory. If you want to build for ARM, follow the instructions, but exclude the x86 directory.

        Regards,

  • Ludek

    I finally got the courage and migrated my project to Crosswalk. It’s so great now that I can use Ionic even on older devices with Android 4.0. Migrating to Crosswalk using your step-by-step instructions was a breeze. So thank you again for this article, it really helped me a lot!

    • Hi Ludek,

      I’m glad everything worked for you! Make sure to subscribe to my blog with your email so you get notified every time I make a post 🙂

      Regards,

  • YOU ARE AMAZING! I could not make any sense out of either the Crosswalk or Crosswalk-Cordova documentation. Your simple steps have got my app built and running amazingly smoothly.

    Just one typo in your post: it should be cp -a /framework/xwalk_core_library/libs/armeabi-v7a ... in the second cp example. I.e. you’re missing the -a flag.

    • Hi Nolan,

      I’m glad it worked for you! Also, thanks for pointing out the typo 🙂

      Regards,

    • BTW I turned your article into a single bash script. You may want to put a link in your article, for lazy people. 🙂

      https://gist.github.com/nolanlawson/f332ed32202fe3671769

      • Hi Nolan,

        I posted a comment to your GitHub. I like the script that you made, but I had concerns with safety. If you can address those, I would be happy to include it in my article as I think it would be very useful.

        Regards,

      • Great look Nolan. I made a tiny change to the end (for xml formatting sake) but the script works as advertised.

  • Jason

    Just converted an ionic app to crosswalk. On my Andriod 4.2 the app is way slower, more laggy, not as sharp than it’s pre-crosswalk lobotomy days. Anyone else experience this or is it just a device quirk (Samsung note lte)?

    • Ludek

      I’m not sure (as I’m new to Crosswalk as well) but I think it’s a device quirk. My app also runs unusably slow on original Samsung Galaxy Note 1 while running smoothly on similar or even worse hardware from the same era (for example Galaxy S2).

  • chi tran

    i have successful integrate crosswalk follow your tutorial, but it’s make the plugin doesn’t work anymore, like diaglog and many plugin can’t run after the integration

    • Can you link me to the plugin you’re trying to use? Have you tried re-installing the plugin after completing the tutorial?

  • Sky Dev

    Hi,
    Successfully integrate crosswalk 10.39.235.9 with ionic 1.0.0-beta.13 running under cordova 3.6.4. Everything so far so good for me. Plugins are working fine without need to re-installing. I’m using ngCordova for the dialog and device plugin. Thanks again!

    • Awesome! Thanks for sharing this information. I haven’t tried recently to see what versions are supported.

  • Hello sir,

    I’ve followed your steps with an ionic project of mine. It’s now way faster and sharper!

    Only thing: Geolocation now does not seem to work. (navigator.geolocation.getCurrentPosition) I’ve seen examples of people using crosswalk do it with intel.xdk.geolocation.getCurrentPosition.

    They also include right before cordova.js in their index.html file.

    I tought this file is added by crosswalk in the build process, but nope… Any experience with that ?

    Thanks again for your time!

    • To my knowledge Intel XDK is not the same as the Crosswalk project. I think it is an alternative solution.

      What do the error logs say when it fails to work?

      Regards,

  • Addendum about geolocation : Low accuracy works, high accuracy (gps) does not… also, trying high followed rapidly afterwards by low does not work but low alone works. As if i should let the gps process finish completely by adding a little delay… and let the icon disappear, then try again with low accuracy… weird.

  • Figured it out: when used in conjunction with the background mode plugin : https://github.com/katzer/cordova-plugin-background-mode The geolocation does not work when in the background. (altough the log is clear of any error messages and i can see my own console.log messages to tell me that the app is still running as expected) so it’s back to cordova for now. Too bad: crosswalk was way faster and smoother!

    • That’s not fun to hear. Thanks for sharing what you learned. It will help others with the same problems.

      Regards,

  • vmaliko

    Hey,

    Your instructions are very thorough, thanks for putting this together.
    I’ve just converted my app exactly like you did.

    The app builds fine, and was successfully installed on my device. However I get a white screen.
    No errors in the console log, and all the DOM elements were loaded. I can even tap on the white screen and I can see (using chrome dev tool) all the changes that are supposed to happen after taping on certain parts of the app. Have you ever come across an issue like that ?

    Thanks

    • You mention Chrome Developer Tools. You’re not trying to test this in the browser are you? This is for devices and simulators only.

      What version of Cordova are you using? Are you using any plugins?

      Have you tried ADB for viewing your logs? If there is a problem it will show up there.

      Regards,

      • vmaliko

        – Nope testing on the actual device and debuging via the chrome dev tools (More tools > inspect devices), you can view the front end source code loaded in the webview.
        – Using cordova 4.0.0, but I’ve recreated the project on 3.5.1
        – Used xwalk version 9 not 8
        – Plenty of plugins in the projects, I’ll try the logs in adb I haven’t tried yet will let you know how it goes

        • I’m personally not familiar with debugging on device via chrome dev tools. ADB has never let me down when tracking a bug.

          Let me know how it goes.

          Regards,

          • vmaliko

            Hey,

            thought I’d share some of the things I’ve found. I got it to work after removing the plugin plugin.google.maps (https://github.com/wf9a5m75/phonegap-googlemaps-plugin). There’s litterally no errors in the console, or the logs but after removing the plugin the content of the app was displayed. I’m confused as to why it wouldn’t display (though the whole dom was loaded) with the plugin. After searching a bit I came accross this : https://github.com/wf9a5m75/phonegap-googlemaps-plugin/issues/302

            When the plugin was in the project I was actually able to use the reverse geocoding functionality and get the expected results but nothing (the whole dom of the index.html page was there) displayed on the screen (I got a white screen).

            Cheers

          • Thanks for reporting back!

            I’m not familiar with the Google Maps PhoneGap plugin. Why not use the JavaScript API and Geolocation plugin like demonstrated here:

            https://www.thepolyglotdeveloper.com/2014/10/implement-google-maps-using-ionicframework/

            Regards,

          • vmaliko

            Hey thanks for the suggestion I’ve actually started switching to the js library since I’m not using the map itself it should be fine. Let see how this goes 🙂

            Thanks again.

          • No problem. Report back how it goes 🙂

          • vmaliko

            It all went well 🙂

            I was skeptical about crosswalk improving my app since I was already on 5.0 lolipop and some stuff (mostly the scroll on an infinite list or transitions) were slow / choppy and didn’t feel native enough. Now that I’ve added xwalk I can confirm that it improves greatly the scroll (went from 40FPS to 55FPS which is not negligeable) and some transitions.

          • Thanks for reporting back. I’m glad everything worked out for you 🙂

  • Much respect to you Nic… I was having all sorts of compatibility issues with Web Audio on various Android devices. Saw this post, decided to bite the bullet and implement Crosswalk on my Ionic Android project… and… BINGO – it now works perfectly on several devices I’ve tested. A big thank you to you for this step by step guide, and if you are ever in this part of Australia, I will buy you a beer or three…

    • Sweet! Thanks for the compliments 🙂

  • Earl

    Great article! it helped me a lot.
    I have ionic 1.3.3 and i have installed the stable version of crosswalk 10.39.235.15.
    In the Update in this article it is written that we don’t need to set an environment variable in order to get two apks. But running ionic build android i still get one apk. I am seeing that a lot of users are having my same problem.
    Do you know why? 🙂

    • This tutorial demonstrates the manual process, so you’d have to place the arm7 version, build, and then replace with the x86 version and build. Adding both at the same time will always get you a combined APK.

      I do have an automated tutorial queued up to demonstrate the new Ionic CLI and how it can be used in combination with Crosswalk. It is scheduled to post in a few days, so keep an eye out if you’re still interested.

      Regards,

  • hi nic. why do i need to add target android-19? If I want to support phones with gingerbread, do i need to put android-8 as target instead? thanks.

  • Arnold

    Hi everyone,

    Hi Nic
    I am new to Ionic framework and i just build a small awesome app. There is one thing i notice about the sizes of apps. When i create a new blank project and i build, the app size is 3.3 MB. As I add plugins it increases.
    But i found a showcase app build with ionic framework (ng-europe by patcito on Google play) the is only 1.4MB. How can I reduce the size of the app.
    My app uses a prefille-SQLite DB, check internet access and social sharing is enable. it uses those three plugins and it is up to 3.5MB.

    Thanks

    • Plugins and asset files add bulk to your project. How many MB is your SQLite database? I am betting each of the plugins you installed is about 1MB each. Do you have any images or other media? Are they optimized for mobile (compressed / sized correctly)?

      All factors that contribute to your final application size.

      You can optimize your app code by following this tutorial:

      http://ionicframework.com/blog/minifying-your-source-code/

      I don’t know anything about Patcito, but maybe they stripped out Ionic libraries that they don’t use?

      Regards,

  • Hi NIc, thanks for this tutorial we’ve been looking for a way to build both for x86 and arm using Crosswalk and this seems like a good solution!

    However, when using cordova 4.2.0 (latest) we get the error “cannot find symbol public class Hello extends CordovaActivity”, and some similar errors. Added android using @3.5, like you did.

    Do you have any clue what might be wrong in our setup? Any help would be greatly appreciated. Many thanks!

    • I’m assuming when you say 4.2.0 you mean the Cordova CLI? The CLI is unrelated to the Android-Cordova which has its own versioning.

      When exactly does this error happen? During the build or during the execution of the app?

      Regards,

      • Never mind, I found the bug bandit! Apparently my choice of folder name “bin”, was not hip enough for Cordova https://issues.apache.org/jira/browse/CB-7198

        That’s my afternoon spent reinstalling everything from node to Cordova lol

        Anyway, thanks again for the guide! 🙂

        • Well that sounds pretty terrible. I’m glad you got it working though 🙂

  • Mohammed Medman

    thanks !

  • Crosswalk Lite

    Hi Nic! Thanks for this tutorial. But is there a way to build to different apks for arm and x86 cpu devices? I want to use the lite version of crosswalk since I do not use much of its features. I just want my app viewed properly on other devices with lower version of Android. Though, in the latest version of Ionic CLI when I add crosswalk it will automatically build 2 different apks. But that is not my case since I am following your tutorial (the manual way) using the lite version of Crosswalk.

    BTW, here’s the link of the lite version : https://download.01.org/crosswalk/releases/crosswalk-lite/android/canary/10.39.233.1/

    • I don’t know anything about Crosswalk Lite, but in my tutorial I explain that in order to build for a specific architecture you just include only that architecture in your project.

      The Ionic CLI has a lot of script logic to automate it’s process. You would need to make your own script if you want the same from my manual process.

      Regards,

      • Crosswalk Lite

        So in order to have apks on different architecture do I need to create an another copy of the project (for a particular architecture)? or is it ok to add more than one android platform for a single project?

        • Copying the project is one way you could do it.

          • Crosswalk Lite

            Ok. Thank you Nic!

          • Nurhadi

            Hi Crosswalk Lite, I am interested with crosswalk lite, can you tell me how to integrate crosswalk lite with the ionic, do you have some sample/ tutorial? I have tried but no success.

  • DaniloOliveira28

    Nic, just to you know, I repeated the process with cordova 3.6.3 and Crosswalk 10.39.235.15 ant it worked perfect on the simulator. The build generated a apk with 43mb. However I need to test on a device to make sure that is working ok.

    • Thanks for sharing

      • DaniloOliveira28

        Nic, I am testing in some devices 4.0 and 4.1 and despite the apk has 43mb it is looking that the crosswalk is not set in these devices because the interface is messy. How can I debug to check if the crosswalk is set?

        ty

  • Edax Ucles

    Nic are a ninja!! thanks, i have a question, can i use the current version of crosswalk that be in the website? crosswalk-webview-10.39.235.15 and i have to use x86 and arm? or just i can download arm ?

    • I haven’t tried recent releases, but you should be fine.

      If you only download ARM then your app will only work for ARM devices. What percentages use ARM vs x86 or visa versa I don’t know. Might want to do some research if you only want to support one architecture.

      Regards,

  • Gaurav Sarma

    Everything works fine until i build using ionic build android . I have attached a screenshot of the errors its a gradle related error since i have android studio. Can you please help me solve it. The situation is i am trying to migrate an already build ionic app to crosstalk+cordova

  • 文壮 刘

    Hi, Nic, thanks for your post, but I have a question about Chromium WebView. When I test my app on older mobiles which has older system than Android 4.4, I found it perform more smooth than mobiles which has newer system than Android 4.4.

    • Yea not all devices are treated equal. Just because a device is running 4.4+, doesn’t mean it will run your application nicely. It is one of the flaws of working with Apache Cordova and the web view.

      • 文壮 刘

        Thanks for replying, so ionic app could be affected by many other issues. I always think just webview done, how foolish.

        • In most scenarios you should be fine though. If you’re truly concerned, you may want to seek a different cross platform technology like Xamarin or NativeScript. Those two don’t use the web view.

          • 文壮 刘

            Thank you very much, pretty guy.

    • Sampath Sam

      Now i am doing my MASTER OF COMPUTER APPLICATIONS. now i have to complete my project but i have nothing to do. so please please …… kindly and generously send me some ionic templates with firebase, and my topic is “Book My Doc Mobile App” …

      [email protected]

  • Eyog Yvon

    Nic Raboy, the knight in shiny sliver armor of Hybrid Mobile development. A hero for the noob that I am. Arigato gozaimasu.

  • very goods!

  • Nitish

    Hi nic
    I follow each and every step but it gives me error when i run ant debug
    /opt/labs/test/platforms/android/CordovaLib/build.xml:23: /opt/labs/test/platforms/android/VERSION doesn’t exist