Cara Membuat Webview dengan Swipe Refresh di Android Studio

Apa kabar para pencari ilmu? Pada kesempatan kali ini saya akan berbagi lagi bagaimana caranya membuat webview dengan swipe refresh. Maksud dari swipe refresh di sini adalah saat kita menarik bagian atas aplikasi kita maka webview kita akan refresh aliash reload. Jadi misal ada update terbaru dari webview, kita tidak usah menutup aplikasi lalu membukanya lagi hanya untuk mereload isi dari webview kita. Biar lebih jelas coba lihat video berikut ini. Ini adalah aplikasi yang sudah saya instal d android saya.

Nah itu dia refresh yang saya maksud, hal ini juga dikenal dengan pull down to refresh. Sama saja sih maksudnya yaitu tarik ke bawah untuk refresh. Langsung saja simak caranya di bawah ini.

1. Kalian buat projek baru seperti biasa lalu pilih yang empty activity.

2. Setelah di dalam aplikasinya langsung buka layout activity_main.xml dan sesuaikan kodenya seperti di bawah ini.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context="com.blogspot.guankode.guankode.MainActivity">

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/swipe"
        android:layout_width="368dp"
        android:layout_height="0dp"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="8dp">

        <WebView
            android:id="@+id/webView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:layout_editor_absoluteX="8dp"
            tools:layout_editor_absoluteY="8dp" />

    </android.support.v4.widget.SwipeRefreshLayout>

</android.support.constraint.ConstraintLayout>

3. Setelah selesai sekarang buka MainActivity.java dan sesuaikan lagi kodenya seperti di bawah ini.

package com.blogspot.guankode.guankode;

import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    WebView webView;
    SwipeRefreshLayout swipe;

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

        swipe = (SwipeRefreshLayout) findViewById(R.id.swipe);
        swipe.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                LoadWeb();
            }
        });

        LoadWeb();
    }

    public void LoadWeb(){
        webView = (WebView) findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setAppCacheEnabled(true);
        webView.loadUrl("https://guankode.blogspot.com");
        swipe.setRefreshing(true);
        webView.setWebViewClient(new WebViewClient(){
            public void onReceivedError(WebView view, int errorCode,
                                        String description, String failingUrl) {
                webView.loadUrl("file:///android_asset/error.html");
            }
            public  void  onPageFinished(WebView view, String url){
                //ketika loading selesai, ison loading akan hilang
                swipe.setRefreshing(false);
            }
        });

        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
            //loading akan jalan lagi ketika masuk link lain
                // dan akan berhenti saat loading selesai
                if(webView.getProgress()== 100){
                    swipe.setRefreshing(false);
                } else {
                    swipe.setRefreshing(true);
                }
            }
        });
    }

    @Override
    public void onBackPressed(){

        if (webView.canGoBack()){
            webView.goBack();
        }else {
            finish();
        }
    }

}

4. Terakhir kalian tinggal menambah permission di AndroidManifest.xml agar aplikasi webview yang kita buat bisa untuk mengakses internet. Kodenya seperti di bawah ini.

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

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        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>

Kalau semua sudah dirasa benar, sekarang coba jalankan aplikasinya, dan hasilnya nanti kurang lebih akan seperti gambar ini.

Munagkin cukup sekian dulu untuk kali ini. Yang mau mendownload source kodenya silahkan klik link di bawah. Semoga artikel ini bisa memberi manfaat bagi kita semua. Amiin.

Download : Webview + Refresh