Development | SUMAN

Converting Your Web App to an Android App Using WebView

Fri, 27 Mar 2026 00:00:00 +0000

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:

USB Method: Copy the APK to your phone and install it directly.
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

web app development

Fri, 27 Mar 2026 00:00:00 +0000

Web App

You’ve already built a solid Web + GIS dashboard system. Now we’ll upgrade it into a full ecosystem:

✅ Android App (Data Control Panel) ✅ Realtime Database (replace Google Sheets) ✅ Web App (auto-sync updates)

🧠 System Architecture (Upgraded)

🔄 Current (Your Setup) Google Sheet → Web App (Vercel) → Map UI

🚀 New System (Recommended) Android App → Firebase / Supabase DB → Web App (Vercel)

✔ No more manual Google Sheet editing ✔ Real-time sync ✔ Mobile control panel ✔ Scalable + faster

⚙️ STEP 1: Choose Backend (VERY IMPORTANT)

🥇 Best Option: Firebase (Recommended)

Realtime database
Easy Android integration
Free tier enough

Alternative:

Supabase (PostgreSQL)
Node.js API + MongoDB (more control)

👉 I’ll proceed with Firebase Firestore (best for your case)

🔥 STEP 2: Database Structure

Replace your Excel with this structure:

Collection: upazila_progress { “id”: “123”, “division”: “Dhaka”, “district”: “Gazipur”, “upazila”: “Kaliganj”, “status”: “done”, // done | ongoing | todo “updated_at”: “2026-03-24T10:00:00” }

🌐 STEP 3: Update Your Web App (IMPORTANT)

Replace Google Sheets API with Firebase fetch.

Install Firebase in your web project npm install firebase

Firebase config (JS) import { initializeApp } from “firebase/app”; import { getFirestore, collection, getDocs } from “firebase/firestore”;

const firebaseConfig = { apiKey: “XXXX”, authDomain: “XXXX”, projectId: “XXXX”, };

const app = initializeApp(firebaseConfig); const db = getFirestore(app);

export async function fetchUpazilaData() { const querySnapshot = await getDocs(collection(db, “upazila_progress”)); return querySnapshot.docs.map(doc => doc.data()); }

👉 Replace your Google Sheet logic with this.

📱 STEP 4: Android App (Core Part)

We build a Minimal Admin App

Features:

Upazila list
Status change (Done / Ongoing / ToDo)
Search
Dashboard summary

🏗 Tech Stack

Kotlin
Firebase Firestore
Jetpack Compose (or XML if you prefer)

📲 Android UI Structure Screens:

Dashboard
Upazila List
Edit Status

🧩 Example Code

Firebase Setup (Android) val db = FirebaseFirestore.getInstance()
Fetch Data fun getUpazilas(onResult: (List) -> Unit) { db.collection(“upazila_progress”) .get() .addOnSuccessListener { result -> val list = result.map { doc -> Upazila( id = doc.id, name = doc.getString(“upazila”) ?: “”, status = doc.getString(“status”) ?: “todo” ) } onResult(list) } }
Update Status (🔥 KEY PART) fun updateStatus(id: String, newStatus: String) { db.collection(“upazila_progress”) .document(id) .update(“status”, newStatus) }

👉 This is what replaces Google Sheets editing.

Simple UI (XML idea)

🔄 STEP 5: Real-Time Sync (Important Upgrade)

Instead of getDocs(), use listener:

Web + Android both onSnapshot(collection(db, “upazila_progress”), (snapshot) => { // auto update map });

👉 Now: ✔ Android change → instantly updates web map ✔ No refresh needed

📊 STEP 6: Dashboard Logic (Same as Web)

Count status:

val done = list.count { it.status == “done” } val ongoing = list.count { it.status == “ongoing” } val todo = list.count { it.status == “todo” }

🎯 FINAL RESULT Android App

✔ Change status ✔ View progress ✔ Control system

Web App

✔ Map auto-updates ✔ No Google Sheets ✔ Real-time sync

🚀 OPTIONAL ADVANCED FEATURES

If you want next-level:

🔐 Login system (Admin only) 📍 GPS tagging per update 📸 Upload field images 📶 Offline sync (Firestore supports) 📊 Analytics dashboard

⚠️ Important Advice

👉 Do NOT keep Google Sheets now 👉 Firebase = faster + scalable 👉 Your current map code can stay mostly same

🧱 STEP 1: Add Firebase to Your Project

Go to: https://console.firebase.google.com

→ Create project: landzoning

Then:

Enable: ✅ Firestore Database ✅ (Optional) Authentication later

🔑 Get Config

You’ll get something like:

const firebaseConfig = { apiKey: “XXXX”, authDomain: “XXXX”, projectId: “XXXX”, };

📦 STEP 2: Modify Your GitHub Code

In your repo 👉 Landzoning-main

Install Firebase npm install firebase
Create New File 📁 /src/firebase.js import { initializeApp } from “firebase/app”; import { getFirestore } from “firebase/firestore”;

const firebaseConfig = { apiKey: “YOUR_KEY”, authDomain: “YOUR_DOMAIN”, projectId: “YOUR_PROJECT_ID”, };

const app = initializeApp(firebaseConfig); export const db = getFirestore(app);

🔁 STEP 3: Replace Google Sheet Logic

Find your current file where you load Excel/Sheet data (Probably something like fetchData.js, App.js, or map.js)

❌ REMOVE (Old) // Google Sheet / XLSX loading fetch(“bdupazila.xlsx”)

✅ ADD (New Firebase Fetch) import { collection, onSnapshot } from “firebase/firestore”; import { db } from “./firebase”;

export function listenToUpazilaData(callback) { const unsub = onSnapshot(collection(db, “upazila_progress”), (snapshot) => { const data = snapshot.docs.map(doc => ({ id: doc.id, …doc.data() })); callback(data); });

return unsub; }

🗺 STEP 4: Connect with Your Map

Where you currently update map colors:

Replace your data source with:

listenToUpazilaData((data) => { updateMap(data); // your existing function updateStats(data); // your dashboard logic });

🎨 STEP 5: Keep Your Map Styling (NO CHANGE)

Your existing:

Leaflet map
GeoJSON boundaries
Color logic

👉 KEEP EVERYTHING SAME 👉 Only change data source

📊 STEP 6: Status Color Mapping (Ensure This)

function getColor(status) { switch (status) { case “done”: return “#22c55e”; // green case “ongoing”: return “#facc15”; // yellow default: return “#9ca3af”; // gray } }

🧪 STEP 7: Upload Initial Data to Firebase

Go to Firestore → Collection: upazila_progress

Add documents manually OR use script:

import { collection, addDoc } from “firebase/firestore”;

const data = [ { upazila: “Kaliganj”, status: “done” }, ];

data.forEach(async (item) => { await addDoc(collection(db, “upazila_progress”), item); }); 🔄 RESULT Now your system becomes: Android App → Firebase → Web Map (Auto Update)

✔ No refresh needed ✔ Real-time updates ✔ Centralized control

📱 NEXT (Android Integration)

Your Android app will:

db.collection(“upazila_progress”) .document(id) .update(“status”, “done”)

👉 Web updates instantly 🔥

🚀 BONUS: Performance Upgrade

Use indexing:

Firestore → Indexes → Add:

status ASC district ASC ⚠️ Common Mistakes

❌ Using getDocs() (not realtime) ✅ Use onSnapshot()

❌ Keeping Excel logic ✅ Fully remove it