Tutorial Cara Menggunakan SwipeRefreshLayout Pada WebView di Android Studio

CARA MENGGUNAKAN SWIPEREFRESHLAYOUT PADA WEBVIEW DI ANDROID STUDIO

Halo Android Developer. Bagaimana kabar kalian semua saat ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial cara menggunakan swiperefreshlayout pada webview di android studio agar mudah untuk merefesh halaman di webview yang kita gunakan.

Tutorial ini adalah gabungan dari dua tutorial sebelumnya yang telah saya kerjakan, yaitu:

Tutorial Dasar Cara Menggunakan SwipeRefreshLayout di Android Studio dan Tutorial Cara Membuat Aplikasi Web di Android Studio Menggunakan WebView

Jadi untuk kalian yang belum mengerti, silahkan ikuti tutorial sebelumnya untuk bisa memahami tutorial ini. Namun untuk kalian yang sudah paham, tidak perlu untuk mengikuti tutorial sebelumnya.

Tutorial Cara Menggunakan SwipeRefreshLayout Pada WebView di Android Studio

Buatlah projek Android Studio baru dengan informasi sebagai berikut:

Application Name:Swipe WebView App
Package Name:com.androidrion.swipewebapp
Languge:Java
Minimum SDK:API 16: Android 4.1 (JellyBean)

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Swipe WebView App

Dependencies File

Untuk menggunakan SwipeRefreshLayout di Anroid Studio, kalian perlu menambahkan library ke dalam projek kalian. Berikut ini adalah kode library untuk menambahkan SwipeRefreshLayout di projek Android Studio kalian.

Gradle Scripts/build.gradle (Module:app)

implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'

Untuk kalian yang belum mengetahui cara menambahkan library ke projek Android Studio, kalian bisa mengikuti tutorial pada link dibawah ini.

CARA MENAMBAHKAN LIBRARY DI PROJEK ANDROID STUDIO

Android Manifest File

Buka file AndroidManifest.xml dalam folder manifest. Tambahkan user-permission untuk menjalankan internet pada aplikasi. Berikut ini adalah kode lengkap untuk file AndroidManifest.xml

app/manifests/AndroidManifest.xml

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

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <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/Theme.MyApplication">
        <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>

XML Layout File

Buka file activity_main.xml dalam folder layout pada projek android studio kalian. Dalam tutorial ini saya menggunakan RelaviteLayout, lalu di dalam layout tersebut saya tambahkan SwipeRefreshLayout dan di dalam layout tersebut sama tambahkan WebView. Berikut ini adalah kode lengkah untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swiperefreshlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true">

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</RelativeLayout>

Java File

Buka file MainActivity dalam folder java pada projek Android Studio kalian. Gunakan kode dibawah ini untuk membuat aplikasi bisa me-refresh webview yang telah tampil menggunakan SwipeRefreshLayout. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.swipewebviewapp/MainActivity.java

package com.androidrion.myapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout;

import android.annotation.SuppressLint;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    WebView myWeb;
    SwipeRefreshLayout refreshLayout;

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

        myWeb = findViewById(R.id.webview);
        myWeb.setWebViewClient(new WebViewClient());
        myWeb.loadUrl("https://www.androidrion.com");
        WebSettings webSettings = myWeb.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setAllowFileAccess(true);

        myWeb.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                refreshLayout.setRefreshing(true);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                refreshLayout.setRefreshing(false);
            }
        });

        refreshLayout = findViewById(R.id.swiperefreshlayout);
        refreshLayout.setColorSchemeColors(getResources().getColor(android.R.color.holo_green_dark), getResources().getColor(android.R.color.holo_blue_dark),
                getResources().getColor(android.R.color.holo_orange_dark), getResources().getColor(android.R.color.holo_red_dark));
        refreshLayout.setOnRefreshListener(() -> myWeb.loadUrl("https://www.androidrion.com"));

    }
}

Run Project

Setelah kalian menambahkan semua kode yang telah saya berikan, Jalankan project aplikasi Android Studio kalian. Pada tampilan awal aplikasi berjalan, kalian bisa melihat aplikasi kalian sedang me-load website yang telah kalian tambahkan dengan tampilan SwipeRefreshLayout yang sedang berjalan. Namun, setelah website berhasil di-load maka SwipeRefreshLayout menghilang. Dan ketika kalian melakukan swipe kebawah, maka SwipeRefreshLayout akan muncul dan melakukan refresh pada WebView.

Apabila kode di atas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial Cara Menggunakan SwipeRefreshLayout Pada WebView di Android Studio untuk Refresh atau Load Website. Jika kalian mengalami kendala dalam melakukan tutorial diatas, silahkan komentar pada artikel ini. Jangan lupa juga untuk like, komen dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih. 🙂

Get real time updates directly on you device, subscribe now.

You might also like
Leave A Reply

Your email address will not be published.