Como utilizar uma WebView com Kotlin
Android Kotlin XML

Como utilizar uma WebView com Kotlin





Nesse tutorial vou descrever como utilizar uma WebView com Kotlin para que possa ser exibida uma página na internet como se fosse o seu aplicativo.

Então vamos começar a fazer a programação para poder exibir a página na internet em seu aplicativo.

Como utilizar uma WebView com Kotlin

Primeiramente no arquivo xml vamos colocar nossa webview como no código descrito a seguir.

activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/wvMain"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Logo após colocar a nossa webview no nosso layout vamos criar uma nova classe com o nome de WebViewImp contendo seguinte código para que nosso aplicativo não saia e peça para um browser acessar a internet, assim bloqueando esta função.





WebViewImp

package br.com.uware.webview

import android.content.Intent
import android.webkit.WebView
import android.app.Activity
import android.net.Uri
import android.webkit.WebViewClient


class WebViewImp(activity: Activity) : WebViewClient() {

    private var activity: Activity? = null

    init {
        this.activity = activity
    }
    override fun shouldOverrideUrlLoading(webView: WebView, url: String): Boolean {
        if (url.contains("https://uware.com.br")) return false
        val intent = Intent(Intent.ACTION_VIEW, Uri.parse(url))
        activity!!.startActivity(intent)
        return true
    }
}

Então vamos carregar a página na MainActivity e exibi-la fazendo que o botão de back volte para a página naterior ficando assim com o seguinte código.

MainActivity

package br.com.uware.webview

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

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

        val webViewImp = WebViewImp(this)
        wvMain.webViewClient = webViewImp

        wvMain.loadUrl("https://uware.com.br")

        // Deixando funcionar o javascript na página
        val webSettings = wvMain.settings
        webSettings.javaScriptEnabled = true

    }
    override fun onBackPressed() {
            wvMain.goBack()
    }
}

Não podemos esquecer de colocar a permissão em nosso manifest para poder utilizar a internet então em nosso manifeste deve conter a seguinte linha logo após a parte que declara o manifest antes do application.





AndroidManifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="br.com.uware.webview">

    <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/AppTheme">
        <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>

Então também vamos retirar a ActionBar do aplicativo para que fique com um visual mais bonito editando o arquivo styles da pasta res.

styles

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Enfim espero poder ter ajudado a fazer com que sua página na internet vire um aplicativo.

Logo depois de ler este tutorial veja também Como adicionar política de privacidade no aplicativo





Rodrigo Leutz
Desenvolvedor Web e Android ( Kotlin e Java )
https://uware.com.br