Penggunaan WebView dalam Android Studio

Salah satu widget yang sering dipakai dalam menampilkan halaman html adalah WebView. Contoh kali ini bukan sekedar untuk membuka html dari suatu file html tetapi digunakan untuk membuka website tertentu. Sebagai contoh dalam proyek ini akan menampilkan halaman website http://kasmui.com/v1/ di layar.

Agar mudah untuk belajar silahkan download file proyek android studio lebih dulu dari link berikut download, lalu ekstrak dan bukalah dengan Android Studio.

Langkah penyusunan:

1. Buat proyek baru Android Studio

2. File activity layout (activity_kasmui.com) hanya berisi komponen widget WebView

<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"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".KasmuiCom">

    <WebView android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

    </WebView>

</RelativeLayout>

Tampilan visualnya sebagai berikut:

view_kasmui.com

 3. Buat file java (KasmuiCom.java) yang berisi

package com.kasmui.kasmuicom;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebChromeClient;
import android.webkit.WebView;

public class KasmuiCom extends ActionBarActivity {
    private WebView wv;

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

        wv = (WebView) findViewById(R.id.webView1);
        wv.setWebChromeClient(new WebChromeClient());
        wv.loadUrl("http://kasmui.com/v1/");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_kasmui_com, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

Penjelasan:

Untuk menjalankan WebView gunakan perintah berikut:

wv = (WebView) findViewById(R.id.webView1);
wv.setWebChromeClient(new WebChromeClient());
wv.loadUrl("http://kasmui.com/v1/");

 

4. Isikan file AndroidManifest.xml dengan <uses-permission android:name=”android.permission.INTERNET” /> untuk menjalankan internet. Berikut ini isi file AndroidManifest.xml.

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

    <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=".KasmuiCom"
            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>

Sebagai tambahan gantilah icon pada folder drawable dengan icon pilihan sendiri dan beri nama ic_launcher.png. Tampilannya di HP Android sebagai berikut:

Screenshot_2014-12-20-21-30-57

File apk hasil kompilasi akan tersimpan di direktori app/build/outputs/apk/, biasanya bernama app-debug.apk. Copy-kan ke HP android dan install, maka file apk itu akan ‘running’ di HP android.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *