Android WebView loads webpage html files to display loading progress

1. View Binding

The view binding feature makes it easier for you to write code that interacts with views. When view binding is enabled in a module, a binding class is generated for each XML layout file in the module. Instances of the binding class contain direct references to all views with IDs in the corresponding layout.

View binding replaces findViewById in most cases.

View binding functionality can be enabled per module. To enable view binding in a module, add the viewBinding element to its build.gradle file, as shown in the following example:

    viewBinding {
        enabled = true
    }

2. Newly load WebViewActivity

Create a new WebViewActivity to load the web page html file

class WebViewActivity : AppCompatActivity() {
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }
}

The page xml file activity_web_view is as follows:

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

    <WebView
        android:id="@+id/web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:background="@null"
        android:indeterminateOnly="false"
        android:max="100"
        app:layout_constraintTop_toTopOf="parent"
        android:progressDrawable="@drawable/progress_bar_horizontal"/>

</androidx.constraintlayout.widget.ConstraintLayout>

The progress bar progress_bar_horizontal.xml style is as follows:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:id="@android:id/background"
        android:drawable="@color/white"/>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <gradient
                    android:angle="270"
                    android:centerColor="#00923F"
                    android:centerY="0.75"
                    android:endColor="#888C98"
                    android:startColor="#00923F" />
            </shape>
        </clip>
    </item>

</layer-list>

3. Use view binding in Activity

Perform the following steps in the Activity's onCreate() method:

1. Call the static inflate() method contained in the generated binding class. This action creates an instance of the binding class for use by the Activity.
2. Obtain a reference to the root view by calling the getRoot() method or using Kotlin property syntax.
3. Pass the root view to setContentView() to make it the active view on the screen.

class WebViewActivity : AppCompatActivity() {
    private lateinit var mViewBinding: ActivityWebViewBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        mViewBinding = ActivityWebViewBinding.inflate(layoutInflater)

        setContentView(mViewBinding.root)
        
    }
}

4. Set WebView

class WebViewActivity : AppCompatActivity() {
    private lateinit var mViewBinding: ActivityWebViewBinding
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        mViewBinding = ActivityWebViewBinding.inflate(layoutInflater)

        setContentView(mViewBinding.root)

        val webSettings = mViewBinding.webView.settings
        webSettings.javaScriptEnabled = true
        webSettings.domStorageEnabled = true //支持webView从localStorage中读取数据

        mViewBinding.webView.webChromeClient = object : WebChromeClient() {  // 设置加载进度
            override fun onProgressChanged(view: WebView?, newProgress: Int) {
                mViewBinding.progressBar.progress = newProgress
                if (newProgress == 100) {
                    mViewBinding.progressBar.visibility = View.GONE
                } else {
                    mViewBinding.progressBar.visibility = View.VISIBLE
                }
                super.onProgressChanged(view, newProgress)

            }
        }

        mViewBinding.webView.loadUrl("https://www.baidu.com");
    }
}

Add network permissions to the manifest file

    <uses-permission android:name="android.permission.INTERNET" />

Run to see the loading progress bar