एंड्रॉइड WebView में HTML कंटेंट कैसे लोड करें?

एंड्रॉइड WebView में HTML कंटेंट सीधे लोड करना

यह उदाहरण दर्शाता है कि loadData() या loadDataWithBaseURL() का उपयोग करके WebView में HTML स्ट्रिंग सीधे कैसे लोड करें।

चरण 1: नया प्रोजेक्ट बनाएं

Android Studio में नया प्रोजेक्ट बनाएं।

चरण 2: लेआउट फ़ाइल

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

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

</LinearLayout>

चरण 3: MainActivity.java

package com.example.myapplication;

import android.app.ProgressDialog;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends AppCompatActivity {

    @RequiresApi(api = Build.VERSION_CODES.P)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ProgressDialog progressDialog = new ProgressDialog(this);
        progressDialog.setMessage("लोड हो रहा है...");
        progressDialog.setCancelable(false);

        WebView webView = findViewById(R.id.web_view);
        webView.requestFocus();
        webView.getSettings().setLightTouchEnabled(true);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setGeolocationEnabled(true);
        webView.setSoundEffectsEnabled(true);

        // HTML स्ट्रिंग लोड करें
        String htmlContent = "<html><body><h1>नमस्ते दुनिया!</h1>" +
                "<p>यह WebView में लोड किया गया HTML कंटेंट है।</p>" +
                "<ul><li>आइटम 1</li><li>आइटम 2</li><li>आइटम 3</li></ul>" +
                "<p style='color: blue;'>नीला टेक्स्ट</p>" +
                "</body></html>";

        // तरीका 1: loadData() - सरल लेकिन बेस URL नहीं
        webView.loadData(htmlContent, "text/html", "UTF-8");
        
        // तरीका 2: loadDataWithBaseURL() - बेहतर (रिलेटिव URL, CSS, JS के लिए)
        // webView.loadDataWithBaseURL("https://example.com/", htmlContent, "text/html", "UTF-8", null);

        webView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int progress) {
                if (progress < 100) {
                    progressDialog.show();
                }
                if (progress == 100) {
                    progressDialog.dismiss();
                }
            }
        });
    }
}

loadData() vs loadDataWithBaseURL()

loadDataWithBaseURL() उदाहरण

String html = "<html><head><link rel='stylesheet' href='style.css'></head>" +
              "<body><img src='image.png'><script src='script.js'></script></body></html>";

// बेस URL से रिलेटिव पाथ रिजॉल्व होंगे
webView.loadDataWithBaseURL("https://mysite.com/assets/", html, "text/html", "UTF-8", null);

// "about:blank" बेस URL के लिए (कोई रिलेटिव रिजॉल्यूशन नहीं)
webView.loadDataWithBaseURL("about:blank", html, "text/html", "UTF-8", null);

// डेटा URI के लिए
webView.loadDataWithBaseURL("", html, "text/html", "UTF-8", "");

HTML एस्केपिंग ध्यान दें

loadData() में %, #, +, ? जैसे कैरेक्टर्स एन्कोड करने पड़ते हैं। loadDataWithBaseURL() में यह समस्या नहीं होती।

ऐप चलाएं

कस्टम HTML कंटेंट WebView में रेंडर होगा - स्टाइलिंग, लिस्ट, कलर्ड टेक्स्ट सभी काम करेंगे।