web_app_to_android_app.txt
file created: 2024-02-20

Convert web app to android native app with Android Studio.
https://developer.android.com/develop/ui/views/layout/webapps/load-local-content
Create WebView which is the whole screen.


>Assets folder: create folder "assets" in (we put our website files here):
	app/src/main/
	
>Res folder: res folder should already exists if you chose project template with an activity in it.
	app/src/main/res/
	

>Local HTML, CSS & JS files (you can create sub-folders like JS, CSS etc.):
	>Put HTML, CSS and JS files to folder:
		app/src/main/assets

	>Put images to:
		app/src/main/res/drawable
		

>Changes we need to make to HTML file, change CSS and JS file paths to assets folder:
   <link href="/assets/style.css" rel="stylesheet" />
   <script src='/assets/index.js'></script>


>build.gradle.kts should already have some deps, add WebView:
	implementation("androidx.webkit:webkit:1.8.0")



Everything should work as in browser, even custom fonts. Just add fonts folder to assets folder.
Below are MainActivity.kt and activity_main.xml files from my test project.

***MainActivity.kt:

package com.example.mytest

import android.net.Uri
import android.os.Bundle
import android.webkit.WebResourceRequest
import android.webkit.WebResourceResponse
import android.webkit.WebView
import androidx.activity.ComponentActivity
import androidx.annotation.RequiresApi
import androidx.webkit.WebViewAssetLoader
import androidx.webkit.WebViewClientCompat

class MainActivity : ComponentActivity() {

    private lateinit var webView: WebView


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        webView = findViewById(R.id.webview)
        webView.settings.setJavaScriptEnabled(true)



        val assetLoader = WebViewAssetLoader.Builder()
            .addPathHandler("/assets/", WebViewAssetLoader.AssetsPathHandler(this))
            .addPathHandler("/res/", WebViewAssetLoader.ResourcesPathHandler(this))
            .build()
        webView.webViewClient = LocalContentWebViewClient(assetLoader)

        webView.loadUrl("https://appassets.androidplatform.net/assets/index.html")


    }



    private class LocalContentWebViewClient(private val assetLoader: WebViewAssetLoader) : WebViewClientCompat() {
        @RequiresApi(21)
        override fun shouldInterceptRequest(
            view: WebView,
            request: WebResourceRequest
        ): WebResourceResponse? {
            return assetLoader.shouldInterceptRequest(request.url)
        }

        // To support API < 21.
        override fun shouldInterceptRequest(
            view: WebView,
            url: String
        ): WebResourceResponse? {
            return assetLoader.shouldInterceptRequest(Uri.parse(url))
        }
    }

}



***activity_main.xml (this file should be in app/src/main/res/layout):

<?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>