Post
Ask Question

Use of Native Code in Android

Introduction

 
In this article, I explain how to use the assets directory from the directory structure. When we want to use native code in our application, we use the assets directory to save a usable file, so here we are using an HTML file as our own browser to be used in our application. You can see that in the following instructions.
 
Step 1
 
As usual, first of all, create a new file using "File" -> "New" -> "Android Application Project" with the name "WebBrowser".
 
newbrowser.jpg
 
Step 2
 
Now create native code in a HTML file of a structure like a browser as in the following. And add this file in assets as shown below.
 
code
  1. <html>  
  2.    <head>  
  3.       <meta name="viewport" content="width=device-width,initial-scale=0.25,user-scalable=yes" />  
  4.       <title>Going Native</title>  
  5.    </head>  
  6.    <body onload="window.linuxmag.Info('App loaded!');">  
  7.       <center>  
  8.          <h3>My Native Browser</h3>  
  9.          <input type="text" id="ib"><br />  
  10.          <button onclick="window.linuxmag.Info(document.getElementById('ib').value);">Log In</button>   
  11.          <button onclick="window.linuxmag.Error(document.getElementById('ib').value);">Reset</button><br />  
  12.          <button onclick="if (window.confirm('End App?')) window.linuxmag.EndApp();">Kill Apps</button><br />  
  13.          <img src="file:///android_asset/Option_icon.jpg">  
  14.       </center>  
  15.    </body>  
  16. </html> 
Image
 
assets structure.jpg
 
Step 3
 
Open the XML file "res/layout/activity_main.xml" and update it with the following code:
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:paddingBottom="@dimen/activity_vertical_margin"  
  6.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  7.     android:paddingRight="@dimen/activity_horizontal_margin"  
  8.     android:paddingTop="@dimen/activity_vertical_margin"  
  9.     tools:context=".MainActivity" >  
  10.  <WebView  
  11.       android:id="@+id/mybrowser"  
  12.       android:layout_width="fill_parent"  
  13.       android:layout_height="fill_parent"  
  14.       android:layout_weight="1"  
  15.   />  
  16. </RelativeLayout> 
Step 4
 
Now open the Java file "MainActivity.java" using "src/com.web.browser/MainActivity.java" and update it as in the following code:
  1. package com.web.browser;  
  2. import android.os.Bundle;  
  3. import android.app.Activity;  
  4. import android.webkit.WebView;  
  5. import android.webkit.WebSettings;  
  6. import android.webkit.WebChromeClient;  
  7. import android.util.Log;  
  8. public class MainActivity extends Activity {  
  9.     /** Called when the activity is first created. */  
  10.     private WebView browser = null;  
  11.       @Override  
  12.     public void onCreate(Bundle savedInstanceState) {  
  13.         super.onCreate(savedInstanceState);  
  14.         setContentView(R.layout.activity_main);  
  15.         browser = (WebView) findViewById(R.id.mybrowser);  
  16.         // get settings so we can config our WebView instance  
  17.         WebSettings settings = browser.getSettings();  
  18.         settings.setJavaScriptEnabled(true);  
  19.         // clear cache  
  20.         browser.clearCache(true);  
  21.         // this is necessary for "alert()" to work  
  22.         browser.setWebChromeClient(new WebChromeClient());  
  23.         MyCoolJSHandler MycoolHandler;  
  24.         browser.addJavascriptInterface(new MyCoolJSHandler(), "linuxmag");  
  25.         // load a page to get things started  
  26.         browser.loadUrl("file:///android_asset/index.html");  
  27.     }  
  28. }  
  29. final class MyCoolJSHandler extends Activity  
  30. {  
  31.       // write to LogCat (Info)  
  32.       public void Info(String str) {  
  33.             Log.i("GoingNative",str);  
  34.       }  
  35.       // write to LogCat (Error)  
  36.       public void Error(String str) {  
  37.             Log.e("GoingNative",str);  
  38.       }  
  39.       // Kill the app  
  40.       public void EndApp() {  
  41.             finish();  
  42.       }  
  43. } 
Step 5
 
Now open the "AndroidManifest.xml" file and update it using the following code:
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     package="com.web.browser"  
  4.     android:versionCode="1"  
  5.     android:versionName="1.0" >  
  6.     <uses-sdk  
  7.         android:minSdkVersion="8"  
  8.         android:targetSdkVersion="17" />  
  9.     <application  
  10.         android:allowBackup="true"  
  11.         android:icon="@drawable/ic_launcher"  
  12.         android:label="@string/app_name"  
  13.         android:theme="@style/AppTheme" >  
  14.         <activity  
  15.             android:name="com.web.browser.MainActivity"  
  16.             android:label="@string/app_name" >  
  17.             <intent-filter>  
  18.                 <action android:name="android.intent.action.MAIN" />  
  19.                 <category android:name="android.intent.category.LAUNCHER" />  
  20.             </intent-filter>  
  21.         </activity>  
  22.     </application>  
  23.     <uses-permission android:name="android.permission.INTERNET" />  
  24. </manifest> 
See output
 
browser.jpg


Similar Articles