📱 Device Features · Lesson 39
WebView (App में Website)
WebView कब use करें
- Help pages, privacy policy, terms — जो content पहले से आपकी website पर है।
- बार-बार बदलने वाली screen जिसे server पर update करना आसान हो (offers, blog)।
- Hybrid apps: native navigation + कुछ web screens (school ERPs और portals में आम)।
Basic WebView
XML + Kotlin
<!-- AndroidManifest.xml -->
<uses-permission android:name="android.permission.INTERNET" />
// Activity
binding.webView.settings.javaScriptEnabled = true
binding.webView.webViewClient = WebViewClient() // keep links inside the app
binding.webView.loadUrl("https://codingeasily.in/")
// local HTML from assets/ folder
binding.webView.loadUrl("file:///android_asset/privacy.html")
// HTML string
binding.webView.loadDataWithBaseURL(null, "<h1>Hello</h1><p>From Kotlin</p>", "text/html", "UTF-8", null)WebViewClient और progress
XML – res/layout/fragment_help.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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" />
<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true" />
</FrameLayout>WebView में Back button
असली example: Help screen
Kotlin – ui/help/HelpFragment.kt (complete)
package com.codingeasily.studentdiary.ui.help
import android.annotation.SuppressLint
import android.graphics.Bitmap
import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.activity.OnBackPressedCallback
import androidx.core.view.isVisible
import androidx.fragment.app.Fragment
import com.codingeasily.studentdiary.databinding.FragmentHelpBinding
/** Shows the online Android tutorial inside the app with a WebView. */
class HelpFragment : Fragment() {
private var _binding: FragmentHelpBinding? = null
private val binding get() = _binding!!
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View {
_binding = FragmentHelpBinding.inflate(inflater, container, false)
return binding.root
}
@SuppressLint("SetJavaScriptEnabled")
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
binding.webView.settings.javaScriptEnabled = true
binding.webView.webViewClient = object : WebViewClient() {
override fun onPageStarted(view: WebView?, url: String?, favicon: Bitmap?) {
_binding?.progress?.isVisible = true
}
override fun onPageFinished(view: WebView?, url: String?) {
_binding?.progress?.isVisible = false
}
}
// After rotation restore the page the user was reading, otherwise open the tutorial
if (savedInstanceState == null || binding.webView.restoreState(savedInstanceState) == null) {
binding.webView.loadUrl(HELP_URL)
}
// Back button goes back inside the WebView first
requireActivity().onBackPressedDispatcher.addCallback(viewLifecycleOwner, object : OnBackPressedCallback(true) {
override fun handleOnBackPressed() {
if (binding.webView.canGoBack()) binding.webView.goBack()
else { isEnabled = false; requireActivity().onBackPressedDispatcher.onBackPressed() }
}
})
}
override fun onSaveInstanceState(outState: Bundle) {
super.onSaveInstanceState(outState)
_binding?.webView?.saveState(outState)
}
override fun onDestroyView() {
super.onDestroyView()
_binding = null
}
companion object {
private const val HELP_URL = "https://codingeasily.in/tutorial/android/"
}
}दूसरी sites browser में खोलें
Kotlin
binding.webView.webViewClient = object : WebViewClient() {
override fun shouldOverrideUrlLoading(view: WebView, request: WebResourceRequest): Boolean {
val url = request.url
return if (url.host == "codingeasily.in") {
false // our site → load in the WebView
} else {
startActivity(Intent(Intent.ACTION_VIEW, url)) // others (YouTube, WhatsApp, tel:) → system
true
}
}
}JavaScript bridge
Kotlin + HTML
class AppBridge(private val context: Context) {
@JavascriptInterface
fun showToast(message: String) {
Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
}
}
binding.webView.addJavascriptInterface(AppBridge(this), "Android")
// in your web page (only on your own trusted site):
// <button onclick="Android.showToast('Saved from the web page!')">Save</button>Website को app बनाना
- 1पहले website mobile-friendly बनाएँ (responsive CSS)
- 2Native shell: toolbar, main sections के लिए bottom navigation
- 3WebViewClient, progress bar, back handling, pull-to-refresh के साथ WebView
- 4Offline screen: Retry के साथ native "No internet" view
- 5Native extras: push notifications, file upload/camera, share
आम गलतियाँ
- INTERNET permission नहीं → "net::ERR_CACHE_MISS"।
http://pages load करना → default रूप से blocked; HTTPS use करें।- Rotation पर page reload → WebView state save और restore करें (HelpFragment देखें)।
- File inputs (<input type="file">) कुछ नहीं करते →
WebChromeClient.onShowFileChooserimplement करें।
सारांश
- WebView + INTERNET +
webViewClient+loadUrl। - onPageStarted/onPageFinished में progress दिखाएँ;
canGoBack()से Back संभालें। - External links system को भेजें; JS bridge सिर्फ़ भरोसेमंद pages के लिए।
✅ Practice
assets/ से HTML file load करने वाली "Privacy Policy" screen, और progress bar व SwipeRefreshLayout के साथ अपनी website load करने वाली "Blog" screen बनाइए।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
क्या Google Play सिर्फ़ WebView वाली app accept करेगा?
बिना extra value के सिर्फ़ website wrap करने वाली apps minimum functionality policy में reject हो सकती हैं। Native features जोड़ें: notifications, offline screens, native navigation, camera upload।
मेरा page WebView की जगह Chrome में क्यों खुलता है?
WebViewClient के बिना links default browser में खुलते हैं। webView.webViewClient = WebViewClient() set करें।
क्या JavaScript enable करना unsafe है?
अपने भरोसेमंद pages के लिए ठीक है। JavaScript interface लगाकर कभी untrusted URLs load न करें, क्योंकि वह page आपका Kotlin code call कर सकता है।
