this post developing an Android app based on webview, using HTML5 and JavaScript.
and make a call an Android method, like makeToast() from JavaScript.

project: JavascriptCallAndroid
File: asset\callbackAndroid.html

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		WebView t_webView1=(WebView) findViewById(R.id.webView1);

		 WebSettings webSettings = t_webView1.getSettings();
	        webSettings.setSaveFormData(false);
	        webSettings.setJavaScriptEnabled(true);
	        webSettings.setSupportZoom(false);
	    t_webView1.setWebViewClient(new WebViewClient());
		t_webView1.loadUrl("file:///android_asset/callbackAndroid.html");
		t_webView1.getSettings().setJavaScriptEnabled(true);
		t_webView1.addJavascriptInterface(new WebViewJavaScriptInterface(this), "app");

	}

	 public class WebViewJavaScriptInterface{

	        private Context context;

	        /*
	         * Need a reference to the context in order to sent a post message
	         */
	        public WebViewJavaScriptInterface(Context context){
	            this.context = context;
	        }

	        /*
	         * This method can be called from Android. @JavascriptInterface
	         * required after SDK version 17.
	         */
	        @JavascriptInterface
	        public void makeToast(String message, boolean lengthLong){
	            Toast.makeText(context, message, (lengthLong ? Toast.LENGTH_LONG : Toast.LENGTH_SHORT)).show();
	        }
	    }

}

File: asset\callbackAndroid.html


JavaScript View

<script type="text/javascript">// <![CDATA[
        function showToast(){
            var message = document.getElementById("message").value;
            var long = document.getElementById("length").checked;

            /*
                Call the 'makeToast' method in the Java code.
                'app' is specified in MainActivity.java when
                adding the JavaScript interface.
             */
            app.makeToast(message, long);
            return false;
        }

        /*
            Call the 'showToast' method when the form gets
            submitted (by pressing button or return key on keyboard).
         */
        window.onload = function(){
            var form = document.getElementById("form");
            form.onsubmit = showToast;
        }

// ]]></script></pre>
<form id="form">Message: <input id="message" name="message" type="text" />

 Long: <input id="length" name="length" type="checkbox" />

 <input type="submit" value="Make Toast" /></form>
<pre>

Screen Shot 2014-11-12 at 1.38.17 PM

By admin-powenko

Dr. Powen Ko is a teacher and CEO on LoopTek LLC, and like to teaching. if you need to class, please let PowenKo know, he will love to service and sharing. LoopTek web site is www.looptek.com

Leave a Reply