Converting Web App to an Android App Using WebView

DEPLOY YOUR REACT APP (Vercel)

✅ Build your project (LOCAL) 📂 Open your React project folder G:\lzproject\lzapp-v2 🔹 Open Terminal in this folder

👉 In VS Code:

Terminal → New Terminal 🔹 Run this command: npm run build ✅ Expected result:

You will see a new folder:

dist/

👉 This is your production build

🌐 Deploy to Vercel 🔹 Step 1 — Open Vercel

Go to: 👉 https://vercel.com

🔹 Step 2 — Login

Use:

GitHub (recommended) OR Google 🔹 Step 3 — Import Project

Click:

Add New → Project 🔹 Step 4 — Select your repo

If your project is already on GitHub:

👉 Select:

lzapp-v2 🔹 Step 5 — Configure

Vercel auto-detects Vite 👍

Check:

Framework: Vite Build Command: npm run build Output Directory: dist

👉 Click:

Deploy ⏳ Wait 1–2 minutes ✅ STEP 6 — Get your URL

After deploy, you’ll get:

https://your-project-name.vercel.app

✅ Any update- TEST BEFORE DEPLOY

Run locally:

npm run dev

👉 Open: http://localhost:5173

THEN DEPLOY AGAIN

npm run build

Every time you change UI:

1. Edit React (App.jsx / CSS)
2. npm run build
3. Push or redeploy Vercel
4. Open Android app → updated automatically, See updated UI

🚀 1. Install Android Studio (Setup)

🔹 Download & Install

Head over to the official Android Developer website: https://developer.android.com/studio

Download and install the latest version of Android Studio. The installation process is straightforward and includes everything you need to get started.

🔹 During Setup

When prompted during installation, make sure to select:

• ✅ Standard installation
• ✅ Install Android SDK
• ✅ Install Emulator (optional, but useful for testing)

🔹 After Installation

Launch Android Studio and click “New Project” to begin.

📱 2. Create New Android Project

In the New Project wizard, select:

• Template: Empty Views Activity
• Language: Java (simpler for beginners)
• Minimum SDK: API 21 (Android 5.0) - this covers about 95% of active Android devices

Fill in the project details:

• Name: LzApp
• Package: com.yourname.lzapp

Click Finish and let Android Studio set up your project.

🌐 3. Add Internet Permission

Your web app will need internet access, so we need to add the necessary permission.

Navigate to: app > src > main > AndroidManifest.xml

Add this line just above the <application> tag:

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

🌍 4. Add WebView in Layout

Now let’s set up the user interface. Open: res > layout > activity_main.xml

Replace the entire contents with:

<?xml version="1.0" encoding="utf-8"?>
<WebView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

This creates a full-screen WebView that will display your web app.

⚙️ 5. Load Your Vercel App in WebView

Open: MainActivity.java

Replace the entire file with:

package com.yourname.landzoning;

import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        webView = new WebView(this);
        setContentView(webView);

        webView.setWebViewClient(new WebViewClient());

        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDomStorageEnabled(true);

        webView.loadUrl("https://your-vercel-app.vercel.app");
    }
}

Important: Replace https://your-vercel-app.vercel.app with your actual deployed Vercel URL.

🔙 6. Handle Back Button (IMPORTANT)

To provide a native app experience, we need to handle the back button properly. Add this method to your MainActivity.java:

@Override
public void onBackPressed() {
    if (webView.canGoBack()) {
        webView.goBack();
    } else {
        super.onBackPressed();
    }
}

This allows users to navigate back through your web app’s history before exiting the app.

⚡ 7. Improve WebView (Production Ready Basics)

Let’s enhance the WebView settings for better performance and user experience. Add these lines after the existing settings in onCreate():

webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setBuiltInZoomControls(true);
webView.getSettings().setDisplayZoomControls(false);

These settings ensure your web app displays properly on different screen sizes and provides zoom controls.

🎬 8. Add Splash Screen

A splash screen provides a professional first impression. Let’s add one.

Step 1: Create splash layout

Create a new file: res > layout > splash.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#ffffff"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="Land Zoning BD"
        android:textSize="24sp"
        android:textStyle="bold"
        android:textColor="#000"/>

</LinearLayout>

Step 2: Create SplashActivity

Right-click on your package → New → Activity → Empty Activity Name: SplashActivity

Replace the code with:

package com.yourname.landzoning;

import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import androidx.appcompat.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.splash);

        new Handler().postDelayed(() -> {
            startActivity(new Intent(SplashActivity.this, MainActivity.class));
            finish();
        }, 2000); // 2 seconds
    }
}

Step 3: Make Splash First Screen

In AndroidManifest.xml, modify the activity declarations:

<activity android:name=".SplashActivity">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

<activity android:name=".MainActivity" />

📦 9. Build APK (Production)

🔹 Build Debug APK

From the top menu: Build → Build APK(s)

After the build completes, click Locate to find your APK at: app/build/outputs/apk/debug/app-debug.apk

🔐 10. Build Release APK (IMPORTANT)

For distribution, you need a signed release APK.

Go to: Build → Generate Signed Bundle / APK

Choose:

• APK
• Create new keystore

Fill in:

• Password
• Key alias
• Validity: 25 years

Then:

• Select release
• Finish

Your signed APK will be at: app-release.apk

🚀 11. Install on Phone

You can install the APK in two ways:

1. USB Method: Copy the APK to your phone and install it directly.
2. ADB Method: Connect your phone via USB and run:

   adb install app-release.apk
   

⚠️ Important Tips for Your GIS App

Since you’re working with Leaflet, Firebase, and Vercel:

🔹 Security & Performance

• ✅ Ensure HTTPS (Vercel handles this automatically)
• ❌ Avoid mixed content (no HTTP resources in HTTPS pages)

🔹 Map Performance Optimization

Add these settings for better map rendering:

webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setAllowContentAccess(true);

🎯 Next Steps

Once you have the basic WebView wrapper working, consider these enhancements:

• Offline Caching: Implement PWA features for offline functionality
• Native Loading Indicators: Add progress bars and loading states
• Pull-to-Refresh: Implement swipe-to-refresh functionality
• Push Notifications: Integrate Firebase Cloud Messaging
• Custom Toolbar: Add navigation controls that feel native
• Play Store Release: Prepare your app for Google Play Store distribution

⚠️ If Build Issues Occur

Sometimes after moving, you may see errors like:

• Gradle path issue
• SDK not found

Fix:

🔹 1. Re-sync Gradle

• File → Sync Project with Gradle Files

🔹 2. Clean & Rebuild

• Build → Clean Project
• Build → Rebuild Project

🔹 3. Check SDK Path

• File → Project Structure → SDK Location

Make sure it points to something like:

C:\Users\Dell\AppData\Local\Android\Sdk

👉 Summary

You’re essentially creating a native Android wrapper around your web application:

React App (Vercel) → Android WebView Wrapper → APK App