Launching Android Native Application via Html5 Application

If you are looking for to know, how to invoke the Native Android apps from a WebApps, then you are in right place..., Lets take an use-case where you have a beautiful Html/Js/Css based Music store application and want to play the music with native android music-player application.

Well you can ask me why the hell this use-case can occurs when Android WebKit supports the HTML5...., Ya correct i to thought the same but when i tried the Html5 Audio/Video tags in WebKit, it has many limitations in front of MiME type support.... so explored the way to invoke the native music-player from the html5 while playing the content.

So, here i go with the explanation....,

To execute this use-case we need to know three concepts in Android, (Please skip to Sample Application if you already know these concepts )

1) WebView :-

A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

2) AddJavascriptInteface :-
Use this function to bind an Java object to JavaScript so that the methods can be accessed from JavaScript.

3) Intent :-
An Intent provides a facility for performing late runtime binding between the code in different applications. Its most significant use is in the launching of activities, where it can be thought of as the glue between activities.

For detail info please refer URL: WebView Concepts

Sample Application,
The content for your WebView can come from anywhere. The WebView can download content from the web, or it can come from local files stored in your assets directory. The content can even be dynamically generated by your application code. For this example, the HTML comes from a local file called mdemo.html.

Code:

Here is the "mdemo.html" Html File,
which has Clickable Title called Demo Mp3...

onClick of the "Demo Mp3" we are going to call the "JavaObject" Method clickOnJavaObjectMethod() which is bind to the Javascript DOM window object.


Here is the code for .Jave file...
package com.android.mdemo; //Activity
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.webkit.JsResult;
import android.webkit.MimeTypeMap;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MDemoActivity extends Activity {
/** Called when the activity is first created. */
private static final String LOG_TAG = "MDemo";
private WebView mWebView;
private Handler mHandler = new Handler();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Log.i(LOG_TAG, "onCreate ");
mWebView = (WebView) findViewById(R.id.webview); Log.d(LOG_TAG,"WebView Resource id");
//Enable Javascript to run on WebView client

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebChromeClient(new MyWebChromeClient());
//Bind JavaObject to Javascript Interface

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), " JavaObject");
//Load mdemo.html file on WebView

mWebView.loadUrl("file:///android_asset/mdemo.html");
}
public class DemoJavaScriptInterface {
DemoJavaScriptInterface() {
Log.i(LOG_TAG, "DemoJavaScriptInterface ***************************");
}
public void clickOnJavaObjectMethod (){

String url = "file:///android_asset/aa.mp3";
String extension = MimeTypeMap.getFileExtensionFromUrl(url);
String mimeType = MimeTypeMap.getSingleton().getMimeTypeFromExtension(extension);

//Create Intent for View activity

Intent mediaIntent = new Intent(Intent.ACTION_VIEW);
//Load the URL(mp3 file) and Mimetype to Launch the native mediaplayer

mediaIntent.setDataAndType(Uri.parse(url), mimeType);
//Start the required Activity

startActivity(mediaIntent);
}
}
}

Hope this might help you in understanding WebView, Intent & addJavascriptInterface.