Home > Tutorials > Using WebView as a Image Zoom View control

Using WebView as a Image Zoom View control


Well, the built-in Google Android has supported for developers lots of things; however, many still don’t know how to make uses the best out of it. One example is about WebView control.

Reference on WebView control on Google Android Developers’ Page

Most of developers just know “WebView is a control that supports the functionality to browse and surf webs.” Yes, that’s totally true! But, hang on…what does it mean specifically?

Think of it! Just like any other browsers, Firefox, IE, Opera or Safari.. what are things  could be displayed on a web browser? – I say “HTML code“, that’s right, for developers. What are the things wrapped around by HTML code? – I say “lots of text and images“.

Hey dude, stop right there. “Text and Images” are things can be displayed seperatedly on a web browser. Hence, for an open and creative minds, by using WebView control, developers can create a simple application like: Text Reader or Image Viewer. That’s true! So for simple application, you don’t have to customize or create any complicated control, WebView control is a good option.

Just for a fun introduction, let’s head to our goal, make use of WebView as an Image Zoom View control.

The WebView control has supported the built-in functionality of zoom, so we don’t have to re-create an already-existed on.

WebView as Image Zoom View

WebView as Image Zoom View

By using a simple property of WebView, we make use of it:

package pete.study.android;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class MainActivity extends Activity {
    // declare a WebView object first
	WebView mWebView = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // load view
        mWebView = (WebView)findViewById(R.id.webView);
        // (*) this line make uses of the Zoom control
        mWebView.getSettings().setBuiltInZoomControls(true);
        // simply, just load an image
        mWebView.loadUrl("http://www.fanseries.fr/wp-content/gallery/allison-mack/allison-mack-01.jpg");
    }
}

It’s cool, isn’t it?

What I want to share with you all actually is that, sometimes we think too complicated while the solution is very simple right in front of our eyes. Just to see it with a clear point of view, you’ll find the best solution!

Hope you have a lot of fun in this article >^o^<

 

Cheers,

Pete Houston

 

Categories: Tutorials Tags: , , ,
  1. May 8, 2024 at 6:53 pm

    Great blog you hhave here

  2. January 27, 2015 at 3:52 am

    is there a method to set the zoom to zoom Out for default when the app loads (i want to view the full image at first, then zoom in or zoom out) ….thanks

  3. November 11, 2014 at 12:08 pm

    awesome 🙂

  4. Raktim
    September 13, 2013 at 1:36 am

    I am making a dictionary app. how can i add zoom control to it

  5. Meena
    January 29, 2013 at 1:31 pm

    How to make visible this Zoom Control buttons in my app without disappearing? if this zoomcontrol button is visible then user dont wanna get confused about zooming. when i try to scroll or zoom in then only this zoom control button appears . If i dont try to pinch zoom also this zoom control button should be appear in my app. How can i do this. Any ideas?

  6. Marina
    January 3, 2013 at 1:32 am

    Is anybody can tell me please how to fit the image to fit full screen size?

  7. donkey
    December 18, 2012 at 10:37 am

    to load local
    ex:
    mWebView.loadUrl(“file:///android_res/drawable/xxxx.png”);

  8. ravikanth
    October 10, 2012 at 9:34 pm

    Thanq so much. This code helped me alot

  9. Thorsten
    June 12, 2012 at 4:01 pm

    To load local resources from the package u can try the following file URL’s: for assets file:///android_asset/ and for resources file:///android_res/drawable (tested with Android 2.3.x and above). But it is important to invoke mWebView.loadDataWithBaseURL(…). Greetz Thorsten

  10. Thorsten
    June 12, 2012 at 3:57 pm

    Use mWebView.loadDataWithBaseURL(…) instead and supply the file based url (e.g. file://sdcard/Android/data/… or whatever) together with the base directory as first parameter). Greetz Thorsten

  11. Ken
    December 22, 2011 at 5:38 pm

    same question as lhtan, i need to display my images which are stored from drawable folder

  12. lhtan
    December 8, 2011 at 1:13 am

    how about i not load image from url? i wan load the image from drawable with zoom view control?

  1. No trackbacks yet.

Leave a comment