Skip to content
Related Articles

Related Articles

How to Display Webpage Loading Progress Percentage in Android?

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 02 Feb, 2022

In Android, a WebView is used to display a web page. Additionally, web clients are used to connect to a webpage and loading it. While the webpage loads, no real-time information about loading status is provided by the WebView. However, we can fetch the loading progress and display this information. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language. 

So through this article, we will show you how you could display the loading progress of a webpage on Android. Follow the below steps once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Adding permissions in AndroidManifest.xml file

We need to add INTERNET permission to use a WebView.

XML




<?xml version="1.0" encoding="utf-8"?>
    package="org.geeksforgeeks.webpageloadingstatus">
  
    <uses-permission android:name="android.permission.INTERNET"/>
  
    <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.WebPageLoadingStatus">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
  
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
  
</manifest>

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Add a TextView to display the loading status, a WebView to display the webpage, and a Button to start the process.

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <TextView
        android:id="@+id/text_view_1"
        android:layout_width="match_parent"
        android:layout_height="50sp"
        android:layout_marginTop="50sp"
        android:textSize="40sp"
        android:gravity="center"/>
  
    <WebView
        android:id="@+id/web_view_1"
        android:layout_width="match_parent"
        android:layout_height="400sp"
        android:layout_below="@id/text_view_1"
        android:layout_marginTop="30sp"/>
  
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/web_view_1"
        android:layout_marginTop="30sp"
        android:text="load"/>
  
</RelativeLayout>

Step 4: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin




package org.geeksforgeeks.webpageloadingstatus
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebChromeClient
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Button
import android.widget.TextView
import android.widget.Toast
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // Declaring and initializing the textView,
        // WebView and Button from the layout file
        val mTextView = findViewById<TextView>(R.id.text_view_1)
        val mWebView = findViewById<WebView>(R.id.web_view_1)
        val mButton = findViewById<Button>(R.id.button_1)
  
        // When button is clicked
        mButton.setOnClickListener {
            // Chrome client is called 
            // to fetch the loading progress
            mWebView.webChromeClient = object : WebChromeClient() {
                override fun onProgressChanged(view: WebView?, newProgress: Int) {
                    mTextView.text = "Loading: $newProgress%"
                    if(newProgress == 100){
                        mTextView.text = "Loaded!"
                    }
                }
            }
            // Loading the URL
            mWebView.loadUrl("https://www.geeksforgeeks.org")
        }
    }
}

Output:

You can see the loading progress of the webpage.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!