Android ImageViewer class supporting Pinch-Zoom and Scrolling - android

I am searching an ImageViewer library that opens an image in my application for a given URI (the image fetched by a webservice is already stored within my application in a secured place). I really like the "Samsung Galaxy S" ImageViewer-Activity because it uses pinch-zoom and "scrolling" vertical/horizontal. Also it scales the picture very fast on my samsung phone :)
I know that I can open an image with an intent like this:
Intent i = new Intent(Intent.ACTION_VIEW);
i.setDataAndType(uri, "image/*");
startActivity(i);
The best suitable viewer is being called, when none is found an ActivityNotFoundException is raised. So thats cool!
But the problem is that I am not allowed to open an image with an external intent (for security purposes). i.e: The user should not have the posibility to save the opened image via a menu option to his external sd-card or send this picture to another service (email/twitter or s.o.). So I have to write my own ImageViewer-Class (Activity) that can only be called within my application...
Unfortunately I am not very skilled transforming images, so is there any open source project (or library) that covers this use case?
I already asked google and found this one http://code.google.com/p/android-pinch/ but it didnt work very well (also it has no scroll-functionality).
Thanks for your tips :)

At this moment I'm too use WebView. But this is conceptually wrong, WebView is not for displaying images, it for displaying web content. WebView is bulky and cumbersome. You restricted in customizing it. For example, I need scaling, but I don't want to see zoom controls, or I want to move them in other place then default.
Therefore, I searched about this problem and found some solutions:
PhotoView widget from Chris Banes
Also, you can look at this tutorial from Sony Ericsson (sources available) and can implement your own widget: part1, part2, part3
And another one library ImageViewZoom at github
UPDATE
Chris Banes was created awesome library which supports gestures for zooming pictures, see first point above

The easiest way to handle images is using a WebView, if the image is stored local or somewhere online. WebView supports pinch to zoom and other functions.
Example Java:
String imageUrl = "file:///local/dir/image.jpg"; // http://example.com/image.jpg
WebView wv = (WebView) findViewById(R.id.yourwebview);
wv.getSettings().setBuiltInZoomControls(true);
wv.loadUrl(imageUrl);
XML source:
<WebView android:id="#+id/yourwebview"
android:layout_width="match_parent"
android:layout_height="match_parent" />

Related

How to integrate a interactive pdf viewer with in the android application

I am unable to read PDF file from assets folder. how could i read a PDF in a single page with integrating all controls available for a PDF viewer. I don't want to open a default pdf viewer available in the phone. Please suggest me the right way to achieve interactive PDF viewer with in the android application which can read the pdf from assets/raw folder from the android resource components. Thanks in advance
You can use Intent to load your PDF in external application.
File file = //Load your file from assets here
Intent intent = new Intent(Intent.ACTION_VIEW);
intent.setDataAndType(Uri.fromFile(file), "application/pdf");
intent.setFlags(Intent.FLAG_ACTIVITY_NO_HISTORY);
startActivity(intent);
You can load file from assets using InputStream. See this post.
Good luck!
It helped for me:
Barteksc Android Pdf SDK Library
Android PdfViewer AndroidPdfViewer 1.x is available on the
AndroidPdfViewerV1 repo, where can be developed independently. Version
1.x uses a different engine for drawing documents on canvas, so if you don't like the 2.x version, try 1.x.
Library for displaying PDF documents on Android, with animations,
gestures, zoom, and double-tap support. It is based on PdfiumAndroid
for decoding PDF files. Works on API 11 (Android 3.0) and higher.
Licensed under Apache License 2.0.
Which supports Android devices from Android 4.4.4 (KitKat)
Installation
Add to build.gradle:
implementation 'com.github.barteksc:android-pdf-viewer:3.2.0-beta.1'
or if you want to use more stable version:
implementation 'com.github.barteksc:android-pdf-viewer:2.8.2'
Add this into your layout file:
<com.github.barteksc.pdfviewer.PDFView
android:id="#+id/your_pdf_id"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
You can Load a PDF file like this:
pdfView.fromUri(Uri)
or
pdfView.fromFile(File)
or
pdfView.fromBytes(byte[])
or
pdfView.fromStream(InputStream) // stream is written to bytearray - native code cannot use Java Streams
or
pdfView.fromSource(DocumentSource)
or
pdfView.fromAsset(String)
.pages(0, 2, 1, 3, 3, 3) // all pages are displayed by default
.enableSwipe(true) // allows to block changing pages using swipe
.swipeHorizontal(false)
.enableDoubletap(true)
.defaultPage(0)
// allows to draw something on the current page, usually visible in the middle of the screen
.onDraw(onDrawListener)
// allows to draw something on all pages, separately for every page. Called only for visible pages
.onDrawAll(onDrawListener)
.onLoad(onLoadCompleteListener) // called after document is loaded and starts to be rendered
.onPageChange(onPageChangeListener)
.onPageScroll(onPageScrollListener)
.onError(onErrorListener)
.onPageError(onPageErrorListener)
.onRender(onRenderListener) // called after document is rendered for the first time
// called on single tap, return true if handled, false to toggle scroll handle visibility
.onTap(onTapListener)
.onLongPress(onLongPressListener)
.enableAnnotationRendering(false) // render annotations (such as comments, colors or forms)
.password(null)
.scrollHandle(null)
.enableAntialiasing(true) // improve rendering a little bit on low-res screens
// spacing between pages in dp. To define spacing color, set view background
.spacing(0)
.autoSpacing(false) // add dynamic spacing to fit each page on its own on the screen
.linkHandler(DefaultLinkHandler)
.pageFitPolicy(FitPolicy.WIDTH) // mode to fit pages in the view
.fitEachPage(false) // fit each page to the view, else smaller pages are scaled relative to largest page.
.pageSnap(false) // snap pages to screen boundaries
.pageFling(false) // make a fling change only a single page like ViewPager
.nightMode(false) // toggle night mode
.load();
For More Information Github: Barteksc Android Pdf Viewer
I Hope, it Helps!

Images not displaying in Android WebView

I have a situation where I am trying to display user-generated HTML in a webview using loadData. My code is something like this:
String content = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>" +
"<html><head>" +
"<meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" />" +
"</head><body>";
content += htmlStr + "</body></html>";
wv.loadData(content, "text/html", "UTF-8");
It works pretty well in most cases, but I am having trouble getting certain types of images to display. In most of my testing, inserting <img src="..."/> tags worked fine, but I found that links to images on Photobucket would not display at all; I get a little box with question mark in it instead of the image.
Clicking on a link to an image on Photobucket tends to take you to the page on which that image is viewable on their website, rather than just the raw image itself. I have a feeling that the issue is related to this. I suspect that it may be a "Referer" issue, or perhaps user-agent, or something of that nature, but I cannot for the life of me get this to display properly.
I have tried switching to loadDataWithBaseURL and providing a BaseURL (as I believe this will be used as the referer url) but that made no difference. I have also tried using loadUrl("http://photobucket..." instead and providing a HashMap with the Referer header manually set, but that did not work either. Actually, switching to loadUrl made it immediately redirect to the device's browser to load the Photobucket page. I attempted to provide a custom WebViewClient and override shouldOverrideUrlLoading, but the best I got it to do was to display the full Photobucket page inside the WebView.
I am sure this is not a specific issue with Photobucket, that just happens to be the site that I discovered this problem with while I was testing.
I would really like to figure some way to deal with this situation so that this can work correctly, but I have been as yet unable to find any helpful direction on SO or the internet at large. Does anyone have any ideas?
I would wait until Photobucket finishes their recent updates before further testing...while you stated you are sure it is not a specific issue with Photobucket the internet is now awash with posters not able to view Photobucket linked to images with android based devices. If your code works with all other images not hosted on photobucket your code is good.

Load image from sdcard into html

Hi I have implemented an android web server and I am serving html pages on the fly, based on the uri requested.
When I try to include images from my sdcard they are not showing up on the html page. I have the requisite permissions in the manifest. I have tried looking around but, most of the examples involve images within webview. I am using the following code to get path to the .png files on the sdcard.
String file_icon=Environment.getExternalStorageDirectory().getAbsolutePath()+"/file_icon.png";
String folder_icon=Environment.getExternalStorageDirectory().getAbsolutePath()+"/folder_icon.png";
and I am writing to the outputstream using the following
writer.write("<tr><td><input type=\"checkbox\" name=\""+files.toString()+"\" value=\"file\"/></td><td><img src=\""+file_icon+"\"/>"+files.toString()+"</tr>");
writer.write("<tr><td><input type=\"checkbox\" name=\""+files.toString()+"\" value=\"file\"/></td><td><img src=\""+folder_icon+"\"/>"+files.toString()+"</tr>");
When I fire up the emulator and visit the page I see no images.
screen http://img820.imageshack.us/img820/7973/capturekuw.png
Any ideas or pointers in the right direction would be greatly appreciated.Thanks.
After looking around I found out that I needed to implement a ContentProvider and override the openFile() method.
http://www.techjini.com/blog/2009/01/10/android-tip-1-contentprovider-accessing-local-file-system-from-webview-showing-image-in-webview-using-content/

Programmatically creating a list of videos

I'm trying to create a list of videos that a user may view. This needs to be dynamic because the list is going to update based on new entries being added to the database I'm drawing the videos from.
For my project, I access a list of videos from vimeo through its simple API. The current approach I'm using to display all the info is through a webview object that gets its info from a StringBuilder object, htmlString.
My XML for the view is the following:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<WebView
android:id="#+id/videoMenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" />
</RelativeLayout>
The snippet of code that I use to build my list dynamically is the following. It returns to a function "onPostExecute(String result)" which displays the webview with the html created from the for loop.
for (VideoDataParser.Entry video : videos)
{
htmlString.append("<p>");
htmlString.append("<a href=\"" + video.url + "\">");
htmlString.append("<img align=\"left\" src=\"" + video.thumbnail_url + "\">");
htmlString.append(video.title + "<br>");
htmlString.append(video.description);
htmlString.append("</p>");
}
return htmlString.toString();
The main problem I have now is that the images aren't loading. I suppose that's because it requires another HTTP request to get the image. Is there another way to fix that?
Also, I feel like this method of creating a menu might not be the best. When the user clicks the link, the flow of control goes outside of my activities and goes to a web browser where it will play the video. I want the activity to go to my own video player instead of using the internet upon clicking one of my options. There is most likely a better way of doing this, but I'm unsure.
Any input would be awesome.
If you are using a WebView to create your playlist, then I would recommend using JavaScript interfaces inside the WebView so you can send information between your activity and the WebView, so when the user clicks a thumbnail you can send the activity the "id" of the thumbnail the user clicked.
Tips:
To add an interface you do it this way
WebView web = new WebView();
web.addJavascriptInterface(new classWhereTheMethodsAre(), "nameOfTheInterface");
To call the method from inside HTML
nameOfTheInterface.nameOfTheMethod(Parameters);
I hope this tips can help you, if you have another question please post it here, and I will try to solve it or maybe give you an snippet.
UPDATE:
If your images come from the "internet" (HTTP or something like that), then you can just put the URL in the HTML code like you would normally do so, or you can download them to the SD CARD (with your asynctask class) and then have a listener to advise you when the image is completely downloaded so you can "lazy load" the part of the code where you "insert" the image to the HTML page. The lazy load can be achieved with the code provided in the link and to call it you can do a YourWebView.loadUrl("javascript:functionThatCallsTheLazyLoad(Parameters)")
I hope this update can help you with your problem.

Android Photo Viewer Demo

I've been trying to figure out how to display a photo on Android. I can create an ImageView and display a picture, but the functionality is limited (no zoom, pan or share). Is there a demo or tutorial with code out there on how to do this? I've been searching all week with no luck.
Thanks.
P.S.> Please No Snark!
Maybe I don't understand how to create a uri correctly or how to make my resource available to the viewer. I have a resource ID, R.drawable.opal, I'm using to display different minerals and gems for a science project. If the student clicks the small sample photo, then I want to bring up a bigger and better viewer for the photo to allow them to compare to their collected rock.
Unless you really need to build your own you should probably just use the gallery's viewer. Send it the picture by using the view intent like so:
Intent viewImageIntent = new Intent(android.content.Intent.ACTION_VIEW, uri);
startActivity(viewImageIntent);
Replace "uri" with the image's uri of course. Writing your own viewer is really involved and would include threading, physics calculations and handling touch inputs.

Categories

Resources