How to get Crosswalk working with Android - Step by step guide

[arjunrajjain]

Assuming you have built your android app and you have the android folder waiting for you…here’s what you do next to get Crosswalk working.

Download CrossWalk (ARM + Cordova) and extract the folder

Open Eclipse and import your android project

Unclick the CordovaLib

Import Crosswalk (open from framework)

Ignore the error with Android 5.1

Right click on framework and xwalk_library, go to properties, go to android, change android version from 5.1 to 4.4.2

Right click your app folder,
a) Under Android, remove CordovaLib
b) add xwalk-library, framework
c) Reorder as shown

Build, ant, facebook, xwalk, framework, app (if you have ant and the facebook plugin in your app)

You should get mad errors, so you need to delete the following files
a) xwalk_library/res/layout-land/date_time_picker_dialog.xml
b) xwalk_library/res/layout/date_time_picker_dialog.xml
c) xwalk_library/res/values-21/styles.xml

Now Under Android Manifest in your main app folder
a) Add <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
b) Under the first <activity → change adjustResize to adjustPan
c) remove android:debuggable

Build each folder (in the same order above) - repeat this step at least twice. (fuck eclipse and this build process)

And voila! You should have crosswalk working. Now you can simply export the whole project as an apk file and upload to the play store!

p.s - i might have forgotten a step or two…so lemme know if its not working for you and I’ll do my best to respond. Also I wrote this super quick, so I’m using casual english, I hope that won’t be an issue for most people. Also yeah the build parts are super weird, don’t ask me why they need to be done multiple times…honestly fuck building.

[borges]

Meteor’s next release will ship with Cordova 4.0, which introduced Crosswalk WebView. What I’m doing right now is using Meteor from the devel branch and simply adding cordova-plugin-crosswalk-webview as a cordova package (actually, I’m using @copleykj’s package).
It builds flawlessly if everything is well setten up.

[adamgins]

@arjunrajjain awesome thanks.

@borges it sounds really interesting vs the voodoo that @arjunrajjain has worked out. Any chance you have some steps on how we can apply this to a current Meteor project,please?

[borges]

Well, quick and dirty steps:

1. Clone meteor/meteor on github.
2. Checkout devel branch.
3. Patch these files.
4. Run ./meteor --version once to download precompiled binaries (or, alternatively, run ./scripts/generate-dev-bundle.sh to build it yourself).
5. Install Android SDK: ./meteor install-sdk android.
6. Head to your project directory and update Meteor: /path/to/meteor-devel/meteor update.
7. Add the crosswalk package: /path/to/meteor-devel/meteor add crosswalk.
8. Set path variables to use the recently installed Android SDK:

export ANDROID_HOME=/path/to/meteor-devel/android_bundle/android-sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:$ANDROID_HOME/build-tools/21.0.0

9. Build your app with crosswalk. Eg:

export ROOT_URL=http://192.168.1.12:3000
/path/to/meteor-devel/meteor run android-device --verbose --settings settings.json --mobile-server=http://192.168.1.12:3000

I had to create the patch because some packages had conflicting versions. Moreover, I’ve just tested these steps on a clean project and it worked, let me know if it worked for you too!

EDIT:

Goddamn heavy Crosswalk library!

[arjunrajjain]

@borges - this is awesome! Glad to finally see Meteor embedding Crosswalk into its Android build. Have you seen any issues with plugins like facebookConnect?

[adamgins]

@borges thanks heaps going to have to give this a go soon. Much appreciated.

[adamgins]

update.

@borges thanks again.

I got the following errors on step 6:

=> Errors while upgrading packages:           
                                              
While selecting package versions:
error: No version of fastclick satisfies all constraints: @=1.0.6, @=1.0.3
No version of webapp satisfies all constraints: @=1.2.1, @=1.2.0
No version of autoupdate satisfies all constraints: @=1.2.2, @=1.2.1
No version of coffeescript satisfies all constraints: @=1.0.7, @=1.0.6
No version of ddp satisfies all constraints: @=1.2.0, @=1.1.0
No version of launch-screen satisfies all constraints: @=1.0.3, @=1.0.2
No version of logging satisfies all constraints: @=1.0.8, @=1.0.7
No version of mobile-status-bar satisfies all constraints: @=1.0.4, @=1.0.3
No version of oauth satisfies all constraints: @=1.1.5, @=1.1.4

Just trying to push ahead regardless, not sure of they are critical?

[adamgins]

mmm… getting errors… so I assume could have to do with the above package version issue???

I was getting some errors when trying to deploy to an actual Android device via USB cable. So, I tried to run with run android to get it running on the emulator, I get, the following error:

% Uninstalling a plugin com.meteor.cordova-update
Using (built-in) Android SDK at /Users/adamginsburg/Documents/Development/meteor/android_bundle/android-sdk
% Running synchronously:  /Users/adamginsburg/Documents/Development/meteor/tools/cordova-scripts/cordova.sh [ 'plugin', 'rm', 'com.meteor.cordova-update' ]
% Removing plugin from the tarball plugins lock com.meteor.cordova-update
% Will check for cordova-tarball-plugins.json for tarball-url-based plugins previously installed.
% The tarball plugins lock: { 'com.meteor.cordova-update': 'https://github.com/practicalmeteor/com.meteor.cordova-update/tarball/a7e98f27a26b727288da81dcfd8047eccb5f6036' }
% Will write cordova-tarball-plugins.json     
% Uninstalling a plugin cordova-plugin-file   
Using (built-in) Android SDK at /Users/adamginsburg/Documents/Development/meteor/android_bundle/android-sdk
% Running synchronously:  /Users/adamginsburg/Documents/Development/meteor/tools/cordova-scripts/cordova.sh [ 'plugin', 'rm', 'cordova-plugin-file' ]
% Getting installed plugins for project in /Users/adamginsburg/Documents/Development/buzzy7/.meteor/local/cordova-build
Using (built-in) Android SDK at /Users/adamginsburg/Documents/Development/meteor/android_bundle/android-sdk
% Running synchronously:  /Users/adamginsburg/Documents/Development/meteor/tools/cordova-scripts/cordova.sh [ 'plugin', 'list' ]
% The output of `cordova plugins list`: No plugins added. Use `cordova plugin add <plugin>`.

% Will check for cordova-tarball-plugins.json for tarball-url-based plugins previously installed.
% The tarball plugins lock: {}                
Error while running for mobile platforms: ENOTEMPTY, rmdir '/Users/adamginsburg/Documents/Development/buzzy7/.meteor/local/cordova-build/platforms/ios/CordovaLib/CordovaLib.xcodeproj'
Error: ENOTEMPTY, rmdir '/Users/adamginsburg/Documents/Development/buzzy7/.meteor/local/cordova-build/platforms/ios/CordovaLib/CordovaLib.xcodeproj'
  at Object.Future.wait (/Users/adamginsburg/Documents/Development/meteor/dev_bundle/lib/node_modules/fibers/future.js:398:15)
  at Object.rm_recursive (/Users/adamginsburg/Documents/Development/meteor/tools/files.js:255:9)

Any ideas where I have gone wrong, pls?

[borges]

Yeah, my bad, that’s the path to the Meteor executable.

[borges]

@adamgins Well, the first error about the package versions is the reason I’ve created the first patch, take a look and change it to the right versions; besides, try not to force a specific version in your project.

And to the second set of errors, what I normally do is to rm -rf the build and .meteor/local folders, even if it slows down the compilation time.

[MaximeB]

Thanks A LOT @borges for your patches, it fixed my building problem. You rock.

[borges]

Nice to hear that!
Now I’m trying to maintain a Meteor branch with a updated version since a couple of commits ago (with less modifications) broke my compilation.

[arjunrajjain]

Yeah, I’m looking forward to @martijnwalraven’s work on Cordova Improvements. Hopefully we’ll see them by 1.2. Also looking into rocket:module to better serve assets to mobile.

[MaximeB]

It looks like my apps are constantly crashing using the devel branch and these patches on devices that are < Android 5.0 (< API 22…).
I blamed the hot code push at first, but after disconnecting my app from the mobile server, it crashes whenever I try to store data (with the sqlite plugin).

Are you experiencing the same issue ? Maybe someone found a workarround for APIs < 22 ?

EDIT : Okay, so I updated autoupdate’s dependencies of file and file-transfer plugin to their latest version (2.1.0 and 1.2.1). It seems to be working with API 19 now.

[borges]

That’s what I’ve done too in my patches, @MaximeB. So far, it didn’t break anything.
Another thing that caught me with my pants down is that on some Android devices, sporadically, the app will crash on any undefined-like reactivity error. After that, I’ve been more cautious with that kind of situation.

[poliuk]

Can any of you share your experience using crosswalk? I would like to see the advantages of using it! In which way does it improve the App?

[pmwisdom]

@poliuk It’s much faster. I’ve integrated it with a large mobile app I’m currently writing and the difference is night and day. Scrolling long lists of items is smooth on crosswalk, and clunky on the regular webview, same with any and all css transitions, and any kind of interaction really. If you want to know what crosswalk is like vs the regular chrome webview, launch your application on ios, and android and compare. iOS will be leaps and bounds faster than android. Crosswalk is even better than iOS. (I have a Samsung galaxy s6 edge and compared it to a 4s, to give you an example of how bad it is).

Unfortunately, crosswalk is also huge. But, for the performance, I wouldn’t look anywhere else.

[timw]

Can I still use Meteor’s hot code push feature when using crosswalk?

[woniesong]

I was following your way, but in the end I got Current working directory is not a Cordova-based project error. Do you know about this?

Error: Error running /meteor-devel-path/tools/cordova-scripts/cordova.sh
Current working directory is not a Cordova-based project.

UPDATE:
The latest devel branch has an issue that refers to the above error. I cloned borges’ meteor repo and used that instead. Everything ran correctly. However, in the end it failed to compile with the following error:

You may not have the required environment or OS to build this project

After a quick search I found out this error can happen if you don’t have android-sdk 21.0.0 version. So I checked my path to see if I added the most recent android-sdk correctly.

I did. /meteor-dev/android_bundle/android-sdk/build-tools/21.0.0

Blocked at this point…

[borges]

@poliuk In addition of what @pmwisdom said, crosswalk is great to level the differences between android versions and devices (that’s the nicest iOS “feature”). Withou crosswalk, even the simplest production meteor app won’t work out on a lot of Android devices.

@timw Yeah, absolutely! Nothing changes.