/ Android

Android AR app with Wikitude SDK

AR

"Augmented reality (AR) is a live direct or indirect view of a physical, real-world environment whose elements are augmented (or supplemented) by computer-generated sensory input such as sound, video, graphics or GPS data. " from wikipedia.

Wikitude SDK

Wikitude is AR solution SDK which provide image recognition,tracking, location based AR application & much more regarding AR application development. Wikitude SDK is free trail & Pro version available. Wikitude.

Getting Started Wikitude SDK with android

Wikitude provide two android SDK solution one is Java Script & another is NATIVE API -
comparison

start with Java Sctipt SDK

  • Download Java Script SDK from Wikitude
  • Create Android application using Android Studio, uses-permission & uses-feature in AndroidManifest.xml

AndroidManifest.xml

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_GPS" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
    <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />

    <uses-feature
        android:name="android.hardware.camera"
        android:required="true" />
    <uses-feature
        android:name="android.hardware.location"
        android:required="true" />
    <uses-feature
        android:name="android.hardware.sensor.accelerometer"
        android:required="true" />
    <uses-feature
        android:name="android.hardware.sensor.compass"
        android:required="true" />
    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />
  • Add wikitude sdk in andriod application
    Screen-Shot-2016-04-14-at-8-38-49-PM

  • Android studio create activity with default layout, in that layout add wikitude component

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".Hellowikitude"
    tools:showIn="@layout/hellowikitude">

    <com.wikitude.architect.ArchitectView
        android:id="@+id/architectView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>
  • Now in Main activity initialize
com.wikitude.architect.ArchitectView 
private ArchitectView architectView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.hellowikitude);

		Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
		setSupportActionBar(toolbar);

		this.architectView = (ArchitectView)this.findViewById(R.id.architectView); 
if(ActivityCompat.checkSelfPermission(HelloWikitude.this,Manifest.permission.CAMERA)!= PackageManager.PERMISSION_GRANTED){

if(ActivityCompat.shouldShowRequestPermissionRationale(HelloWikitude.this,Manifest.permission.CAMERA)) {
				Log.i(TAG,"Displaying camera permission rationale to provide additional context.");
				Snackbar.make(architectView, "Camera permission is needed to show the camera preview.",
						Snackbar.LENGTH_INDEFINITE)
						.setAction("OK", new View.OnClickListener() {
							@Override
							public void onClick(View view) {
								ActivityCompat.requestPermissions(HelloWikitude.this,
										new String[]{Manifest.permission.CAMERA,Manifest.permission.BLUETOOTH},
										0);
							}
						})
						.show();
			} else {
				ActivityCompat.requestPermissions(this,
						new String[]{Manifest.permission.CAMERA},
						0);
			}
		}else{
			loadArchitectView();
		}
  • Now Override onRequestPermissionsResult() in main Activity.
@Override
public void onRequestPermissionsResult(int requestCode, String permissions[], int[] grantResults) {
switch (requestCode) {
	case 0: {
	// If request is cancelled, the result arrays are empty.
	if (grantResults.length > 0 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
					loadArchitectView();
} else {
// permission denied, boo! Disable the functionality that depends on this permission.
}
return;
}
}
}
  • After user provide access camera Wikitude configuration come in the picture
private void loadArchitectView() {

final StartupConfiguration startupConfiguration = new StartupConfiguration(getApplicationContext().getString(R.string.wikitude_trial_licence_key));
	this.architectView.onCreate(startupConfiguration);
	this.architectView.onPostCreate();
	try {
	    this.architectView.load("index.html");
        }catch (IOException e){
	}
	this.architectView.callJavascript("loadLogin()");
	this.architectView.callJavascript("loadWelcome()");
	}

How html & java script load with wikitude & andriod.

  • Create asset folder in android studio project

Screen-Shot-2016-04-14-at-10-24-59-PM

try {
	    this.architectView.load("index.html");
        }catch (IOException e){
	}
  • architectView.load() will load file from application's assets folder and architectView.load("path/index.html") the index html-file in path, relative to the assets root directory, no need to use absolute assets-directory.

Invoke java script function

this.architectView.callJavascript("loadLogin()");
this.architectView.callJavascript("loadWelcome()");
  • architectView.callJavascript() will invoke java script function