Read about Kotlin Webview Back Forward Navigation Button Android Tutorial Example.
In this example, You will learn how to implement back and forward navigation buttons in your android web view.
Generally, when you are displaying any full web site where user need to navigate to many pages, this back and forward buttons are necessary for smooth user experience.
We will create separate two buttons which will act as back and forward respectively.
First of all, see the below youtube content which showcases the output of this example.
Step 1. Fresh Kotlin Project
Go to your android studio and create a new project. Here, select empty activity as a default activity.
Now, you also need to select Kotlin as a primary language for the whole app.
Step 2. Making the Permission
To load URL in web view, we need to use internet of the user’s android device.
For this, an internet permission is required. Go to AndroidManifest.xml file and add the following line
<uses-permission android:name="android.permission.INTERNET" />
Internet permission is not harmful to the user’s privacy so we do need to ask for runtime permission in this example.
Step 3. Changing the Main XML
Your new project should have a main XML file, activity_main.xml file. Add the below source lines in this activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btnprev"
android:text="Previous"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btnnext"
android:text="Next"/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<ProgressBar
android:id="@+id/progressBar"
style="?android:attr/progressBarStyleLarge"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="@+id/webView"
android:layout_marginTop="100dp" />
</RelativeLayout>
</LinearLayout>
Above XML file mainly contains two buttons, one webview and one progress bar.
One button will act as a back button and another will as a forward button.
A web view will hold the web site and a progress bar will indicate the loading process until the URL has finished it’s loading successfully.
Step 4. Writing Main kotlin
Now let us write the Main Kotlin file. There is a file named MainActivity.kt
In this MainActivity.kt file, add the below source code block.
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Button
import android.widget.ProgressBar
class MainActivity : AppCompatActivity() {
internal var btnnext: Button? = null
internal var btnpre: Button? = null
internal var progressBar: ProgressBar? = null
internal var url = "http://google.com"
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
var wv: WebView? = null
btnnext = findViewById(R.id.btnnext) as Button
btnpre = findViewById(R.id.btnprev) as Button
wv = findViewById(R.id.webView) as WebView
progressBar = findViewById(R.id.progressBar) as ProgressBar
wv.webViewClient = myWebClient()
wv.settings.javaScriptEnabled = true
wv.settings.builtInZoomControls = true
wv.settings.displayZoomControls = false
wv.loadUrl(url)
btnpre!!.setOnClickListener {
// TODO Auto-generated method stub
if (wv.canGoBack()) {
wv.goBack()
}
}
btnnext!!.setOnClickListener {
// TODO Auto-generated method stub
if (wv.canGoForward()) {
wv.goForward()
}
}
}
inner class myWebClient : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
progressBar!!.visibility = View.VISIBLE
view.loadUrl(url)
return true
}
override fun onPageFinished(view: WebView, url: String) {
super.onPageFinished(view, url)
progressBar!!.visibility = View.GONE
}
}
}
Deep Reading of Main Class
First of all, focus on the below code
internal var btnnext: Button? = null
internal var btnpre: Button? = null
internal var progressBar: ProgressBar? = null
internal var url = "http://google.com"
First two lines are making the objects of the button class.
Third line is for the pogress bar object.
Last line is defining one variable. This variable has a value a google url. We will use this variable to load the google URL in the web view.
Now see the following coding lines
var wv: WebView? = null
btnnext = findViewById(R.id.btnnext) as Button
btnpre = findViewById(R.id.btnprev) as Button
wv = findViewById(R.id.webView) as WebView
progressBar = findViewById(R.id.progressBar) as ProgressBar
Here, first line is the object of the web view class.
Second and third lines are finding the views by Id of two buttons.
Fourth line is also using findViewById() method for the web view and fifth line is also using this method for the progress bar.
Now let us concentrate on the following code
wv.webViewClient = myWebClient()
wv.settings.javaScriptEnabled = true
wv.settings.builtInZoomControls = true
wv.settings.displayZoomControls = false
wv.loadUrl(url)
First line is setting the web view client to the object of the web view.
Second, third and fourth lines are implementing some basic settings to our web view.
These settings are like enabling the javascript in the web view, enabling the built in zoom controlles and to hide the zoom controls for the web view.
Last line is initiating the loading of the URL in the web view.
Let us read the following source codes
btnpre!!.setOnClickListener {
// TODO Auto-generated method stub
if (wv.canGoBack()) {
wv.goBack()
}
}
Compiler will execute the above lines when the user clicks the previous button.
It will first check whether web view can go back or not. If it can, compiler will simply execute the back step for web view and if not, it will do not do anything.
Below is the code for forward or next button,
btnnext!!.setOnClickListener {
// TODO Auto-generated method stub
if (wv.canGoForward()) {
wv.goForward()
}
}
When the user clicks the next button, compiler will look into above snippet.
It will check if web view can be go forward or not. If it can, compiler will take the web view to the one forward step.
Now, check the following source lines
inner class myWebClient : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
progressBar!!.visibility = View.VISIBLE
view.loadUrl(url)
return true
}
This code block is telling the compiler to run it’s lines whenever web view is loading any URL.
Whenever the web view loading any URL, compiler will first show the progress bar to the user so that user can understand that he/she needs to wait for loading process.
When the web view is done with the URL loading process, compiler will run the following code block
override fun onPageFinished(view: WebView, url: String) {
super.onPageFinished(view, url)
progressBar!!.visibility = View.GONE
}
Compiler will first call the super.onPageFinished() method and then it will set the visibility of the progress bar as the GONE.
That is all for now folks !
Download Code From Github
https://github.com/demonuts/Kotlin-webview-back-forward-navigation