Android App in 5 Minutes

Turn Any Website into an Android App Using WebView

Introduction
Have you ever wondered how to turn a website into an Android app? 🤔 If you have a website and want users to access it easily through an app, WebView is the simplest solution! With just a few lines of code, you can display a fully responsive website inside an Android app.

In this blog, I’ll guide you through creating a WebView-based Android app using Kotlin and Jetpack Compose. Let’s dive in! 🚀

What is WebView?
WebView is a built-in Android component that allows developers to display web pages inside an app. It acts like a mini browser, rendering web content seamlessly.

Why Use WebView?
✅ Quick and easy way to turn a website into an app
✅ No need to rebuild everything from scratch
✅ Useful for blogs, e-commerce stores, and business websites
✅ Provides an app-like experience without full native development

Building the WebView App on Android

Step 1: Create a New Android Project
Open Android Studio, create a new project and choose Empty Activity.

Step 2: Add WebView to Your Project
First, add the INTERNET permission to your AndroidManifest.xml:

Also, declare the WebView activity inside :

This allows the app to load web content from the internet.

Step 3: Create WebView in XML
Open your activity_main.xml and add:

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

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Step 4: Load Website in WebView (MainActivity.kt)

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

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val webView = findViewById<WebView>(R.id.webView)
        webView.settings.javaScriptEnabled = true // Enable JavaScript
        webView.settings.cacheMode = WebSettings.LOAD_NO_CACHE
        webView.webViewClient = WebViewClient() // Ensures links open inside WebView

        webView.loadUrl("https://www.example.com") // Replace with your website URL
    }
}

Step 5: Enable Back Navigation

override fun onBackPressed() {
    val webView = findViewById<WebView>(R.id.webView)
    if (webView.canGoBack()) {
        webView.goBack()
    } else {
        super.onBackPressed()
    }
}

Step 6: Extra Features (Optional)
Enable File Uploads (WebChromeClient)
Allow Zooming (webView.settings.setSupportZoom(true))
Handle Downloads (DownloadListener)