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.
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
Great blog you hhave here
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
awesome 🙂
I am making a dictionary app. how can i add zoom control to it
Another simple tutorial
http://android-helper4u.blogspot.com/2013/03/e-how-to-give-zoomable-picture-in.html
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?
Is anybody can tell me please how to fit the image to fit full screen size?
to load local
ex:
mWebView.loadUrl(“file:///android_res/drawable/xxxx.png”);
Thanq so much. This code helped me alot
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
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
same question as lhtan, i need to display my images which are stored from drawable folder
how about i not load image from url? i wan load the image from drawable with zoom view control?