Membuat WebView Dengan Progress Bar pada Android Studio

Membuat WebView Dengan Progress Bar pada Android Studio sangat mudah.  WebView merupakan salah satu widget yang berfungsi menampilkan halaman web di dalam aplikasi android. WebView mengubah aplikasi Anda menjadi aplikasi web.

Contoh kasus : Badoystudio.com hanya bisa diakses melalui web tidak mempunyai aplikasi android. Maka dengan WebView kita bisa membuat aplikasi androidnya (berbentuk apk) tentunya dapat diinstall pada smartphone android sehingga ketika kita ingin mengakses badoystudio.com hanya perlu menyentuh icon badoystudio yang sudah terinstall dismartphone android.

Script WebView pada xml yaitu :

<WebView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:id="@+id/webView"

    />

Script Object Class WebView pada java yaitu :

webView = (WebView) findViewById(R.id.webView);

Untuk memuat url web ke WebView, gunakan metode loadUrl (String url) dari kelas WebView, dengan script :

webView.loadUrl("http://badoystudio.com");

 

Untuk langkah-langkah selengkapnya yaitu sebagai berikut :

1. Buat Layout WebView pada Activity_Main.xml

Layout webview badoystudio.com ini akan ditambahkan progress bar supaya saat proses load website akan menampilkan icon loading.  Untuk script lengkapnya yaitu sebagai berikut : 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin" >


    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:id="@+id/webView"

        />

    <ProgressBar
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="110dp"
        android:id="@+id/progressBar2"
        />

</RelativeLayout>

 

2. MainActivity.java

Tambahkan script untuk memanggil url website, object class Webview, dan proses progress bar pada MainActivity.java yaitu sebagai berikut :

package badoystudio.com.webview;

import android.graphics.Bitmap;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;

public class MainActivity extends AppCompatActivity {
    WebView webView;
    ProgressBar bar;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webView);
        bar=(ProgressBar) findViewById(R.id.progressBar2);
        webView.setWebViewClient(new myWebclient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("http://badoystudio.com");


    }

    public class myWebclient extends WebViewClient{
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            bar.setVisibility(View.GONE);
        }

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
        }

        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return super.shouldOverrideUrlLoading(view, url);
        }
    }

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

        return super.onKeyDown(keyCode, event);
    }
}

Script Dibawah Digunakan Untuk Back Ke Webview ketika kita sudah membuka konten yang terdapat pada website.

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

    return super.onKeyDown(keyCode, event);
}

3. Style.xml

Agar terlihat lebih baik ui nya hilangkan actionbar webview dengan script dibawah ini :

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

 

4. AndroidManifests.xml

Tambahkan user permission internet pada AndroidManifest.xml :

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="badoystudio.com.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>

Jika di runing maka hasilnya akan seperti gambar berikut :

WebView Dengan Progress Bar pada Android Studio
Tampilan aplikasi webview ketika dibuka pertama kali

 

WebView Dengan Progress Bar pada Android Studio
Tampilan salah satu artikel yang ada di badoystudio.com pada webview

 

Mudah bukan untuk membuat web kita menjadi apk webview pada android studio. Share ya jika bermanfaat. Tunggu apalagi praktekan sekarang 😀

Sumbe : Developer.android.com

Tulisan Menarik Lainnya :

9 Langkah Mudah Membuat Aplikasi Kalkulator Sederh... Pada tutorial kali ini kita akan belajar membuat aplikasi kalkulator sederhana di android menggunakan android studio. Bagaimana cara membuatnya ? Muda...
Cara Mudah Membuat Animasi Transisi (on/off lampu)... Halo teman-teman masih semangat belajar android development ? Harus tetap semangat pastinya. Kali ini kita akan belajar membuat aplikasi sederhana...
Membuat Intro Slider Keren Menggunakan Android Stu... Tutorial telah diperbaharui dengan menambahkan dimens.xml  Tutorial kali ini kita akan membuat intro slider menggunakan android studio. Intro S...

Suka belajar dan mengajar teknologi komputer khususnya mobile development android