Skip to content →

Embedding Crosswalk in Android Studio

Published January 7, 2015 by doug

An updated version of this post can be found at: https://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:


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

Then add this to your dependencies:


compile 'org.xwalk:xwalk_core_library:10.39.235.15'

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:10.39.235.15'
}

Update the Code

Add an XWalkView to your layout like:


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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:


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

That’s pretty much it.

The entire activity looks like:


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);
        xWalkWebView.load("https://crosswalk-project.org", null);

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

Published in Android