Display Specific HTML Tags in WebView from WordPress Website

Introduction

In this guide, we will explore how to use WebView to display specific parts of a WordPress page within an Android application. We will discuss how to filter and display only the necessary elements of the page, ignoring unwanted parts such as the header and footer.

The Problem

The author aims to create an Android app for displaying articles from a WordPress site while preserving the site's style. Using the JSON-API plugin did not yield the desired results, so they are considering using WebView to have finer control over the displayed content.

Solution

To display only specific parts of a WordPress page in WebView, you can use JavaScript to extract the required data and then insert it into WebView. This approach allows us to avoid the header and footer sections of the page.

Step 1: Co

ecting WebView to Activity

First, add WebView to your Activity. You can do this in the XML layout:

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

Then initialize WebView in your Activity:

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

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);

        // Loading HTML with specific tags
        String htmlContent = "<div id='article-list'>...</div>";
        webView.loadDataWithBaseURL(null, htmlContent, "text/html", "UTF-8", null);
    }
}

Step 2: Extracting Required Data Using JavaScript

If you want to extract data from a live WordPress page, use JavaScript to get the required content:

webView.loadUrl("javascript:(function() { " +
        "var divs = document.querySelectorAll('#article-list'); " +
        "var content = ''; " +
        "for (var i = 0; i < divs.length; i++) { " +
        "content += divs[i].innerHTML; " +
        "} " +
        "window.androidCallback(content); " +
        "})()");

After that, call a Java method to pass the data back to the app:

webView.addJavascriptInterface(new Object() {
    @android.webkit.JavascriptInterface
    public void androidCallback(String data) {
        webView.loadData(data, "text/html", "utf-8");
    }
}, "androidCallback");

Step 3: Displaying Data in WebView

Now you can display the obtained HTML in WebView:

webView.loadDataWithBaseURL(null, htmlContent, "text/html", "UTF-8", null);

Practical Tips

1. Ensure JavaScript is Enabled: WebView should be configured to support JavaScript.
2. Use Correct Syntax: Ensure that your JavaScript code correctly works with DOM elements.
3. Handle Errors: Add error handling to improve user experience.

Conclusion

Using WebView to display specific parts of a WordPress page provides more control over the displayed content. With JavaScript, you can extract and format the necessary HTML code, which is then displayed in WebView.

---