Skip to content

Instantly share code, notes, and snippets.

@butelo
Created March 5, 2014 11:35
Show Gist options
  • Star 17 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save butelo/9365587 to your computer and use it in GitHub Desktop.
Save butelo/9365587 to your computer and use it in GitHub Desktop.
How to use CrossWalk runtime within an Android application

So, what is crosswalk and why do I care? Take a look at the website: https://crosswalk-project.org/

CrossWalk is a HTML5 runtime, you can use it to create HTML5 applications with 'native features' You can use CrossWalk to create HTML5-only applications for Android (x86 and arm architectures) and Tizen but you can also use CrossWalk as a View within an android project.

This means you can replace Android WebView with XWalkView and get some extra features like:

-WebGl

-WebRTC

-WebAudio

http://software.intel.com/en-us/html5/articles/crosswalk-application-runtime

How do I embed a CrossWalk WebView, from now on a XWalkView, inside an Android application to have all this goodies on my hybrid application (Android Native with html5 features)

First you have to download the runtime:

https://crosswalk-project.org/#documentation/downloads

Download any of the Android(ARM) versions.

Inside the file is everything you need to start working in an html5 application.

For this test we'll need to import the xwalk-core-library project inside our Eclipse

Create a new Android project with a basic Activity link it with the library and put this code in the Activity:

package com.example.xwalkwithlibrary;
import org.xwalk.core.XWalkView;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.LinearLayout;

public class XWalkEmbedLib extends Activity {
	private LinearLayout commentsLayout;
	private XWalkView xWalkWebView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_xwalk_embed_lib);
		 commentsLayout=(LinearLayout)findViewById(R.id.principal);
		 xWalkWebView = new XWalkView(this.getApplicationContext(), this);
		 xWalkWebView.loadUrl("file:///android_asset/www/index.html");
		 commentsLayout.addView(xWalkWebView);
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.xwalk_embed_lib, menu);
		return true;
	}
}

Put this on your main layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".XWalkMain" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

    <LinearLayout
                android:id="@+id/principal"
        
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textView1"
        android:layout_below="@+id/textView1"
        android:layout_marginLeft="35dp"
        android:layout_marginTop="86dp"
        android:orientation="vertical" >
    </LinearLayout>

</RelativeLayout>
```

finally inside your ```/assets/www``` folder put your html stuff
and that's it






@x011
Copy link

x011 commented Nov 24, 2014

The following code throws an error:
xWalkWebView.loadUrl("file:///android_asset/www/index.html");

@jhleath
Copy link

jhleath commented Dec 20, 2014

Change it xWalkWebView.load("file:///android_asset/www/index.html", null);

@Iliyass
Copy link

Iliyass commented Apr 10, 2015

I have downloaded crosswalk zip file 'crosswalk-webview-11.40.277.7-arm.zip' and extract it, but i dont know how can i import it in my android application, i'm using Intellij IDEA

@abiemann
Copy link

            final String html = "<html><body bgcolor=\"#090998\"><h1>Hello world!</h1></body></html>";
            xWalkWebView.load(null, html);

@pinhassi
Copy link

Please change:
xWalkWebView = new XWalkView(this.getApplicationContext(), this);
To:
xWalkWebView = new XWalkView(this, this);

Using ApplicationContext will cause xWalkWebView to crash when trying to display dialogs (such as number selector)

@QQ1350995917
Copy link

when i import the xwalk-core-library project as a module for the main project my app is Runnable. but once i build the xwalk-core-library project as aar library by maven and import by main project my app is crash. the log says "Please have your activity extend XWalkActivity for shared mode". I find this situation very confused. i want to know WHY.

@Vadimcg
Copy link

Vadimcg commented Mar 1, 2016

Hi, When i try to attach file from sd card crosswalk doesn't show content correct. For excample:

html
head
link href='file:///storage/emulated/0/Download/AnySignJS/bootstrap.min.css' rel='stylesheet'
/head
body
div class='alert alert-danger' role='alert'>Bla bla bla /div
/body
/html

how to solve it?

@pookie13
Copy link

Hey Every one,
Cross Walk is very good i am appreciating your work. but i have an issue with it that i am loading a URL which is RTC URL. and the sound is coming from loud speaker but i want to set this sound at earpiece so can any one helps me in that. i am new in android.

@Mahesh-Saka
Copy link

after cancal filechooser dialog not working second time

@ishantsagar
Copy link

The apk size is so much approx 40 MB, just for a sample XWalkView

@nickjhonatam
Copy link

Hello
I found your publication in google,
I'm looking for a way to create a Hybrid app with webview + crosswalk.

some doubts :

The process you teach is in Studio android?
Is there a zip to download where we can just change the url?

I'm sorry for the silly questions, but I'm an amateur in knowledge.
If you can help me or guide me I would thank you very much !!

my email is nickjhonatam@gmail.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment