[Android] Membuat aplikasi Android dengan HTML 5, CSS, dan JS tanpa PhoneGap

6/26/2013 Dida Nurwanda

Sebenarnya membuat aplikasi Android dengan HTML 5, CSS, dan JS bisa menggunakan framework yang bernama PhoneGap, tetapi untuk kali ini saya tidak akan menjelaskan cara menggunakan PhoneGap melainkan menggunakan Native Android.

Pertama Anda buat project, disini saya menamakannya dengan AndroidHtml. kemudian buka file AndroidManifest.xml dan tambahkan

<uses-permission android:name="android.permission.INTERNET" />

Script lengkapnya seperti berikut

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.didanurwanda.androidhtml"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="16" />
       <uses-permission android:name="android.permission.INTERNET" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="com.didanurwanda.androidhtml.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

untuk layoutnya, disini saya pakai nama main.xml

<?xml version="1.0" encoding="utf-8"?>
<WebView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>

Kemudian untuk MainActivity.java

package com.didanurwanda.androidhtml;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

    WebView webview;
    WebSettings websettings;
    
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);
        
        webview=(WebView)findViewById(R.id.webview);
        websettings=webview.getSettings();
        websettings.setJavaScriptEnabled(true);
        webview.setWebViewClient(new WebViewClient());
        webview.loadUrl("file:///android_asset/www/index.html");
        
    }    
}

Setelah itu buat folder pada direktori assets dengan nama www dan tambahkan file index.html pada folder tersebut, direktori lengkapnya assets/www/index.html. File index.html ini merupakan file yang akan di tampilkan oleh aplikasi, anda dapat menambahkan CSS, JS ataupun file HTML lain pada folder ini.

Untuk contoh, pada index.html berisi sebagai berikut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Android HTML</title>
</head>
<body>
    <h1>Hello World</h1>
    <p>didanurwanda.blogspot.com</p>
</body>
</html>

Berikut adalah penampakannya