Menampilkan Situs dengan Webview Android

PEMROGRAMAN ANDROID : MENAMPILKAN HALAMAN WEB DENGAN WEBVIEW

Pengenalan WebView

Cara Membuat WebView Sederhana Pemrograman Android :

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

package com.example.Belajarmultibannerhelmy;

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;
                }
                }
                }

Akses Internet

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 :

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