Home Tutorials Hints & Tips

Using the setTextZoom Method to Scale Text within an Android WebView

In this tutorial we will look at how to scale text within an Android WebView. This is useful from an accessibility perspective. The fundamental Android method we will use is the setTextZoom method that is part of the Websetting class.

The premise behind this particular tutorial is to set the zoom value from a settings screen and store that in shared preferences. Therefore, the same zoom value will be applied to every Webview used throughout the app.

The Settings Activity

The layout below is used for the Settings activity. It comprises a radio group with three radio buttons. Each button has a zoom value: 75%, 100% and 150%. A save button has also been added, that when clicked, will store the resultant zoom value within shared preferences and close the Settings activity. A screen shot of the Settings activity is shown below followed by the XML code of the layout.


Shared preferences are covered in my tutorial found here. However, it is worth taking some time to look at the Settings activity's java code.

The method setRadioButton simply ensures that the correct radio button is checked to reflect the current shared preference a value. Otherwise it will always default to the 100% button.

private void setRadioButton() {
   zoomValue = zoomPrefs.getInt("zoom_value", 100);
   if (zoomValue == 75) {
      radioGroupZoom.check(R.id.rb75percent);
   } else if (zoomValue == 100) {
      radioGroupZoom.check(R.id.rb100percent);
   } else {
      radioGroupZoom.check(R.id.rb150percent);
   }
}

The work is done by the save button's onClick Listener.

save.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
      int selectedId = radioGroupZoom.getCheckedRadioButtonId();
      radioButtonZoom[0] = (RadioButton) findViewById(selectedId);
      String zoomValue = radioButtonZoom[0].getText().toString();
      zoomValue = zoomValue.substring(0, zoomValue.length() - 1);
      int zoomValueFromSharedPreferences=Integer.parseInt(zoomValue);
      SharedPreferences.Editor editor = zoomPrefs.edit();
      editor.putInt("zoom_value", zoomValueFromSharedPreferences);
      editor.commit();
      finish();
}

The following line of code gets the ID of the selected radio button:

int selectedId = radioGroupZoom.getCheckedRadioButtonId();

We then need to create an object of that button:

radioButtonZoom[0] = (RadioButton) findViewById(selectedId);

We then get the text associated with the button:

String zoomValue = radioButtonZoom[0].getText().toString();

We then need to drop the "%" symbol by cutting the last character in the string:

zoomValue = zoomValue.substring(0, zoomValue.length() - 1);

Finally, we need to convert the string to an integer before opening the shared preference editor and saving the integer zoom value.

int zoomValueFromSharedPreferences=Integer.parseInt(zoomValue);
SharedPreferences.Editor editor = zoomPrefs.edit();
editor.putInt("zoom_value", zoomValueFromSharedPreferences);
editor.commit();

The finish()method simply closes the Setting Activity.

The full code the Settings.java Activity can be found below:

The MainActivity

The Layout for the MainActivity simply comprises a WebView to display a web page and a TextView that show current zoom value. The XML code for this this is below:

The first few lines of code within the MainActivity are focused on setting up the Web client.

myWebView1 = (WebView) findViewById(R.id.wvPage1);
myWebView1.getSettings().setLoadsImagesAutomatically(true);
myWebView1.getSettings().setJavaScriptEnabled(true);
myWebView1.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
myWebView1.setWebViewClient(new ourBrowser());
myWebView1.loadUrl(url);

The URL is a basic test page created for this tutorial:

private final static String url = "http://www.northborder-software.com/my_webview_text1.html";

The private ourBroswer class ensures that the Apps's WebView is used to load the Webpage rather than the device's default web app.

private class ourBrowser extends WebViewClient {
   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url)    {
      view.loadUrl(url);
      return true;
   }
}

I have a tutorial on setting up a WebView and Web client here.

The first thing we need to do in the activity is get the zoom value from shared preferences. This is done in the getSetting() method using the lines of code below. The default value being 100% if no shared preference value exists.

getData =getSharedPreferences("myPrefs", Context.MODE_PRIVATE);
zoomValue = getData.getInt("zoom_value", 100);

After setting up the Webclient and loading the page we can get on with the task of scaling the text. This is done by calling the setTextZoom method from the Websetting class. First, we need to create an object of the class.

WebSettings settings = myWebView1.getSettings();

Next we simply call the setTextZoom method from that object passing the integer zoom value as a parameter.

settings.setTextZoom(zoomValue);

Finally, we can set the zoom value in the TextView.

zoomValueText.setText(String.valueOf(zoomValue) + "%");

If the app is run now, the WebView will zoom the text to the shared preferences value when first started. When going to the Settings Activity the MainActivity is paused. If the zoom value is changed, this will not be reflected when the app is resumed. To fix this we must override the onResume method.

@Override
protected void onPostResume() {
   getSettings();
   WebSettings settings = myWebView1.getSettings();
   settings.setTextZoom(zoomValue);
   zoomValueText.setText(String.valueOf(zoomValue) + "%");
   super.onPostResume();
}

The code within the onResume method simply gets the zoom value from shared preferences and executes the setTextZoom method as with the main part of MainActivity.

Navigation within the MainActivity is via an action bar. I have tutorial on setting up an action bar here.

The action bar menu allows access to the Setting Activity and the second Webpage.

The full java code for the MainActvity is here:


The Second Webpage

The second webpage can be access from the action bar of the MainActivity. Really this page is identical to the MainActivity and has a very similar layout. The only real different is that the action bar only accesses the Settings Activity menu option.

The code for the second Webpage’s java and layout is here:


The screen shots below show the various zoom options.


The only other project file not really covered here is the Android Manifest. The key point with the Manifest is to ensure that permissions for Internet access are granted.


Download Download project files

Privacy and Cookies Disclaimer Copyright
© 2015 - 2018 North Border Tech Training All rights reserved