Kotlin on Android Webview Tutorial

 
The kotlin on android webview tutorial describes how to display a webpage in a new activity using the kotlin programming language.

Episodes

1. Webview introduction
2. Action ToolBar
3. Navigation Buttons
4. Kotlin ArrayList
5. Web history DialogFragment
6. Dialog Interface
7. RecyclerView
8. RecyclerView OnClick

Steps

Create a new android project.
Add INTERNET permission to the AndroidManifest file

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

 
Add string items for the EditText & Button views

<resources>
    <string name="app_name">KotlinWebview</string>
    <string name="uri_default">www.mobapptuts.com</string>
    <string name="send_button">Send</string>
</resources>

Remove the hello world text view.
Add an EditText view and a button, which will be placed next to the EditText view.

<?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"
    android:orientation="vertical"
    tools:context="com.mobapptuts.kotlinwebview.MainActivity">

    <LinearLayout
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/uriText"
            android:text="@string/uri_default"
            android:layout_weight=".70"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
        <Button
            android:id="@+id/sendButton"
            android:text="@string/send_button"
            android:layout_weight=".30"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <WebView
        android:id="@+id/webview"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </WebView>
</LinearLayout>

Inside the main activity create a method which will:

• Get the Uri from the Editable
• Create an intent with the action ACTION_VIEW
• Start an activity with the above intent

Create a function for assembling the entire Uri

    @Throws(UnsupportedOperationException::class)
    fun buildUri(authority: String): Uri {
        val builder = Uri.Builder()
        builder.scheme("https")
                .authority(authority)
        return builder.build()
    }

Create a function to the Uri and pass it into an Intent. Then start a new activity with the intent.

    fun loadWebpage() {
        webview.loadUrl("")
        val uri: Uri
        try {
            uri = buildUri(uriText.text.toString())
            webview.loadUrl(uri.toString())
        } catch(e: UnsupportedOperationException) {
            e.printStackTrace()
        }
    }

Inside the onCreate function set a listener to the button. Then call the loadWebpage function from inside the listener.

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        sendButton.setOnClickListener {
            loadWebpage()
        }
    }

 
Run the code and check if the web page is being loaded.

Get the code

The code has been tagged under kotlin-webview-basic in the github repo https://github.com/mobapptuts/kotlin-webview.git
 

 

Conclusion

In the android kotlin webview tutorial, we used a LinearLayout to contain an EditView and a Button view. We set some text to the EditView which represented a default, Uri.
In the kotlin source code, we attached an on click listener to the button. And then created a new function which retrieved the Editable form the EditText in Uri form. Added a new intent with the action ACTION_VIEW. And then started a new activity with the intent.

In this Kotlin on Android tutorial, we demonstrated the differences between android. Which included throwing and catching exceptions which note is unchecked in kotlin. And the kotlin extension which for views.

This is a short and simple Kotlin on Android tutorial which demonstrates the simplicity in creating a WebView in Android activity.

The next kotlin on android development tutorial describes how to create your own custom action toolbar.