Home/ Questions/Q 9028425
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T06:58:52+00:00

Trying to get the same look for TextView and WebView content, I’ve met a

  • 0

Trying to get the same look for TextView and WebView content, I’ve met a strong resistance of Android 4.

As Display getWidth() is deprecated, I’ve tried hardcoded values for Android 4 but the result is the same: at webView the text becomes larger and the scrolling appears while the textView font size is decreased.

Such a behavior for the same display type does not make any sense for me, could anyone please let me know if that is documented anywhere ?

Solution:
As pt seemed to be ignored by WebView, I had to use px scaled as much closer to sp as I can:

((TextView)findViewById(R.id.textView1)).setTextSize(TypedValue.COMPLEX_UNIT_SP,24);

font-size: " + pixelsToSp(this, 24.0f) + "px;

private float scaledPX(Context context, Float px) {
    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, px, getResources().getDisplayMetrics());
}

Android 2.3 WVGA

Android 2.3

Android 4.1 WVGA

Android 4.1

Layout

<TextView
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:text="same text"/>

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

Code

((WebView)findViewById(R.id.webView1)).getSettings().setLoadWithOverviewMode(true);
((WebView)findViewById(R.id.webView1)).getSettings().setUseWideViewPort(true);
((WebView)findViewById(R.id.webView1)).getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); // this line was missed when the screenshots was made, it makes the images being scaled correctly

((TextView)findViewById(R.id.textView1)).setTextSize(TypedValue.COMPLEX_UNIT_PX,24);
final String width = Integer.toString(getWindowManager().getDefaultDisplay().getWidth());
final String html = "<html style = 'margin: 0px; padding: 0px;'>"
        + "<head>"
        + "<meta name='viewport' content='width=device-width; user-scalable=no; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0; target-densityDpi=device-dpi;'/>"
        + "</head>"
        + "<body style = '"
        + "width: "
        + width
        + "px;"
        + ";'>"
        + "<div style='overflow: hidden; width: 100%; font-size: " + 24 + "px;'>"
        + "same text size"
        + "<img style='max-width: " + width + "px;' src=\"http://upload.wikimedia.org/wikipedia/commons/c/ca/Niobe050905-Siamese_Cat.jpeg\"/>"
        + "</div>"
        + "</body>";

((WebView)findViewById(R.id.webView1)).loadDataWithBaseURL("", html, "text/html", "UTF-8", "");
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What devices are you testing on? I suspect that it has more to do with the scaling based on screen rather than the version of android itself.

    The setTextSize(float size) method uses the scaled pixels unit (sp). The html is using the pt unit which I don’t think will take into consideration the display resolution like sp will.

    Try like this:

    ((TextView)findViewById(R.id.textView1)).setTextSize(TypedValue.COMPLEX_UNIT_PT,24);

    That should use the pt unit instead of sp. Which might make the text appear the same as inside the WebView. Another thing to consider however, is that WebView has a zoom factor. Even if the fonts are the same size the WebView could be zoomed in/out whereas a default TextView cannot, which would also result in the fonts being different sizes on the screen.

    • 0