Mobile Android SDK

Perquisites

Hardware & Software Requirements

Android Studio – The Android development environment.
CrossWalk installed in Android Studio – see installation details below.
An Android application.
An Android device with OS version 4.4.2 and above.

Installing CrossWalk

Inside the “build.gradle” add the following to “dependencies” section:

Compile fileTree(dir: 'libs', include: ['*.jar'])
Compile 'com.android.support:appcompat-v7:22.2.1'
Compile 'org.xwalk:xwalk_core_library:14.43.343.24'

Inside the “build.gradle” add the following to “repositories”:

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

Click on ‘Sync Now’.·
Add cross-walk to the ‘activity_main.xml’:

<org.xwalk.core.XWalkView        android:id="@+id/xwalkWebView"        android:orientation="vertical"        android:layout_width="1dp"        android:layout_height="1dp"        android:background="#000000"        />

Initializing CrossWalk & Event Handling

Loading the VeriShow page (from MainActivity.java) creates a new visit the Visitors list in the VeriShow backend, from where the agent can take call:

XWalkView xWalkWebView=(XWalkView)findViewById(R.id.xwalkWebView);

String url="http://platform.verishow.com/files/native_app.html?ts="+new Date().getTime();

url+="&aid="+<YOUR_ACCOUNT_ID>; 
xWalkWebView.load(url, null);

Create sub class inside MainActivity.java that will handle the various events during a session (e.g. session started, session closed):

class JavaScriptInteractions{
@JavascriptInterface
public String verishowStarted(){
Message msg= Message.obtain();
arg1=1;
mHandler.sendMessage(msg); return ""; 
} 
@JavascriptInterface public void verishowClosed(){
 Message msg= Message.obtain(); 
 arg1=2; 
 mHandler.sendMessage(msg);
 } 
} 
@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() {
 xWalkWebView.onDestroy(); 
if (xWalkWebView != null) {
 xWalkWebView.onDestroy(); 
} 
} 
@Override public boolean onCreateOptionsMenu(Menu menu) { 
// Inflate the menu; this adds items to the action bar if it is present. 
getMenuInflater().inflate(R.menu.menu_main, menu); 
return true; 
} 
@Override public boolean onOptionsItemSelected(MenuItem item) {
 // Handle action bar item clicks here. The action bar will 
// automatically handle clicks on the Home/Up button, so long 
// as you specify a parent activity in AndroidManifest.xml. 
int id = item.getItemId(); //noinspection SimplifiableIfStatement 
if (id == R.id.action_settings) { 
return true; 
} 
return super.onOptionsItemSelected(item); 
} 
public XWalkView getxWalkWebView() { 
return xWalkWebView; 
} 
public void setxWalkWebView(XWalkView xWalkWebView) {
 xWalkWebView = xWalkWebView; 
} 
public Display getCurrentDisplay() {
 return currentDisplay; 
} 
public void setCurrentDisplay(Display currentDisplay) {
 currentDisplay = currentDisplay; 
} 
}

Add a subclass as a JavaScript Interface for CrossWalk:

addJavascriptInterface(new JavaScriptInteractions(), "NativeInterface");

Create a Handler that will receive UI notifications events (for example: when chat starts it will resize the hidden CrossWalk component to full size):

mHandler= new Handler(){
@Override
public void handleMessage(Message msg) {
// on live help image click message
if(msg.arg1==1){
DisplayMetrics displaymetrics = new DisplayMetrics();
getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
LayoutParams params=xWalkWebView.getLayoutParams();
params.height=height;
params.width=width;
xWalkWebView.setLayoutParams(params);
}

// On close message
else{
DisplayMetrics displaymetrics = new DisplayMetrics();
getMetrics(displaymetrics);
int height = 1;
int width = 1;
LayoutParams params=xWalkWebView.getLayoutParams();
params.height=height;
params.width=width;
xWalkWebView.setLayoutParams(params);
xWalkWebView.load(url, null);
setVisibility(View.VISIBLE);
}}};

Making a call

The following code will create a call. Once the call starts it will send an event to display the whole xWalkWebView.

evaluateJavascript("performClick()", null);
DisplayMetrics displaymetrics = new DisplayMetrics();
getMetrics(displaymetrics);
int height = displaymetrics.heightPixels;
int width = displaymetrics.widthPixels;
LayoutParams params=xWalkWebView.getLayoutParams();
params.height=height;
params.width = width;
xWalkWebView.setLayoutParams(params);
xWalkWebView.setVisibility(View.INVISIBLE);

Application Permissions

VeriShow for Android requires the following permission in the application manifest:

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.VIBRATE"/>

Example Application

The example application holds an image button (the ‘Talk to Us’ button) that starts the chat. By default the sample application calls the VeriShow’s sales account.

To receive a sample application, please contact us.

Android SDK