Rabu, 26 Juni 2013

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

Download
 Password: didanurwanda.blogspot.com

12 komentar:

  1. thankyou om, membantu banget programnya

    BalasHapus
  2. compile jadi apknya gimana om?

    BalasHapus
    Balasan
    1. tinggal di export aja bro.

      Hapus
    2. cara mengk export nya gimana mas bro

      Hapus
    3. kalo di eclipse klik file -> export

      Hapus
  3. Lanjutin nambahin form submitnya dong, penasaran gimana handlingnya...

    BalasHapus
  4. Mas, bisa kirimi tutorial lengkap dan contoh programnya, untuk bahas TA ke himura.slara@gmail.com
    terima asih

    BalasHapus
  5. Mas, bisa kirimi tutorial lengkap dan contoh programnya, untuk bahas TA ke himura.slara@gmail.com
    terima asih

    BalasHapus
  6. mau tanya. aplikasi detik.com itu aplikasi native, hybrid atau webview?

    BalasHapus

Mohon tidak mencantumkan URL pada komentar yang bersifat promosi.