Free tutorials & notes in Hindi & English · Clean code examples 🧰 मुफ़्त PDF और फ़ोटो टूल्स →
📱 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 में आम)।
9:41▮▮ 85%☰Help & Tutorial⋮━━━━━━━━━━━━━━━━━━ loadingCodingEasilyAndroid Tutorial (Kotlin)WWhat is Android?IInstall Android StudioFFirst Android App
Student Diary Help screen = WebView में codingeasily.in

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

Back दबायाwebView.canGoBack()?हाँ → goBack()पिछला pageनहीं → screen छोड़ोnormal back
Users expect करते हैं Back पहले पिछले web page पर जाए

असली 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. 1पहले website mobile-friendly बनाएँ (responsive CSS)
  2. 2Native shell: toolbar, main sections के लिए bottom navigation
  3. 3WebViewClient, progress bar, back handling, pull-to-refresh के साथ WebView
  4. 4Offline screen: Retry के साथ native "No internet" view
  5. 5Native extras: push notifications, file upload/camera, share
अच्छी hybrid app native जैसी लगती है

आम गलतियाँ

  • 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.onShowFileChooser implement करें।

सारांश

  • 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 कर सकता है।
← Android Tutorial (Kotlin)
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

अगला topicProject: Student Diary App (Plan और Setup) आपकी प्रगति: 39 / 43 (91%) · Lesson 40 / 43 आगे बढ़ें →

यह lesson कैसा लगा?

आपकी राय से हम content और बेहतर बनाते हैं।

अपना review और सुझाव लिखें (वैकल्पिक)

Review approve होने के बाद आपका नाम और शहर इसके साथ public दिख सकते हैं। Email या phone न लिखें।

▶ CodingEasily on YouTube

Video से सीखें – आसान Hindi में

चुनी हुई video: RDBMS भाग 3 – Class XI Commerce IT

▶ Channel subscribe करें