{"id":524,"date":"2021-05-02T04:46:03","date_gmt":"2021-05-02T03:46:03","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=524"},"modified":"2025-04-22T15:41:54","modified_gmt":"2025-04-22T14:41:54","slug":"create-a-webview-in-android-studio-progressbar-swipe-to-refresh-custom-error-page-on-network-failure","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/create-a-webview-in-android-studio-progressbar-swipe-to-refresh-custom-error-page-on-network-failure\/","title":{"rendered":"Create a WebView in Android Studio: ProgressBar + Swipe to Refresh + Custom Error Page on Network Failure"},"content":{"rendered":"\n

<\/span>Estimated reading time: <\/span>7<\/span> minutes<\/span><\/p>\n\n\n\n

What is a WebView?<\/h2>\n\n\n\n

A WebView is an embeddable browser that helps a native application, such as Android, to display web content. If you are writing an application that needs to deliver a web content or show a web page as a part of a client application, you can do it smoothly and efficiently using WebView.<\/p>\n\n\n\n

How to Get Hired at US Tech Firms as a Nigerian Developer<\/a>.<\/p>\n\n\n\n

According to the Android Studio documentation<\/a>, the WebView<\/code> class is an extension of Android’s View<\/code> class that allows you to display web pages as a part of your activity layout. It does not<\/em> include any features of a fully developed web browser, such as navigation controls or an address bar. All that WebView<\/code> does, by default, is show a web page.<\/p>\n\n\n\n

In this article, we shall see how to:<\/p>\n\n\n\n

    \n
  1. Use Android’s native webView wrapper to load site’s url<\/li>\n\n\n\n
  2. Add and dismiss progressBar<\/li>\n\n\n\n
  3. Utilize the Swipe to refresh feature of Android’s webView.<\/li>\n\n\n\n
  4. Add a custom error page on network failure.<\/li>\n<\/ol>\n\n\n\n

    Let us begin …<\/strong><\/p>\n\n\n\n

    Step 1: Open up your Android Studio and select Empty Activity<\/h3>\n\n\n\n
    \"\"
    Android Studio Project Setup<\/figcaption><\/figure>\n\n\n\n

    Step 2: Add the following dependency in build.gradle<\/em> file inside the app folder<\/em><\/h3>\n\n\n\n
    implementation 'com.google.android.material:material:1.0.0'<\/code><\/pre>\n\n\n\n
    Step 3: Sync project with gradle<\/em> files<\/h3>\n\n\n\n
    \"\"
    Sync Project With Gradle Files<\/figcaption><\/figure>\n\n\n\n
    Step 4: Add the following code to your activity_main.xml <\/em>file in res->layout folder<\/h3>\n\n\n\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\n<RelativeLayout\n    xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\n    xmlns:app=\"http:\/\/schemas.android.com\/apk\/res-auto\"\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\n    android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    tools:context=\".MainActivity\">\n\n   <androidx.swiperefreshlayout.widget.SwipeRefreshLayout\n       android:id=\"@+id\/swipe\"\n       android:layout_width=\"match_parent\"\n       android:layout_height=\"match_parent\"\n       tools:layout_behavior=\"@string\/appbar_scrolling_view_behavior\">\n\n\n\n       <WebView\n           android:id=\"@+id\/web\"\n           android:layout_width=\"match_parent\"\n           android:layout_height=\"match_parent\"\/>\n\n\n   <\/androidx.swiperefreshlayout.widget.SwipeRefreshLayout>\n\n\n    <ProgressBar\n        android:id=\"@+id\/progress\"\n        android:layout_width=\"wrap_content\"\n        android:layout_height=\"match_parent\"\n        android:layout_centerVertical=\"true\"\n        android:layout_centerHorizontal=\"true\"\n        style=\"?android:attr\/progressBarStyle\"\n        \/>\n\n<\/RelativeLayout><\/code><\/pre>\n\n\n\n
    Step: 5 We will go to our MainActivity.java<\/em> file and add the code to display the WebView<\/h3>\n\n\n\n
    public class MainActivity extends AppCompatActivity {\n\n    WebView webView;\n    ProgressBar progressBar;\n    SwipeRefreshLayout swipeRefreshLayout;\n\n    @SuppressLint(\"SetJavaScriptEnabled\")\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_main);\n\n        getSupportActionBar().hide();\n\n        webView = findViewById(R.id.web);\n        progressBar = findViewById(R.id.progress);\n        swipeRefreshLayout = findViewById(R.id.swipe);\n\n\n        webView.getSettings().setJavaScriptEnabled(true);\n        webView.getSettings().setSupportZoom(false);\n        webView.getSettings().setDomStorageEnabled(true);\n        webView.setWebViewClient(new myWebViewclient());\n        webView.loadUrl(\"http:\/\/codeflarelimited.com\");\n}\n}<\/code><\/pre>\n\n\n\n
    Here we setting up our basic WebView and just passing the url we want to wrap. Notice also that we have initialized the SwipeRefreshLayout, and that’s all we are doing here. We need to make it show and dismiss it when the page is fully loaded.<\/p>\n\n\n\n
    So we add the following code:<\/p>\n\n\n\n
     swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {\n            @Override\n            public void onRefresh() {\n                swipeRefreshLayout.setRefreshing(true);\n                new Handler().postDelayed(new Runnable() {\n                    @Override\n                    public void run() {\n                        swipeRefreshLayout.setRefreshing(false);\n                        webView.loadUrl(\"http:\/\/codeflarelimited.com\");\n                    }\n                },  3000);\n            }\n        });\n\n        swipeRefreshLayout.setColorSchemeColors(\n                getResources().getColor(android.R.color.holo_blue_bright),\n                getResources().getColor(android.R.color.holo_orange_dark),\n                getResources().getColor(android.R.color.holo_green_dark),\n                getResources().getColor(android.R.color.holo_red_dark)\n        );\n\n    }<\/code><\/pre>\n\n\n\n
    Notice we are also using WebViewClient. The WebViewClient<\/em> allows us to handle navigation inside the WebView<\/em> and to also handle the various events generated by the WebView<\/em>. It is also in this WebViewClient block that we want to check for errors, network errors, SSL errors, etc.<\/p>\n\n\n\n
    \"build<\/a><\/figure>\n\n\n\n
    We want to be able to handle errors in a nice and responsible way. So we’ll add the following code:<\/p>\n\n\n\n
    public class myWebViewclient extends WebViewClient{\n\n        @Override\n        public boolean shouldOverrideUrlLoading(WebView view, String url) {\n            view.loadUrl(url);\n            return true;\n        }\n\n        @Override\n        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {\n            Toast.makeText(getApplicationContext(), \"No internet connection\", Toast.LENGTH_LONG).show();\n            webView.loadUrl(\"file:\/\/\/android_asset\/lost.html\");\n        }\n\n        @Override\n        public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {\n            super.onReceivedSslError(view, handler, error);\n            handler.cancel();\n        }\n\n        @Override\n        public void onPageStarted(WebView view, String url, Bitmap favicon) {\n            super.onPageStarted(view, url, favicon);\n            progressBar.setVisibility(View.VISIBLE);\n        }\n\n        @Override\n        public void onPageFinished(WebView view, String url) {\n            super.onPageFinished(view, url);\n            progressBar.setVisibility(View.GONE);\n        }\n    }<\/code><\/pre>\n\n\n\n
    Now, let us explain what’s happening here. First we’re handling navigation here within the WebVeiw because of this line of code:<\/p>\n\n\n\n
     public boolean shouldOverrideUrlLoading(WebView view, String url) {\n            view.loadUrl(url);\n            return true;\n        }<\/code><\/pre>\n\n\n\n
    This ensures that whatever url that is loaded in the WebView opens up in the WebVeiw and does not navigate away or open up chrome or other web browser.<\/strong><\/p>\n\n\n\n
    Next, we have the onReceivedError<\/em><\/strong> method. This is where we check for error, and to handle that we have created an offline html file that will load when the app encounters a network failure.<\/p>\n\n\n\n
    Don’t forget to handle Back Navigation for the WebView!<\/h3>\n\n\n\n
    The default behaviour of webView applications, especially in Android, is that once you press the back button it closes the application. But what if we have visited several pages and we want to go back to the previous page?<\/p>\n\n\n\n
    So we need to handle the back navigation and just say if the webView has previous pages and canGoBack()<\/em><\/strong>, let it just goBack()<\/em><\/strong>. We’ll add the following code as well:<\/p>\n\n\n\n
     @Override\n    public boolean onKeyDown(int keyCode, KeyEvent event) {\n\n        if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {\n            webView.goBack();\n            return true;\n        }\n        return super.onKeyDown(keyCode, event);\n    }<\/code><\/pre>\n\n\n\n
    Here’s the full code for the MainActvity.java<\/em> file:<\/h3>\n\n\n\n
    import androidx.appcompat.app.AppCompatActivity;\nimport androidx.swiperefreshlayout.widget.SwipeRefreshLayout;\n\nimport android.annotation.SuppressLint;\nimport android.graphics.Bitmap;\nimport android.net.http.SslError;\nimport android.os.Bundle;\nimport android.os.Handler;\nimport android.view.KeyEvent;\nimport android.view.View;\nimport android.webkit.SslErrorHandler;\nimport android.webkit.WebView;\nimport android.webkit.WebViewClient;\nimport android.widget.ProgressBar;\nimport android.widget.Toast;\n\npublic class MainActivity extends AppCompatActivity {\n\n    WebView webView;\n    ProgressBar progressBar;\n    SwipeRefreshLayout swipeRefreshLayout;\n\n    @SuppressLint(\"SetJavaScriptEnabled\")\n    @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        super.onCreate(savedInstanceState);\n        setContentView(R.layout.activity_main);\n\n        getSupportActionBar().hide();\n\n        webView = findViewById(R.id.web);\n        progressBar = findViewById(R.id.progress);\n        swipeRefreshLayout = findViewById(R.id.swipe);\n\n\n        webView.getSettings().setJavaScriptEnabled(true);\n        webView.getSettings().setSupportZoom(false);\n        webView.getSettings().setDomStorageEnabled(true);\n        webView.setWebViewClient(new myWebViewclient());\n        webView.loadUrl(\"http:\/\/codeflarelimited.com\");\n\n        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {\n            @Override\n            public void onRefresh() {\n                swipeRefreshLayout.setRefreshing(true);\n                new Handler().postDelayed(new Runnable() {\n                    @Override\n                    public void run() {\n                        swipeRefreshLayout.setRefreshing(false);\n                        webView.loadUrl(\"http:\/\/codeflarelimited.com\");\n                    }\n                },  3000);\n            }\n        });\n\n        swipeRefreshLayout.setColorSchemeColors(\n                getResources().getColor(android.R.color.holo_blue_bright),\n                getResources().getColor(android.R.color.holo_orange_dark),\n                getResources().getColor(android.R.color.holo_green_dark),\n                getResources().getColor(android.R.color.holo_red_dark)\n        );\n\n    }\n\n\n    public class myWebViewclient extends WebViewClient{\n\n        @Override\n        public boolean shouldOverrideUrlLoading(WebView view, String url) {\n            view.loadUrl(url);\n            return true;\n        }\n\n        @Override\n        public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {\n            Toast.makeText(getApplicationContext(), \"No internet connection\", Toast.LENGTH_LONG).show();\n            webView.loadUrl(\"file:\/\/\/android_asset\/lost.html\");\n        }\n\n        @Override\n        public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {\n            super.onReceivedSslError(view, handler, error);\n            handler.cancel();\n        }\n\n        @Override\n        public void onPageStarted(WebView view, String url, Bitmap favicon) {\n            super.onPageStarted(view, url, favicon);\n            progressBar.setVisibility(View.VISIBLE);\n        }\n\n        @Override\n        public void onPageFinished(WebView view, String url) {\n            super.onPageFinished(view, url);\n            progressBar.setVisibility(View.GONE);\n        }\n    }\n\n\n    @Override\n    public boolean onKeyDown(int keyCode, KeyEvent event) {\n\n        if ((keyCode == KeyEvent.KEYCODE_BACK) && webView.canGoBack()) {\n            webView.goBack();\n            return true;\n        }\n        return super.onKeyDown(keyCode, event);\n    }\n}<\/code><\/pre>\n\n\n\n
    To Create the lost.html<\/em> file for the WebView<\/h3>\n\n\n\n
    First, we need to create an assets folder like so:<\/p>\n\n\n\n
    \"\"
    Create Assets Folder in Android Studio<\/figcaption><\/figure>\n\n\n\n
    Next, we create an image folder right inside the assets folder and just put our image there. This image will portray a network failure. I have decided to call my own gone.png. Feel free to use any image of your choice:<\/p>\n\n\n\n
    \"\"\/
    Network failure<\/figcaption><\/figure>\n\n\n\n
    Add the following code to the lost.html<\/em><\/strong> file<\/h3>\n\n\n\n
    <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    <title>Connection Failed<\/title>\n    <style>\n  body {\n  display: inline-block;\n  background: #00AFF9 url('img\/gone.png') center\/cover no-repeat;\n  height: 100vh;\n  margin: 0;\n  color: white;\n}\n\nh1 {\n  margin: .8em 3rem;\n  font: 4em Roboto;\n}\np {\n  display: inline-block;\n  margin: .2em 3rem;\n  font: 2em Roboto;\n}\n <\/style>\n<\/head>\n<body>\n<center>\n    <h2 style=\"text-align:center;padding:5px;color:#d9534f\">The network failed<\/h2>\n    <h2 style=\"text-align:center;padding:5px;color:#d9534f\">Check your network connection and swipe to refresh <\/h2>\n<\/center>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
    See 7 Reasons Why You Should Learn Software Development<\/a><\/p>\n\n\n\n
    Wait, before you run!<\/h3>\n\n\n\n
    You need to add instructions for internet connection in your AndroidManifest.xml file otherwise the webView won’t show. This way we can request permission to use the internet<\/p>\n\n\n\n
    AndroidManifest.xml<\/strong><\/p>\n\n\n\n
     <uses-permission android:name=\"android.permission.INTERNET\"\/><\/code><\/pre>\n\n\n\n
    Congrats! We’re good to go.<\/h3>\n\n\n\n
    \n
    \n
    \n
    \"webview\"<\/figure>\n<\/figure>\n<\/div>\n<\/div>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Watch Video instead. <\/h3>\n\n\n\n
    Also get Github repo link in video description<\/h3>\n\n\n\n
    \n