AndroidのWebViewアプリを作成する方法【Kotlin】

■はじめに

WebViewだけのアプリを作成する方法を記載します。

環境はKotlinで、Minimum SDKはAndroid8.0としてプロジェクトを作成してください。

■手順

「activity_main.xml」を以下のように書き換えます。

※「TextView」を「WebView」に変更しました。

<?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/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

「styles.xml」を以下のように書き換えます。

※ヘッダー部分を非表示にする処理です。

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">@null</item>
</style>
</resources>

「MainActivity.kt」を以下のように書き換えます。

※WebViewの表示処理です。(Googleの検索トップを表示するようにしています。)

※[パッケージ名]は環境に合わせてください。

package [パッケージ名]
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import kotlinx.android.synthetic.main.activity_main.*
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// JavaScriptを有効化
webView.settings.javaScriptEnabled = true
// Web Storage を有効化
webView.settings.domStorageEnabled = true
webView.webViewClient = object: WebViewClient(){
override fun shouldOverrideUrlLoading(
view: WebView?,
url: String?
): Boolean {
view?.loadUrl(url)
return true
}
}
webView.loadUrl("https://www.google.com/")
}
}

「AndroidManifest.xml」を以下のように書き換えます。

※「android.permission.INTERNET」を追加してWebアクセスを許可しています。

※[パッケージ名]は環境に合わせてください。

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="[パッケージ名]">
<uses-permission android:name="android.permission.INTERNET" />
<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>

■おまけ

上記で実装は完成です。

ただ、シミュレータだとうまく動いてくれません。

※「net::ERR_NAME_NOT_RESOLVED」のエラーが発生しました。

なので、実機で動作確認するようにしてください。