Menampilkan Konten Web di App menggunakan 'WebView'

'WebView memungkinkan kita untuk menempelkan web browser ke 'activity' kita. Ini akan sangat bermanfaat bila app kita perlu menempelkan konten web, misalnya peta dari suatu penyedia, dst. Berikut di bawah ini adalah contoh latihan bagaimana kita bisa memuat konten laman web dan menampilkan pada 'activity' kita.

File layout xml:activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" > 

<WebView android:id="@+id/webview1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" /> 

</LinearLayout>

File java: MainActivity.java:

package com.example.webview; 

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebSettings;
import android.webkit.WebView; 

public class MainActivity extends AppCompatActivity { 

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); 

WebView wv = (WebView) findViewById(R.id.webview1); 

WebSettings webSettings = wv.getSettings();
webSettings.setBuiltInZoomControls(true);
wv.loadUrl(
"http://chart.apis.google.com/chart" +
"?chs=300x225" +
"&cht=v" +
"&chco=FF6342,ADDE63,63C6DE" +
"&chd=t:100,80,60,30,30,30,10" +
"&chdl=A|B|C");
}
}

File manifest: AndroidManifest.xml: (untuk menambahkan 'permission', lihat pada kode dengan huruf tebal)

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

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

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

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

</manifest>

Kemudian jalankan pada emulator 

Mengakses chart dari google

Penjelasan

Untuk menggunakan 'WebView' untuk memuat laman web, kita menggunakan method 'loadUrl()' dan melewatkannya ke suatu URL, seperti berikut ini:

wv.loadUrl(
"http://chart.apis.google.com/chart" +
"?chs=300x225" +
"&cht=v" +
"&chco=FF6342,ADDE63,63C6DE" +
"&chd=t:100,80,60,30,30,30,10" +
"&chdl=A|B|C");

Untuk menampilkan 'zoom control' yang sudah built-in, kita perlu mendapatkan properti 'WebSettings' terlebih dahulu dari 'WebView' dan kemudian memanggil method 'setBuiltInZoomControls()' seperti berikut ini:

WebSettings webSettings = wv.getSettings();
webSettings.setBuiltInZoomControls(true);

zoom control akan muncul
bila kita click dan drag kontennya

Catatan:

Meskipun sebagian besar perangkat Android mendukung layar multi sentuh, tetapi 'zoom control' yang sudah built-in ini bermanfaat untuk men-zoom konten web ketika menguji app kita di emulator.

Terkadang bila kita memuat suatu laman yang me-redirect kita (misalnya, memuat http://beritati.blogspot.com akan redirect ke https://beritati.blogspot.co.id), 'WebView ' akan menyebabkan app kita mengaktifkan aplikasi Brower perangkat kita untuk memuat laman yang kita diinginkan. Untuk mencegah hal ini terjadi, kita perlu mengimplementasikan class 'WebViewClient' dan melakukan 'override' pada method 'shouldOverrideUrlLoading()', seperti ditunjukkan dalam contoh latihan berikut ini:

package com.example.webview; 

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient; 

public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); 

WebView wv = (WebView) findViewById(R.id.webview1); 

WebSettings webSettings = wv.getSettings();
webSettings.setBuiltInZoomControls(true);
wv.setWebViewClient(new Callback());
wv.loadUrl("http://www.beritati.blogspot.com");
} 

private class Callback extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return(false);
}
}
}

Mencegah membuka browser
bila ada redirect laman web

Kita juga bisa membuat string HTML secara dinamis dan memuatnya ke dalam 'WebView', dengan menggunakan method 'loadDataWithBaseURL()' seperti berikut ini:

WebView wv = (WebView) findViewById(R.id.webview1);
final String mimeType = "text/html";
final String encoding = "UTF-8";
String html = "

Laman HTML Sederhana

" +
"Mari belajar membuat app Android gratis disini";
wv.loadDataWithBaseURL("", html, mimeType, encoding, "");

Menampilkan kode HTML sederhana

Alternatifnya, bila kita memiliki file HTML yang disimpan di folder "asset" di dalam project kita, kita juga bisa memuatnya ke dalam 'WebView' dengan menggunakan method 'loadUrl()' seperti berikut:

WebView wv = (WebView) findViewById(R.id.webview1);
wv.loadUrl("file:///android_asset/Index.html");