September 2016 – diego.org

This post is an updated version of the original one: https://diego.org/2015/01/07/embedding-crosswalk-in-android-studio/

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 20.50.533.12, which is found here:
https://download.01.org/crosswalk/releases/crosswalk/android/maven2/org/xwalk/xwalk_core_library/20.50.533.12/

Open the file:
CrosswalkDemo/app/build.gradle

First we need to add the Maven repository like this:


repositories {
    maven {
        url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'
    }
}

Then add this to your dependencies:


compile 'org.xwalk:xwalk_core_library:20.50.533.12'

The finished file should look like:


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 {
        url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.0'
    compile 'org.xwalk:xwalk_core_library:20.50.533.12
}

Update the Code

Add an XWalkView to your layout like:

<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:


xWalkWebView=(XWalkView)findViewById(R.id.xwalkWebView);
xWalkWebView.load("https://crosswalk-project.org", null);

And add these permissions to your AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

That’s pretty much it.

The entire activity looks like:


package org.diego.android.crosswalkdemo;

import android.os.Bundle;

import org.xwalk.core.XWalkActivity;
import org.xwalk.core.XWalkPreferences;
import org.xwalk.core.XWalkView;


public class MainActivity extends XWalkActivity {
    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 onXWalkReady() {
        // Do anything with embedding API
        xWalkWebView.load("https://crosswalk-project.org", null);
    }

}

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

Exclude x86 libraries

If you want to exclude x86 libraries for a smaller APK, then uncomment this code in build.gradle. This will only build armeabi-v7a libraries.


// Remove other libraries
ndk {
    abiFilters "armeabi-v7a"
}

64 Bit Build

Crosswalk creates the binaries for ARM 64 here: https://download.01.org/crosswalk/releases/crosswalk/android/maven2/org/xwalk/xwalk_core_library/20.50.533.12

To use one of these instead, first you need to download it:


curl -O https://download.01.org/crosswalk/releases/crosswalk/android/maven2/org/xwalk/xwalk_core_library/20.50.533.12/xwalk_core_library-20.50.533.12-arm64.aar

Then install it to your local maven repository:


mvn install:install-file -DgroupId=org.xwalk -DartifactId=xwalk_core_library \
      -Dversion=20.50.533.12-arm64 -Dpackaging=aar  \
      -Dfile=xwalk_core_library-20.50.533.12-arm64.aar \
      -DgeneratePom=true

Update your build.gradle to use your local maven repository:


repositories {
    mavenLocal()
}

Then you can reference it in your build.gradle:


compile 'org.xwalk:xwalk_core_library:20.50.533.12-arm64'

Comments closed

Month: September 2016

Embedding Crosswalk in Android Studio – UPDATED

Create a new Android Project

Configure Crosswalk

Update the Code

Exclude x86 libraries

64 Bit Build