Adjust font size of Android WebView

Question

How do you adjust the font size of an Android WebView ? The following appears to have no effect:

private void fontSizePlus() {
    fontSize = (fontSize < FONT_SIZE_MAX) ? fontSize + FONT_SIZE_INCREMENT : fontSize;
    this.changeFontSize(fontSize);
}

private void fontSizeMinus() {
    fontSize = (fontSize > FONT_SIZE_MIN) ? fontSize - FONT_SIZE_INCREMENT : fontSize;
    this.changeFontSize(fontSize);
}

private void changeFontSize(int value) {
    String js = "document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '" + value + "%';";
    mWebView.loadUrl("javascript:(function() { " + js +  " })()");  
}

Where the WebView and constants have been initialized as follows:

private final static int FONT_SIZE_DEFAULT = 100;
private final static int FONT_SIZE_MIN = 50;
private final static int FONT_SIZE_MAX = 150;
private final static int FONT_SIZE_INCREMENT = 5;
private int fontSize = FONT_SIZE_DEFAULT;

private WebView mWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.index);
    mWebView = (WebView) findViewById(R.id.webview);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.loadUrl("file:///android_asset/index.htm");
}

Answer 1

@rob's answer and comment pointed me in the right direction.

First make sure that all font sizes are relative to the default font size. If you use absolute values the following will not work on those elements.

Then:

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...
    mWebView = (WebView) findViewById(R.id.webview);
    fontSize = mWebView.getSettings().getDefaultFontSize();
    ...
}

private void fontSizePlus() {
    fontSize++;
    this.changeFontSize(fontSize);
}

private void fontSizeMinus() {
    fontSize--;
    this.changeFontSize(fontSize);
}

private void changeFontSize(int value) {
    mWebView.getSettings().setDefaultFontSize(value);
}

By changing the value of the default font size all relative font sizes are adjusted accordingly. This gives you much greater control than WebSettings.setTextSize (WebSettings.TextSize t) .

Answer 2

I don't know that webkitTextSizeAdjust is supported in anything other than safari/mobile safari.

Try WebSettings.setTextSize (WebSettings.TextSize t)

rather than trying to do it with javascript.

Answer 3

Brian Cooley helped me with this...try it...

increaseFontButton.setOnClickListener( new OnClickListener() {
    public void onClick(View v) {
        WebSettings settings = myWebView.getSettings();
        settings.setTextZoom( (int)(settings.getTextZoom() * 1.1) );
    }
}