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

Android | SUMAN