Cara Membuat Swiperefresh di Webview android

Share:

Cara Membuat Swiperefresh di Webview Android. Assalamualaikum, salah satu fitur yang cukup bermanfaat bagi pengguna aplikasi android adalah fitur swipe refresh, swipe refresh adalah sebuah fitur yang memungkinkan pengguna untuk dapat mereload sebuah halaman dengan menggunakan gestur swipe ke bawah pada layar smartphone.






menggunakan fitur swipe refresh ini lebih bertujuan untuk meningkatkan kenyamanan pengguna dalam berinteraksi dengan aplikasi yang kita buat. Jadi, memang swiperefresh bukanlah hal yang wajib, tapi kalo teman-teman mau bikin aplikasi webview androidnya biar lebih profesional ayo ikuti tutorial cara membuat swiperefresh di Webview Android berikut ini.


Cara Membuat Swiperefresh di Webview Android

  • 1. Buka android studio, pilih empty activity, beri nama project bebas lalu pilih api bebas lalu tekan finish
  • 2. Pertama-tama, tambahkan uses-permission. Buka file AndroidManifest.xml, lalu tambahkan script di bawah ini tepat diatas tag <application>

<uses-permission android:name="android.permission.INTERNET"/>
  • 3. Pada bilah sidebar, buka gradle script > build gradle (module app). Lalu tambahkan script dibawah ini di dalam dependencies { }. kemudian klik sync now, lalu tunggu sampai proses selesai

implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0'
  • 3. kemudian buuka activity_main.xml, masuk ke folder res > layout > activity_main.xml. Lalu tambahkan script di bawah ini. Script dibawah ini berfungsi untuk membuat tampilan layout webview

<?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/home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerVertical="true"
        android:layout_centerInParent="true"
        />

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

</RelativeLayout>
  • 4. Masuk ke file MainActivity.java lalu tambahkan script dibawah ini tepat pada tulisan public class MainActivity extends AppCompatActivity { 

package com.sahretech.swiperefresh;

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

import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener{

    WebView mWebView;
    private SwipeRefreshLayout refreshLayout;
    String URL = "http://www.detik.com/";

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

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

        //menghidupkan javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.loadUrl(URL);
        mWebView.setWebViewClient(new MyWebViewClient());

        refreshLayout = (SwipeRefreshLayout) findViewById(R.id.swiperefresh);
        refreshLayout.setOnRefreshListener(this);
    }
    @Override
    public void onRefresh() {
        mWebView.reload();
        refreshLayout.setRefreshing(false);
    }


    //method ini perlu ditambahkan agar saat halaman web diload tetap diload di aplikasi, tidak diload di webbrowseer
    private class MyWebViewClient extends WebViewClient {


        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            view.loadUrl(url);
            return true;
        }
    }

    //tambahkan method ini agar saat tombol back ditekan, tidak keluar dari aplikasi tapi kembali ke halaman sebelumnya
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()){
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

  • Jika muncul error klik pada tulisan yang merah/error lalu tekan alt+enter untuk mengimport class. Lalu coba jalankan aplikasi kalian, maka hasilna akan tampil seperti gambar gif di bawah ini.
  • Selain membuat swiperefresh, ada tutorial lain yang mungkin harus kalian ikuti untuk membuat aplikasi webview kalian semakin professional layaknya aplikasi native pada umumnya. Yaitu penambahan progress bar, adanya progress bar akan  memberikan respon kepada pengguna saat akan berpindah dari satu halaman ke halaman lain. Penambahan ini bertujuan untuk menambah kepuasan pengguna terhadap aplikasi yang kita buat. Ayo ikuti tutorialnya di link berikut ini!!!.
    Avatar
    Cara Membuat Progress Bar di Web View Android Studio
    Sekian tutorial cara membuat swiperefresh di webview android. Semoga tutorial singkat ini bermanfaat bagi teman-teman sekalian. Ada pertanyaan, kritk dan saran bisa tinggalkan di kolom komentar di bawah ini. Happy Coding!!





1 comment:

  1. gan, waktu dirunning pada emulator oke. saat kita build gak bisa running gan. "web page not available" gimana cara mengatasinya gan

    ReplyDelete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi