butelo/crosswalkview.md

## crosswalkview.md

      
    Raw
  

              crosswalkview.md
            
          
    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