Webview Android: How to show webview url and html content in Android using Kotlin.

Last updated Dec 16, 2021

In this article, we will see how to create a webview and load  url and html content by click on Button in Android Studio by using Kotlin Language.
 

WebView:
Android WebView is a view component that shows the application's web pages. The web pages are displayed using the WebKit engine. WebView's loadUrl() and loadData() functions are used to load and show web pages.
 

Implementation:

Hello, Developers!

 

Create a new Project in android studio.

Go to File > New > New Project > Empty Activity > Next > Enter Name > Select Language Kotlin > Finish

 

Go to activity_web_view.xml file and add the following code

 

<LinearLayout xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    android:background="#DDC9C8"
    tools:context=".WebViewActivity">

            android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView"
        android:layout_weight="1.03" />
            android:id="@+id/show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Show WebView"
        >

</LinearLayout>

Add Internet Permission in AndroidManifest.xml file by add this code

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

 

Open WebViewActivity.kt file and create instance of views by id which is available in activity_web_view.xml file.

val webview = findViewById(R.id.webView)
val show = findViewById(R.id.show)

 

There are different ways to load the web page in WebView such as:
> Load the HTML content as a string in the class (Add the following code in WebViewActivity.kt file).

 

val htmlData: String =  " val mimeType: String = "text/html"
val utfType: String = "UTF-8"
webview.loadData(htmlData,mimeType,utfType)


Create a variable url and paste the website link.

val url = "https://rrtutors.com/"


 After this, set onCLickEvent on Button and add the following code:

show.setOnClickListener{
            webview.loadUrl(url)

        }

Run the app on emulator or real device, you will get the output as following:

 Output of html content
 

Webview Html example output


Output of Url Link in Webview

Complete Source Code of Android Webview Example  

activity_web_view.xml file

<LinearLayout xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    android:background="#DDC9C8"
    tools:context=".WebView.WebViewActivity">

            android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView"
        android:layout_weight="1.03" />
            android:id="@+id/show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Show WebView"
        >
</LinearLayout>

 

WebViewActivity.kt file

Hello, Developers!

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebView
import android.widget.Button
import com.nishajain.kotinexamples.R

class WebViewActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_web_view)
        val webview = findViewById(R.id.webView)
        val show = findViewById(R.id.show)

 

        // Load Html content as a string

 //        val htmlData: String = "

     "

 

 


//        val mimeType: String = "text/html"
//        val utfType: String = "UTF-8"
//        webview.loadData(htmlData,mimeType,utfType)
 

 

 // Load url data
        val url = "https://rrtutors.com/"
        show.setOnClickListener{
            webview.loadUrl(url)
        }

    }
}

 

 

Conclusion: We have covered how to load Web urls in Android webview and also load html content inside webview using kotlin code

<LinearLayout xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp"
    android:background="#DDC9C8"
    tools:context=".WebView.WebViewActivity">

            android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView"
        android:layout_weight="1.03" />
            android:id="@+id/show"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="Show WebView"
        >
</LinearLayout>

 

WebViewActivity.kt file

Hello, Developers!

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebView
import android.widget.Button
import com.nishajain.kotinexamples.R

class WebViewActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_web_view)
        val webview = findViewById(R.id.webView)
        val show = findViewById(R.id.show)

 

        // Load Html content as a string

 //        val htmlData: String = "

      "

 

 


//        val mimeType: String = "text/html"
//        val utfType: String = "UTF-8"
//        webview.loadData(htmlData,mimeType,utfType)
 

 

 // Load url data
        val url = "https://rrtutors.com/"
        show.setOnClickListener{
            webview.loadUrl(url)
        }

    }
}
 

 

Conclusion: We have covered how to load Web urls in Android webview and also load html content inside webview using kotlin code

-->
Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

2647 Views
Projects By category
Categories