Embedding Crosswalk in Android Studio
An updated version of this post can be found at: http://diego.org/2016/09/20/embedding-crosswalk-in-android-studio-updated/
Note: The Crosswalk team has stopped development on this project. You can read more about it here: Crosswalk 23 to be the last Crosswalk release
Crosswalk is a web runtime that replaces the built in WebView used by Android. Crosswalk is based on Google Chromium. Why use Crosswalk and not the built in WebView? The built in WebView varies greatly with each Android OS version. I’ve run into many problems because of the differences between the two. When you use Crosswalk you can work with a consistent WebView across all Android OS versions. Besides that, it has better HTML5 support. Read this article for more reasons “Why use Crosswalk for Android Builds?”
The instructions for embedding Crosswalk in your application are based on ADT and they are complicated. Adding Crosswalk to Android Studio is much easier if you use the maven2 releases.
Here are steps for creating a new Android application in Android Studio and embedding Crosswalk.
Create a new Android Project
From the menu choose “File > New Project”
Give your application a name “CrosswalkDemo”
Give it a domain and project location and press “Next”.
Select “Phone and Tablet”, Minimum SDK “API 19” and press “Next”.
Select “Blank Activity” and press “Next”.
Use the defaults for the Activity name and press “Finish”.
Configure Crosswalk
Identify which Crosswalk release you want to install. You can find the releases here:
https://download.01.org/crosswalk/releases/crosswalk/android/maven2/
For this demo I choose version 10.39.235.15, which is found here:
https://download.01.org/crosswalk/releases/crosswalk/android/maven2/org/xwalk/xwalk_core_library/10.39.235.15/
Open the file:
CrosswalkDemo/app/build.gradle
First we need to add the Maven repository like this:
1 2 3 4 5 |
Then add this to your dependencies:
1 | compile 'org.xwalk:xwalk_core_library:10.39.235.15' |
The finished file should look like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | apply plugin: 'com.android.application' android { compileSdkVersion 21 buildToolsVersion "20.0.0" defaultConfig { applicationId "org.diego.android.crosswalkdemo" minSdkVersion 19 targetSdkVersion 21 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } repositories { maven { } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:21.0.0' compile 'org.xwalk:xwalk_core_library:10.39.235.15' } |
Update the Code
Add an XWalkView to your layout like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | android:orientation = "vertical" android:layout_width = "fill_parent" android:layout_height = "fill_parent" android:background = "#000000" > < org.xwalk.core.XWalkView android:id = "@+id/xwalkWebView" android:orientation = "vertical" android:layout_width = "fill_parent" android:layout_height = "fill_parent" android:background = "#000000" /> </ LinearLayout > |
In your activity, find the XWalkView and then load a url like:
1 2 | xWalkWebView=(XWalkView)findViewById(R.id.xwalkWebView); |
That’s pretty much it.
The entire activity looks like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | package org.diego.android.crosswalkdemo; import android.support.v7.app.ActionBarActivity; import android.os.Bundle; import org.xwalk.core.XWalkPreferences; import org.xwalk.core.XWalkView; public class MainActivity extends ActionBarActivity { private XWalkView xWalkWebView; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); xWalkWebView=(XWalkView)findViewById(R.id.xwalkWebView); // turn on debugging XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true ); } @Override protected void onPause() { super .onPause(); if (xWalkWebView != null ) { xWalkWebView.pauseTimers(); xWalkWebView.onHide(); } } @Override protected void onResume() { super .onResume(); if (xWalkWebView != null ) { xWalkWebView.resumeTimers(); xWalkWebView.onShow(); } } @Override protected void onDestroy() { super .onDestroy(); if (xWalkWebView != null ) { xWalkWebView.onDestroy(); } } } |
You can download a sample project here:
https://github.com/dougdiego/CrosswalkDemo
More details about the AAR Crosswalk release can be found here:
https://crosswalk-project.org/documentation/embedding_crosswalk/crosswalk_aar.html