Menampilkan Situs dengan Webview Android

PEMROGRAMAN ANDROID : MENAMPILKAN HALAMAN WEB DENGAN WEBVIEW

Selamat Datang di Blog Orang IT . Untuk menambah tulisan artikel pada label Android kali ini saya akan Share Tutorial Pemrograman Android bagaimana cara menampilkan halaman suatu website kedalam aplikasi android dengan menggunakan webview. Untuk pembuatanya saya menggunakan Software Eclipse atau anda juga bisa menggunaka Android Studio silahkan pilih mana yang menurut anda mudah

Pengenalan WebView

Web view merupakan object yang dapat menampilkan halaman web seperti layaknya web browser. Web view dapat digunakan untuk menampilkan halaman web yang terdapat di internet ataupun halaman web yang terdapat di dalam aplikasi

Pada aplikasi webview kali ini saya akan menampilkan Url Situs Blog Orang IT : http://www.helmykediri.com dan Blog saya yang lain tentang Blog Misteri jika anda sudah paham atau bingung langsung saja kita menuju Tutorial nya :

Cara Membuat WebView Sederhana Pemrograman Android :

1. Buat lah sebuah Project baru di Eclipse  terserah mau anda beri nama apa . Pilih File - New - Android Apllication Project

Buat Project BAru

Beri nama project anda terserah , sesuka hati kalian . Gunakan minimal versi android Ginger beard API 11

Buat Project

2. Kita buat User Interface atau tampilanya , masuk pada res / layout buka activity_main.xml

Edit Activity Main XML

Kemudian pastekan Script Berikut ini pada activity_main.xml dibagian XML

<LinearLayout 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:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.Belajarmultibannerhelmy.MainActivity" >

// untuk menampilkan text view

<TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="HELMY KURNIAWAN"
        android:textAppearance="?android:attr/textAppearanceMedium" />

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

// untuk membuat button

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Blog Orang IT" />

<Button
           android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Helmy Misteri" />

</LinearLayout>

// untuk menampilkan situs web

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

</LinearLayout>

Berikut Tampilanya dalam mode Activity_main.xml :

Mode XML

Berikut Tampilanya dalam mode Graphical Layout , sengaja saya buat sederhana :

Tampilan Graphic

 3. MEngedit Main_Activity.java , masuk src - com.example.blabla - MainActivity.java 

Buka dengan klik 2x otomatis akan terbuka pada jendela sebelah kanan, kemudian masukkan Script sebagai berikut :

package com.example.Belajarmultibannerhelmy;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;

public class MainActivity extends ActionBarActivity {
    WebView webView;
    Button button1, button2;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
       
        webView = (WebView)findViewById(R.id.webView1);

        //Mengaktifkan kendali zoom in dan zoom out pada webview

        webView.getSettings().setBuiltInZoomControls(true);

        //Mengaktifkan java script pada halaman web yang dibuka

        webView.getSettings().setJavaScriptEnabled(true);
        button1 = (Button)findViewById(R.id.button1);
        button2 = (Button)findViewById(R.id.button2);
        button1.setOnClickListener(btnClick);
        button2.setOnClickListener(btnClick);
        }
        View.OnClickListener btnClick = new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                //Load URL sesuai button yang di-klik

            switch(v.getId()){
            case R.id.button1 :
            webView.setWebViewClient(new ClientWebView());
            webView.loadUrl("http://helmykkediri.blogspot.co.id" );
           
            break;
            case R.id.button2 :
            webView.setWebViewClient(new ClientWebView());

            //load web page yang terdapat di terdapat di aplikasi android

            webView.loadUrl("http://mas-helmy.blogspot.co.id"); break;
            }
            }
            };

            //menampilkan halaman web sebelumnya bila ada (sesuai history browsing) apabila tombol back ditekan

            public boolean onKeyDown(int keyCode, KeyEvent event){
            if((keyCode == event.KEYCODE_BACK) && webView.canGoBack()){
            webView.goBack(); return true;
            }
            return super.onKeyDown(keyCode, event);
            }

            //memaksa untuk menampilkan halaman web yang dituju ke Web View, bukan ke browser bawaan Android

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

4. Tambahkan uses permission pada AndroidManifest.xml dengan menambahkan akses internet sebagai berikut : 

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

Akses Internet

5. Selesai , silahkan tancapkan USB SMartphone anda dan Running project yang telah di buat pada smartphone Klik kanan project - run as - android application

Jalankan Via USB

Hasil Dari WebView yang telah kita buat kurang lebih seperti ini hasilnya :

1

2

Jika anda ingin mendownload versi mentahan sebelum di compile kedalam file aplikasi android APK silahkan download melalui link dibawah ini :

Download Project Web View helmykkediri

Download Project Web View helmykkediri

Atau silahkan Download Project yang sudah di Compile kedalam APK tinggal anda jalankan saja HP Android Smartphone anda :

Download APK WebViews Android

Demikian postingan Pemrograman Android Membuat Webview sederhana , semoga bermanfaat jika ada yang ingin ditanyakan silahkan ditanyakan pada kotak komentar . Postingan saya sebelumnya MEmbuat CRUD Jual Beli Pakaian pada Aplikasi Android. sekian dan terimakasih