How to Add Pull to Refresh in Webview App | Webview App Development Series Part 7

Hi, Today I am going to show you how to Add Pull to Refresh in Webview App. In the Last post, I have shown you How to Add Progress Dialog in Android Webview App. Let's start.

First, we will write code in "activity_main.xml" file, we will take a "SwipeRefreshLayout" above our Webview, and we will close it below "Webview".

swiperefreshlayout width and height will match_parent, and you need to give a id, I am giving id is "swipe".

Code:

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

We have finished coding in "activity_main.xml" file. So, the whole code will be in activity_main.xml file is :

Code:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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" android:orientation="vertical" tools:context=".MainActivity"> <androidx.swiperefreshlayout.widget.SwipeRefreshLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/swipe"> <WebView android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/myweb"/> </androidx.swiperefreshlayout.widget.SwipeRefreshLayout> </LinearLayout>

Now we will move to "MainActivity.xml" file. First we will take a private SwipeRefreshLayout variable, will give the name "swipeRefreshLayout".

Code:

private SwipeRefreshLayout swipeRefreshLayout;

After that, in "onCreate" function we need to retrieve swiperefreshlayout design from activity_main.xml file and store it to swiperefreshlayout variable which we have taken above.

And Also you need to call onRefreshListener and I will give custom color for SwipeRefreshLayout, you can use default color also. See below code:

Code:

swipeRefreshLayout = (SwipeRefreshLayout)findViewById(R.id.swipe); swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { swipeRefreshLayout.setRefreshing(true); new Handler().postDelayed(new Runnable() { @Override public void run() { swipeRefreshLayout.setRefreshing(false); web.reload(); } },2000); } }); swipeRefreshLayout.setColorSchemeColors( getResources().getColor(android.R.color.holo_blue_dark), getResources().getColor(android.R.color.holo_orange_dark), getResources().getColor(android.R.color.holo_green_dark), getResources().getColor(android.R.color.holo_red_dark) );

We have finished writing code for "Pull to Refresh". So, the whole code will be in MainActivity.java is:

Code:

package com.ss.tweetpost; import androidx.appcompat.app.AppCompatActivity; import androidx.swiperefreshlayout.widget.SwipeRefreshLayout; import android.os.Bundle; import android.os.Handler; import android.view.View; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Toast; public class MainActivity extends AppCompatActivity { private WebView web; String webUrl = "https://tweettools.trickssoftware.com/"; private SwipeRefreshLayout swipeRefreshLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); web = (WebView) findViewById(R.id.myweb); web.loadUrl(webUrl); WebSettings mywebsettings = web.getSettings(); mywebsettings.setJavaScriptEnabled(true); web.setWebViewClient(new WebViewClient()); //improve webview performance web.getSettings().setLoadsImagesAutomatically(true); web.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH); web.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); web.getSettings().setAppCacheEnabled(true); web.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY); mywebsettings.setDomStorageEnabled(true); mywebsettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NARROW_COLUMNS); mywebsettings.setUseWideViewPort(true); mywebsettings.setSavePassword(true); mywebsettings.setSaveFormData(true); mywebsettings.setEnableSmoothTransition(true); //pull to refresh swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe); swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() { @Override public void onRefresh() { swipeRefreshLayout.setRefreshing(true); new Handler().postDelayed(new Runnable() { @Override public void run() { swipeRefreshLayout.setRefreshing(false); web.reload(); } }, 2000); } }); swipeRefreshLayout.setColorSchemeColors( getResources().getColor(android.R.color.holo_blue_dark), getResources().getColor(android.R.color.holo_orange_dark), getResources().getColor(android.R.color.holo_green_dark), getResources().getColor(android.R.color.holo_red_dark) ); } @Override public void onBackPressed() { if (web.canGoBack()) { web.goBack(); } else { super.onBackPressed(); } } }

Now we will run our project.

as you can see my screenshot we have successfully added pull to Refresh function in our Webview app. Thanks.