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:

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

Also, declare the WebView activity inside <application>:

<application android:usesCleartextTraffic="true"> </application>

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)

Now, open MainActivity.kt and set up WebView:

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

By default, the back button closes the app. Let’s override it to navigate back in WebView:

override fun onBackPressed() {

val webView = findViewById(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)