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