K A N G A M E T

Loading

PEMROGRAMAN ANDROID : MENAMPILKAN HALAMAN WEB DENGAN WEBVIEW

Menampilkan Situs dengan Webview Android

Selamat Datang di Blog ini . 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 ini : 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

Menampilkan Situs dengan Webview Android

Buat Project BAru

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

Menampilkan Situs dengan Webview Android

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

   

    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 ini” />

<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 :

Menampilkan Situs dengan Webview Android

Mode XML

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

Menampilkan Situs dengan Webview Android

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”/>

Menampilkan Situs dengan Webview Android

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

Menampilkan Situs dengan Webview Android

Jalankan Via USB

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

Menampilkan Situs dengan Webview Android

1
Menampilkan Situs dengan Webview Android

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

No Comments

Leave a Comment