Cara Membuat WebView Dengan Eclipse Android ADT

Cara Membuat WebView Dengan Eclipse Android ADT

WebView adalah sebuah komponen untuk membuat aplikasi web atau website berjalan dalam aplikasi Android dengan cara memanggil url atau nama domain/ip atau dengan cara menyimpan file web seperti html, css dan javascript kedalam folder assets pada project aplikasi Android atau biasanya ditambah folder www dan disimpan kedalamnya.

Banyak sekali manfaat dalam menggunakan webview salah satunya adalah bagi para developer dari pengembangan web dengan tidak perlu harus belajar pemrograman mobile cukup dengan tahu sedikit yang berkaitan dengan Webview ini, berikut dibawah ini adalah cara membuat project aplikasi Android menggunakan Eclipse ADT.

Buat Project Baru

  1. Buka Eclipse yang sudah ada ADT dan Android SDK
  2. Buat project baru dengan klik next sampai pembuatan activity baru, perhatian: anda disarankan untuk tidak membuat activity baru karena nanti setelah project terbuat baru dibuat activity secara manual dengan membuat java pada src > package dan xml pada res > layout
  3. Akan tetapi jika Anda ingin ringan maka bisa langsung buat activity bersama project dengan syarat ActionBarActivity harus diubah ke Activity biasa karena anda sedikit error pada pembuatan WebView

Desain WebView

Buat desain layout bernama activity_main.xml atau jika sudah ada maka silahkan edit di res > layout > activity_main.xml, dengan cara ditambahkan WebView widget kedalam area layout activity atau seperti sintaks dibawah ini

<WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

Untuk kode penuh dari activity_main.xml dan webview seperti kode dibawah ini.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.mywebview.MainActivity" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" />

</RelativeLayout>

Pembuatan Perintah/Aksi

Untuk membuat perintah maka kita akan membuat MainActivity.java pada src > package (com.example.xxxxx) atau jika sudah terbuat silahkan di edit dan jangan lupa ubah ActionBarActivity ke Activity biasa, selanjutnya panggil import tool-tool yang dibutuhkan.

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {
//... disini kode webview dibawah ini tinggal gantikan saja komentar ini ...
}

Selanjutnya adalah pemanggilan antara webview activity_main.xml ke id MainActivity.java didalam onCreate dan dibawah setContentView serta dengan loadUrl untuk pemanggilan urlnya

WebView  myWebView = (WebView) findViewById(R.id.webView1);
myWebView.loadUrl("file:///android_asset/www/index.html");

Selanjutnya buat setelah untuk webview kita seperti memberikan javascript dan lain-lain.

WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

Selanjutnya membuat klik link yang berguna untuk berjalan di webview ketika link lain di klik dan tidak redirect ke browser external, ini sangat berguna untuk web yang memiliki link atau halaman.

myWebView.setWebViewClient(new MyWebViewClient());

Selanjutnya membuat class dalam class untuk MyWebViewClient diluar oCreate dan didalam class MainActivity

class MyWebViewClient extends WebViewClient{

     @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if (Uri.parse(url).getHost().equals("androidpidie.blogspot.com")) {
                // This is my web site, so do not override; let my WebView load the page
                return false;
            }
            // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
            Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
            startActivity(intent);
            return true;
        }

}

Untuk kode penuh pada MainActivity.java seperti dibawah ini

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends Activity {
 
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        WebView  myWebView = (WebView) findViewById(R.id.webView1);
        myWebView.loadUrl("file:///android_asset/www/index.html");
        //myWebView.loadUrl("http://10.0.2.2"); for web server (XAMPP/WampServer/Lamp)
        //myWebView.loadUrl("http://androidpidie.blogspot.com"); for your website
        WebSettings webSettings = myWebView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        myWebView.setWebViewClient(new MyWebViewClient());
        
    }
 
 class MyWebViewClient extends WebViewClient{

     @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            if (Uri.parse(url).getHost().equals("androidpidie.blogspot.com")) {
                // This is my web site, so do not override; let my WebView load the page
                return false;
            }
            // Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
            Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
            startActivity(intent);
            return true;
        }

 }

}

Mengedit Manifest

Yang perlu anda tambahkan kedalam AndroidManifest.xml adalah kode dibawah ini untuk mengaktifkan internet atau jaringan online pada aplikasi Android kita.

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

Selanjutnya pastikan anda memanggil activity di AndroidManifest.xml beserta dengan membuat activity tidak memiliki toolbar dan membuat activity kita menjadi fullscreen.

<application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen" >
        <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>

Dibawah ini adalah kode penuh dari AndroidManifest.xml.

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

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

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen" >
        <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>

</manifest>

Pembuatan index.html menggunakan jQuery Mobile pada folder assets > www

<!DOCTYPE html> 
<html>
<head>
 <title>Page Title</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
 <script src="http://code.jquery.com/jquery.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
 
<!-- Start of first page -->
<div data-role="page" id="foo">

 <div data-role="header" data-position="fixed">
  <h1>Foo</h1>
 </div><!-- /header -->

 <div role="main" class="ui-content">
  <p>I'm first in the source order so I'm shown as the page.</p>
  <p>View internal page called <a href="#bar">bar</a></p>
 </div><!-- /content -->

 <div data-role="footer" data-position="fixed">
  <h4>Page Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->

<!-- Start of second page -->
<div data-role="page" id="bar">

 <div data-role="header" data-position="fixed">
  <h1>Bar</h1>
 </div><!-- /header -->

 <div role="main" class="ui-content">
  <p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
  <p><a href="#foo">Back to foo</a></p>
 </div><!-- /content -->

 <div data-role="footer" data-position="fixed">
  <h4>Page Footer</h4>
 </div><!-- /footer -->
</div><!-- /page -->
 
</body>
</html>

Screenshot Hasil

Cara Membuat WebView Dengan Android IDE 1

Cara Membuat WebView Dengan Android IDE 2

Tags: ,