Webview is used in android to either load HTML data format in an application or loads an existing URL in an app such that the user will not have to type the domain URL in the browser.
Webviews in android helps to convert the web application to an android app without coding the whole functionality again. As long as a website is responsive or has a mobile version, it can be converted into an android application through the use of a webview
Webviews are a faster way of sharing a website application to users since they will be no need for updates since all the data is as it is in the website version
In this article, we shall cover how to use webview to load a URL into an app and also display HTML data into an app
How to load HTML data into an app using WebView
You will be required to define the HTML data as a variable which is a string in android
Next, you will need to define the type of data supported, in this case, the supported data is either text or HTML
You will also need to define the UTF type which is UTF-8
Finally, you will need to load data into the webview
An example is as follows
In the activity_main.xml, initialize the webview as follows
<WebView
android:id="@+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
The full activity_main.xml code is as shown
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">
<WebView
android:id="@+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
In the MainActivity.kt, the html string, data type supported and UTF type is added as follows
val websitedata: String = "<html><body><p>Test HTML data in an app</p></body></html>"
val mimeType: String = "text/html"
val utfType: String = "UTF-8"
webView.loadData(websitedata,mimeType,utfType)
The full code for MainActivity.kt is as follows
package com.example.webviewapplication
import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
class MainActivity : AppCompatActivity() {
private val webView: WebView? = null
@SuppressLint("SetJavaScriptEnabled")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val webView=findViewById(R.id.webView) as WebView;
val websitedata: String = "<html><body><p>Test HTML data in an app</p></body></html>"
val mimeType: String = "text/html"
val utfType: String = "UTF-8"
webView.loadData(websitedata,mimeType,utfType)
}
}
Run the application and you will notice the data in the paragraph will be displayed in your app
How to Load Website URL in android using Webview
For this feature to work, you have to ensure you have allowed internet connection since the URL must be accessed through internet connection
First, the activity_main.xml code will remain as we have defined above
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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">
<WebView
android:id="@+id/webView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"/>
</LinearLayout>
Next, allow internet connection by setting the internet permission in the android manifest file
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
The code for manifest file will be as shown
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.webviewapplication">
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
<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.WebViewApplication">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
In the MainActivity.kt, define the URL which you want to access using the app using the code below
webView.webViewClient = WebViewClient()
webView.loadUrl("https://www.solutionspacenet.com")
val webSettings = webView.settings
webSettings.javaScriptEnabled = true
You will also need to set what happens when the user clicks the back button such that the webview can go back to the previous activity other than exiting the app as follows
override fun onBackPressed() {
if (webView!!.canGoBack()) {
webView.goBack()
} else {
super.onBackPressed()
}
}
The full code for MainActivity.kt for loading URL using webview is as follows
package com.example.webviewapplication
import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
class MainActivity : AppCompatActivity() {
private val webView: WebView? = null
@SuppressLint("SetJavaScriptEnabled")
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val webView=findViewById(R.id.webView) as WebView;
webView.webViewClient = WebViewClient()
webView.loadUrl("https://www.solutionspacenet.com")
val webSettings = webView.settings
webSettings.javaScriptEnabled = true
}
override fun onBackPressed() {
if (webView!!.canGoBack()) {
webView.goBack()
} else {
super.onBackPressed()
}
}
}
That’s it, Run your application and open the app, the URL defined in the webview loadurl method is opened instantly as long as you are connected to the internet
The discussion we have had is basically how to convert a web application into an android using webview in kotlin language. Hope you have followed closely. Thanks
