Welcome Guys, In this WebView Example, we’ll learn how to build web apps using WebView in Android. Android WebView mostly used to display web pages as a part of your app. WebView is a subclass of View. It specially wrote for showing a webpage in your activity.
In this article, we’ll create a sample application, that contains WebView with ProgressBar. We’ll see how to handle back press event as well
Uses of WebView
WebView is very helpful if you want to show some HTML and javascript content in-app. Such as end-user agreement or a user guide.
WebView Sample App
1 Create a new project
Let’s open the AndroidStudio and create a new project with some default template. Now open the android manifest file and add uses permission for internet
<uses-permission android:name="android.permission.INTERNET" />
2. Let’s create WebActivity
Navigate the file menu and create a new activity with a layout file named is WebActivity. Open the layout file and paste the below code. This layout file we are taking web view and progress bar
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout 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" tools:context=".MainActivity"> <ProgressBar android:id="@+id/progressBar" style="?android:attr/progressBarStyleHorizontal" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="0dp" android:minHeight="4dp" android:padding="0dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <WebView android:id="@+id/webView" android:layout_width="0dp" android:layout_height="0dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/progressBar" /> </androidx.constraintlayout.widget.ConstraintLayout>
3. Let’s move to WebActivity
In source file initialized WebChromeClient using below code. webview settings you can changes as uses. One more thing that I do in this block of code is override onReceivedSslError.
@SuppressLint("SetJavaScriptEnabled") private fun initWebView() { webView.settings.javaScriptEnabled = true webView.settings.loadWithOverviewMode = true webView.settings.useWideViewPort = true webView.settings.domStorageEnabled = true webView.webViewClient = object : WebViewClient() { override fun onReceivedSslError(view: WebView?, handler: SslErrorHandler?, error: SslError?) { handler?.proceed() } } }
4. Set WebChromeClient to WebView
In this crome client, we override onProgressChanged() methods. Based on the progress we are showing and hiding progress bar
private fun setWebClient() { webView.webChromeClient = object : WebChromeClient() { override fun onProgressChanged( view: WebView, newProgress: Int ) { super.onProgressChanged(view, newProgress) progressBar.progress = newProgress if (newProgress < MAX_PROGRESS && progressBar.visibility == ProgressBar.GONE) { progressBar.visibility = ProgressBar.VISIBLE } if (newProgress == MAX_PROGRESS) { progressBar.visibility = ProgressBar.GONE } } } }
5. Manage web page history
override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean { // Check if the key event was the Back button and if there's history if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) { webView.goBack() return true } // If it wasn't the Back key or there's no web page history, exit the activity) return super.onKeyDown(keyCode, event) }
6. Create loadUrl function
private fun loadUrl(pageUrl: String) { webView.loadUrl(pageUrl) }
7. Finally, the full source of WebActivity looks like below
This is a full source of this activity, Still, you are missing some things I’ll add source code on below as well
package com.webviewexample import android.annotation.SuppressLint import android.content.Context import android.content.Intent import android.net.http.SslError import android.os.Bundle import android.view.KeyEvent import android.webkit.SslErrorHandler import android.webkit.WebChromeClient import android.webkit.WebView import android.webkit.WebViewClient import android.widget.ProgressBar import androidx.appcompat.app.AppCompatActivity import kotlinx.android.synthetic.main.activity_web.* class WebActivity : AppCompatActivity() { companion object { const val PAGE_URL = "pageUrl" const val MAX_PROGRESS = 100 fun newIntent(context: Context, pageUrl: String): Intent { val intent = Intent(context, WebActivity::class.java) intent.putExtra(PAGE_URL, pageUrl) return intent } } private lateinit var pageUrl: String override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_web) // get pageUrl from String pageUrl = intent.getStringExtra(PAGE_URL) ?: throw IllegalStateException("field $PAGE_URL missing in Intent") initWebView() setWebClient() handlePullToRefresh() loadUrl(pageUrl) } private fun handlePullToRefresh() { } @SuppressLint("SetJavaScriptEnabled") private fun initWebView() { webView.settings.javaScriptEnabled = true webView.settings.loadWithOverviewMode = true webView.settings.useWideViewPort = true webView.settings.domStorageEnabled = true webView.webViewClient = object : WebViewClient() { override fun onReceivedSslError(view: WebView?, handler: SslErrorHandler?, error: SslError?) { handler?.proceed() } } } private fun setWebClient() { webView.webChromeClient = object : WebChromeClient() { override fun onProgressChanged( view: WebView, newProgress: Int ) { super.onProgressChanged(view, newProgress) progressBar.progress = newProgress if (newProgress < MAX_PROGRESS && progressBar.visibility == ProgressBar.GONE) { progressBar.visibility = ProgressBar.VISIBLE } if (newProgress == MAX_PROGRESS) { progressBar.visibility = ProgressBar.GONE } } } } override fun onKeyDown(keyCode: Int, event: KeyEvent?): Boolean { // Check if the key event was the Back button and if there's history if (keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()) { webView.goBack() return true } // If it wasn't the Back key or there's no web page history, exit the activity) return super.onKeyDown(keyCode, event) } private fun loadUrl(pageUrl: String) { webView.loadUrl(pageUrl) } }
Conclusion
All Done. In this android webview example, we learned webview uses, implementation, and manage webpage history, I hope it’s helpful for you, then help me by sharing this post with all your friends
If you have any queries please put your comment below.
Read our android architecture components tutorials series
2 Comments
u should indicate that this is in kotlin in ur title
Sure