This website or its third-party tools use cookies which are necessary to its functioning and required to improve your experience. By clicking the consent button, you agree to allow the site to use, collect and/or store cookies.
Please click the consent button to view this website.
I accept
Deny cookies Go Back

Mobile app tutorials

  • Home
  • About
  • Contact
  • Login
You are here: Home / Kotlin / Kotlin on Android Webview Tutorial

May 25, 2017 by nigel

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.

Print Friendly

Filed Under: Kotlin, Kotlin Webview Tagged With: Android, Android Webview, Kotlin, Kotlin Android Webview, Webview Android

  • Facebook
  • Google+
  • Twitter
  • YouTube




Recent Forum Topics

  • Kotlin Fragments
  • Kotlin Camera2 API
  • HTTP Image Libraries

Recent Posts

  • Installing and running flutter
  • Kotlin Camera2 API MediaRecorder
  • Flutter IntelliJ Tips for Beginners
  • Migrating Fragments to Jetpack Navigation
  • Flutter TabBar

Recent Posts

  • Installing and running flutter
  • Kotlin Camera2 API MediaRecorder
  • Flutter IntelliJ Tips for Beginners
  • Migrating Fragments to Jetpack Navigation
  • Flutter TabBar

Search Form

  • Facebook
  • GitHub
  • Google+
  • Twitter
  • YouTube

© 2022 - WWW.MOBAPPTUTS.COM