Thiết kế website giá rẻ

Question

I need to present a dialog with html content, and for that I’m using an AlertDialog.Builder to create a dialog based on a custom view which includes a WebView.

The WebView renders correctly inside the dialog as long as the html string does not contain a style tag, case in which, for an unknown for me reason, you will only see an empty WebView.

showDialog:

fun showDialog(message: String) {
    val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
    val dialog = inflater.inflate(R.layout.customdialog_layout_knowmylevel, null)
    val webView = dialog.findViewById<WebView>(R.id.webview_dialog_text)

    (webView.parent as LinearLayout).removeAllViews()

    val settings = webView.settings
    settings.javaScriptEnabled = true
    //webView.loadData(message, "text/html; charset=UTF-8",null) => OPTION 1
    webView.loadDataWithBaseURL("", message,"text/html","utf-8","") //=> OPTION 2
    //webView.measure(100, 100) => TESTING (NOT WORKING)
    //settings.useWideViewPort = true => TESTING (NOT WORKING)
    //settings.loadWithOverviewMode = true => TESTING (NOT WORKING)

    val alertDialog: Dialog = AlertDialog.Builder(tm.context)
        .setTitle("My Report")
        .setView(webView)
        .setPositiveButton("Close"
        ) { _, _ -> dismiss() }.create()
    alertDialog.show()
}

customdialog_layout_knowmylevel:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/dialog_container"
    android:orientation="vertical"
    tools:ignore="SelectableText" >

        <TextView
            android:id="@+id/textview_dialog_title"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center_vertical|start"
            android:padding="10sp"
            android:textColor="#FFFFFF"
            android:textSize="18sp" />

        <WebView
            android:id="@+id/webview_dialog_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scrollbars="vertical"
            android:alwaysDrawnWithCache="false" />

        <LinearLayout
            android:id="@+id/tablelayout_dialog_buttons"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

            <Button
                android:id="@+id/button_dialog_yes"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="5dp"
                android:layout_marginTop="5dp"
                android:layout_marginBottom="5dp"
                android:layout_weight="1" />

            <Button
                android:id="@+id/button_dialog_no"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1" />

        </LinearLayout>

</LinearLayout>

Message for the dialog (no <style>):

val message = "<!DOCTYPE html>" +
    "<html>" +
    "<head>" +
    "</head>" +
    "<body>" +
    "    <h1>Math Test Evaluation Report</h1>" +
    "    " +
    "    <h2>1. Summary of Scores</h2>" +
    "    <table>" +
    "        <tr>" +
    "            <th>Test</th>" +
    "            <th>Score</th>" +
    "        </tr>" +
    "        <tr>" +
    "            <td>SAT Math Level 1 Test 1</td>" +
    "            <td>Various Scores</td>" +
    "        </tr>" +
    "        <tr>" +
    "            <td>SAT Math Level 1 Test 2</td>" +
    "            <td>40, 0, 0, 0</td>" +
    "        </tr>" +
    "        <tr>" +
    "            <td>SAT Math Level 2 Test 1</td>" +
    "            <td>0, 20, 0, 0, 0, 0</td>" +
    "        </tr>" +
    "        <tr>" +
    "            <td>SAT Math Level 3 Test 1</td>" +
    "            <td>0, 0</td>" +
    "        </tr>" +
    "    </table>" +
    "    " +
    "    <h2>2. Statistical Analysis</h2>" +
    "    <p>[Statistical Analysis Here]</p>" +
    "    " +
    "    <h2>3. Score Analysis</h2>" +
    "    <p>[Score Analysis Here]</p>" +
    "    " +
    "    <h2>4. Interpretation of Results</h2>" +
    "    <p>[Interpretation of Results Here]</p>" +
    "    " +
    "    <h2>5. Evaluation of Performance</h2>" +
    "    <p>[Evaluation of Performance Here]</p>" +
    "    " +
    "    <h2>6. Strengths</h2>" +
    "    <p>[Strengths Here]</p>" +
    "    " +
    "    <h2>7. Areas for Improvement</h2>" +
    "    <p>[Areas for Improvement Here]</p>" +
    "    " +
    "    <h2>8. Recommendations</h2>" +
    "    <p>[Recommendations Here]</p>" +
    "    " +
    "    <h2>9. Conclusion</h2>" +
    "    <p>[Conclusion Here]</p>" +
    "    " +
    "    <div class="chart-container">" +
    "        <!-- Include Charts Here -->" +
    "        <h2>Test Scores Chart</h2>" +
    "        <img class="center-fit" src="https://quickchart.io/chart?c={type:'bar',data:{labels:['Test 1', 'Test 2', 'Test 3'],datasets:[{label:'Scores',data:[75, 30, 10]}]}}">" +
    "    </div>" +
    "</body>" +
    "</html>"

Result:

Message for the dialog (with <style>):

val response = "<!DOCTYPE html>" +
    "<html>" +
    "<head>" +
    "   <style>n" +
    "        * {n" +
    "            margin: 0;n" +
    "            padding: 0;n" +
    "        }n" +
    "        .imgbox {n" +
    "            display: grid;n" +
    "            height: 100%;n" +
    "        }n" +
    "        .center-fit {n" +
    "            max-width: 100%;n" +
    "            max-height: 100vh;n" +
    "            margin: auto;n" +
    "        }n" +
    "    </style>"
    "</head>" +
    "<body>" +
    "    <h1>Math Test Evaluation Report</h1>" +
    "    " +
    "    <h2>1. Summary of Scores</h2>" +
    "    <table>" +
    "        <tr>" +
    "            <th>Test</th>" +
    "            <th>Score</th>" +
    "        </tr>" +
    "        <tr>" +
    "            <td>SAT Math Level 1 Test 1</td>" +
    "            <td>Various Scores</td>" +
    "        </tr>" +
    "        <tr>" +
    "            <td>SAT Math Level 1 Test 2</td>" +
    "            <td>40, 0, 0, 0</td>" +
    "        </tr>" +
    "        <tr>" +
    "            <td>SAT Math Level 2 Test 1</td>" +
    "            <td>0, 20, 0, 0, 0, 0</td>" +
    "        </tr>" +
    "        <tr>" +
    "            <td>SAT Math Level 3 Test 1</td>" +
    "            <td>0, 0</td>" +
    "        </tr>" +
    "    </table>" +
    "    " +
    "    <h2>2. Statistical Analysis</h2>" +
    "    <p>[Statistical Analysis Here]</p>" +
    "    " +
    "    <h2>3. Score Analysis</h2>" +
    "    <p>[Score Analysis Here]</p>" +
    "    " +
    "    <h2>4. Interpretation of Results</h2>" +
    "    <p>[Interpretation of Results Here]</p>" +
    "    " +
    "    <h2>5. Evaluation of Performance</h2>" +
    "    <p>[Evaluation of Performance Here]</p>" +
    "    " +
    "    <h2>6. Strengths</h2>" +
    "    <p>[Strengths Here]</p>" +
    "    " +
    "    <h2>7. Areas for Improvement</h2>" +
    "    <p>[Areas for Improvement Here]</p>" +
    "    " +
    "    <h2>8. Recommendations</h2>" +
    "    <p>[Recommendations Here]</p>" +
    "    " +
    "    <h2>9. Conclusion</h2>" +
    "    <p>[Conclusion Here]</p>" +
    "    " +
    "    <div class="chart-container">" +
    "        <!-- Include Charts Here -->" +
    "        <h2>Test Scores Chart</h2>" +
    "        <img class="center-fit" src="https://quickchart.io/chart?c={type:'bar',data:{labels:['Test 1', 'Test 2', 'Test 3'],datasets:[{label:'Scores',data:[75, 30, 10]}]}}">" +
    "    </div>" +
    "</body>" +
    "</html>"

Result:

I’ve checked android webview displaying blank page

and https://github.com/beeware/toga/issues/2242

to no avail, because my WebView keeps rendering a blank page if I add a style tag to the html string.

What can I try next?

Thiết kế website giá rẻ

Danh mục

Android: WebView displaying blank page when html string contains tag