Minggu, 20 Januari 2013

Android Webkit untuk Menampilkan Custom HTML Dinamis dan WebView Tidak Fullscreen

Terus terang penulis baru tahu jika WebView atau WebBrowser milik Pemrograman Android mampu menampilkan HTML secara dinamis, programmatically, on the fly, sangat-sangat mengagumkan :) Jadi kita bisa menampilkan HTML yang langsung digenerate atau ditulis di program.

Caranya seperti ini, silakan buat project baru. Program utamanya kita letakkan di MainActivity.java.

MainActivity.java :

package com.amijaya.androidwebkit;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;

//http://cariprogram.blogspot.com
//nuramijaya@gmail.com

public class MainActivity extends Activity {
Button Button01;
Button Button02;
WebView webView;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
       
        webView = (WebView)findViewById(R.id.WebView01);
        
        //untuk mengaktifkan javascript
        //webView.getSettings().setJavaScriptEnabled(true);
        //agar web browser tidak tampil fullscreen
        webView.setWebViewClient(new WebViewClient() 
        {



            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) 
            {
                view.loadUrl(url);
                return false;
            }

            @Override
            public void onPageFinished(WebView view, String url) 
            {
                //jalankan javascript setelah selesai loading disini
            }
        });
        
        Button01 = (Button) findViewById(R.id.Button01);
        Button01.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
String customHtml = "<html>"+
       "<head>"+
       "</head>"+
       "<body>"+
       "<form action='http://google.com/submit.php' method='post' id='loginForm' name='loginForm'>"+
       "<input id='username' name='username' type='text' />"+    
       "<input id='password'  type='password' name='password' />"+                           
       "<input id='button' type='submit' value='Login' name='button' />"+                             
       "</form>"+
       "</body>"+
       "</html>";
       
       webView.getSettings().setJavaScriptEnabled(true);
       webView.loadData(customHtml, "text/html", "UTF-8");
}
});

Button02 = (Button) findViewById(R.id.Button02);
        Button02.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
webView.loadUrl("http://google.com");
}
});
    }
} 

Kemudian untuk tampilan kita buat di main.xml seperti berikut ini :

main.xml :


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Android WebKit"
    />
<Button android:text="Custom HTML" android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
<Button android:text="Google" android:id="@+id/Button02" android:layout_width="wrap_content" android:layout_height="wrap_content"></Button>
<WebView android:id="@+id/WebView01" android:layout_width="wrap_content" android:layout_height="wrap_content"></WebView>

</LinearLayout>


Jangan lupa untuk memberi permission INTERNET pada AndroidManifest.xml jika ingin bisa mengakses web yang online di internet :

AndroidManifest.xml :


<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.amijaya.androidwebkit"
      android:versionCode="1"
      android:versionName="1.0">
    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".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>
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-sdk android:minSdkVersion="8" />

</manifest> 


Hasilnya :



Program selengkapnya dapat didownload disini :

https://docs.google.com/file/d/0B4i1FYc_4RXzdEVLd3lwWXg1QXc/edit

Pada GoogleDocs/GoogleDrive klik File Download.

Selamat Coding, semoga bermanfaat.