Question

I’ve downloaded a webpage html and the images inside it. Now, i’m trying to display them to the user. I’ve tried two different methods, and not sure which is best to use. Both have their issues.

First, I tried a text view with the following code:

TextView content = (TextView)findViewById(R.id.article_content);

MyImageGetter mig = new MyImageGetter(this, urlId);
Spanned span = Html.fromHtml(contents, mig, null);
content.setText(span);

I really like how this works, except two issues. The first, and most difficult is when an article has lots of images, I get OutOfMemory fc’s. MyImageGetter code is as follows

public class MyImageGetter implements Html.ImageGetter{

String urlId = null;
Context c = null;

public MyImageGetter(ArticleViewer articleViewer, String urlId2) {
    c = articleViewer;
    urlId = urlId2;
}

public Drawable getDrawable(String source) {
    String[] brokenUrl = source.split("/");
    String imgName = brokenUrl[brokenUrl.length-1];

    File image = new File("/data/data/com.that1dev.RibbonReader/Offline/" + urlId + "/" + imgName);
    Log.w("MyApp", image.getAbsolutePath());
    Bitmap bm = BitmapFactory.decodeFile(image.getAbsolutePath());

    Drawable d = new BitmapDrawable(c.getResources(), bm);

    d.setBounds(0,0, d.getIntrinsicWidth(),d.getIntrinsicHeight());

    return d;
}

}

The other issue is the textview has different widths based on user choice and device orientation. The images in the view simply get cropped if they are larger than the textview width. However, I believe I can fix that without too much difficultly on my own. I just haven’t tried too hard yet since I’m trying to fix the memory issue first. However, any assistance on either would be much appreciated.

The other method I’ve tried is a webview.

WebView webContent = (WebView)findViewById(R.id.web_content);

webContent.loadDataWithBaseURL("", contents[1], "text/html", "utf-8", "");
webContent.setBackgroundColor(Color.TRANSPARENT);

Unfortunately with this, the background stays white no matter what I try, and is incredibly ugly. I cannot seem to find a work around that works in 3.0 and 4.0.

If I had a choice, I’d really like the TextView method to work, since I preferred the look of it to the way the WebView rendered things.

Answer 1

What you’re trying to do here, fundamentally, is change how the web content is rendered – swapping out what the website writer (which might be you, I don’t know) wrote the background to be. Anyway HTML doesn’t really support transparent backgrounds of the web content, so the only thing I can think of that you might try is to actually edit the web content via JavaScript:

myWebView.loadUrl("javascript:document.body.style.backgroundImage=\'\');
   document.body.style.backgroundColor=\"#00FF00\");");

(Replace the above color with the color of your choice) calling that after the WebView loads will clear any background on the HTML, but you’ll still have issues when it comes to any nested styling not on the body.

As for your image problem, you’re opening all of the images at their default size and keeping them in memory. One of the things that the WebView does for you is to keep decimated (as in shrunk) renderings of the webpage images. If you want to fix your memory footprint, your best bet is to temporarily save the images to disk, and only open them when the user has scrolled to where the image needs to be – which is not going to be easy, by any means, but that’s the only way to ensure that you aren’t going to overflow your allocated heap space.