Skip to content

Tutorial for CrossWalk Webview Plugin (Android)

Jump to bottom
Hirbod edited this page Dec 10, 2015 · 23 revisions

###Information since Crosswalk 15+

SINCE 15+ you can add

<preference name="xwalkZOrderOnTop" value="true" />

inside your config.xml. If this works for you, you can skip the specific patch described later.

###0. Requirement skip to 1) if you already have a project

$> npm install cordova -g
(Cordova CLI >= 5.0.0)

###1. Create a project skip to 2) if you already have a project

$> cordova create HelloMap com.example.myapp HelloMap
$> cd HelloMap & cordova platform add android

###2. Add Crosswalk webview plugin

$> cordova plugin add cordova-plugin-crosswalk-webview

Just add following lines to your config.xml (android section)

<preference name="xwalkVersion" value="15+" />

You can refer to https://www.npmjs.com/package/cordova-plugin-crosswalk-webview#configure to configure Crosswalk version, requires Crosswalk 14+

###3. Obtain the Google Maps API key for Android skip to 4) if you already have obtained an API key

  • Find the keytool.
  • OS X and Linux: ~/.android/

*Display the SHA-1 fingerprint

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

img

  • Go to Google APIs Console.
  • Register your project
  • Turn on Google Maps Android API v2
  • Go to API Access page.
  • Click [Create New Android Key] button
  • In the resulting dialog, enter the SHA-1 fingerprint, then a semicolon, then your application's package name.
  • Write down the API Key See [the official document: Get an Android certificate and the Google Maps API key]

img

###4. Install this plugin

npm (current stable 1.3.4)

$> cd HelloMap/
$> cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

or

Github (current master, potentially unstable)

$> cd HelloMap/
$> cordova plugin add https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"

###5. Change the AndroidManifest.xml, MainActivity.java and XWalkWebViewEngine.java

In order to change the background color of the WebView as transparent, you need to modify the application settings by your hand.

Open AndroidManifest.xml, find android:theme="@android:style/Theme.Black.NoTitleBar", then change to android:theme="@android:style/Theme.Translucent.NoTitleBar".

After that, open HelloMap/platforms/android/src/com/example/map/MainActivity.java, then add the following two lines.

  • HelloMap = Name of you App
  • com/example/map = Name of your identifier (in this case com.example.map, you need to change that to your own path)
import org.xwalk.core.XWalkPreferences;  // <!-- Add this line

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        XWalkPreferences.setValue(XWalkPreferences.ANIMATABLE_XWALK_VIEW, false);  // <!-- Add this line
        super.onCreate(savedInstanceState);
        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);
    }
}

And then, open HelloMap/platforms/android/src/org/crosswalk/engine/XWalkWebViewEngine.java, then add the following line.

    private void initWebViewSettings() {
        webView.setVerticalScrollBarEnabled(false);
        webView.setZOrderOnTop(true);  // <!-- Add this line
    }

###6. Change the HelloMap/www/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript">
    var map;
    document.addEventListener("deviceready", function() {
      var div = document.getElementById("map_canvas");

      // Initialize the map view
      map = plugin.google.maps.Map.getMap(div);

      // Wait until the map is ready status.
      map.addEventListener(plugin.google.maps.event.MAP_READY, onMapReady);
    }, false);

    function onMapReady() {
      var button = document.getElementById("button");
      button.addEventListener("click", onBtnClicked, false);
    }

    function onBtnClicked() {
      map.showDialog();
    }
    </script>
  </head>
  <body>
    <h3>PhoneGap-GoogleMaps-Plugin</h3>
    <div style="width:100%;height:400px" id="map_canvas"></div>
    <button id="button">Full Screen</button>
  </body>
</html>

###7. Build and Run For Android, just type these commands:

$> cd HelloMap/
$> cordova build android

###8. Troubleshooting

Thus it is not related to this plugin, there is currently a bug with Crosswalk 14+. If you get something like

platforms/android/src/org/crosswalk/engine/XWalkCordovaCookieManager.java:22: error: cannot find symbol
import org.xwalk.core.internal.XWalkCookieManager;

open platforms/android/src/org/crosswalk/XWalkCordovaCookieManager.java and change

import org.xwalk.core.internal.XWalkCookieManager;

to

import org.xwalk.core.XWalkCookieManager;

This will fix the error message on compile.

If you have problems with the "Fullscreen" Button staying on top of the map, follow this one: https://crosswalk-project.org/jira/browse/XWALK-5869

If you get an error, feel free to ask me on the official community or the issue list.

New version 2.0-beta2 is available.

The cordova-googlemaps-plugin v2.0 has more faster, more features.

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/tree/master/v2.0.0/README.md

Join the official community

New versions will be announced through the official community. Stay tune!

Do you have a question or feature request?

Feel free to ask me on the issues tracker.

Or on the official community is also welcome!

New version 2.0-beta2 is available.

The cordova-googlemaps-plugin v2.0 has more faster, more features.

https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/tree/master/v2.0.0/README.md

Clone this wiki locally