Android HTML ImageGetter as AsyncTask
Asked Answered
P

5

32

Okay, I'm losing my mind over this one. I have a method in my program which parses HTML. I want to include the inline images, and I am under the impression that using the Html.fromHtml(string, Html.ImageGetter, Html.TagHandler) will allow this to happen.

Since Html.ImageGetter doesn't have an implementation, it's up to me to write one. However, since parsing URLs into Drawables requires network access, I can't do this on the main thread, so it must be an AsyncTask. I think.

However, when you pass the ImageGetter as a parameter to Html.fromHtml, it uses the getDrawable method that must be overridden. So there's no way to call the whole ImageGetter.execute deal that triggers the doInBackground method, and so there's no way to actually make this asynchronous.

Am I going about it completely wrong, or worse, is this impossible? Thanks

Predatory answered 15/9, 2011 at 0:16 Comment(5)
I am probably going to get flamed for this, but why not try doing this with a self-baked thread (rather than asyncTask). That has nothing to override and you can watch what happens as it happens. You'll need a handler and a Runnable in the main thread to call with the data after it arrives.Emanative
@Nick: I'm struggling to understand. At what point is using an AsyncTask an issue - what part of doing it do you think isn't going to work?Contrariety
@MisterSquonk Using AsyncTask is an issue, because you have to call execute on an instance of the object. However, to use the ImageGetter, you pass the instance as a parameter of the Html.fromHtml function, and that function is designed to call only the getDrawable method of the ImageGetter, which would be run on the same thread, thereby causing a NetworkOnMainThreadExceptionPredatory
For images overlapping text, check this answer: https://mcmap.net/q/453878/-android-imagegetter-images-overlapping-text (works well on PRE-ICS but not well on ICS).Accelerant
For an alternate approach using coroutines + Glide see: https://mcmap.net/q/242297/-html-imagegetter-textviewOliver
I
103

I've done something very similar (I think) to what you want to do. What I needed to do back then is parse the HTML and set it up back to TextView and I needed to use Html.ImageGetter as well and having the same problem on fetching image on the main thread.

The steps that I did basically:

  • Create my own subclass for Drawable to facilitate redraw, I called it URLDrawable
  • Return the URLDrawable in getDrawable method of Html.ImageGetter
  • Once onPostExecute is called, I redraw the container of the Spanned result

Now the code for URLDrawable is as follow


public class URLDrawable extends BitmapDrawable {
    // the drawable that you need to set, you could set the initial drawing
    // with the loading image if you need to
    protected Drawable drawable;

    @Override
    public void draw(Canvas canvas) {
        // override the draw to facilitate refresh function later
        if(drawable != null) {
            drawable.draw(canvas);
        }
    }
}

Simple enough, I just override draw so it would pick the Drawable that I set over there after AsyncTask finishes.

The following class is the implementation of Html.ImageGetter and the one that fetches the image from AsyncTask and update the image

public class URLImageParser implements ImageGetter {
    Context c;
    View container;

    /***
     * Construct the URLImageParser which will execute AsyncTask and refresh the container
     * @param t
     * @param c
     */
    public URLImageParser(View t, Context c) {
        this.c = c;
        this.container = t;
    }

    public Drawable getDrawable(String source) {
        URLDrawable urlDrawable = new URLDrawable();

        // get the actual source
        ImageGetterAsyncTask asyncTask = 
            new ImageGetterAsyncTask( urlDrawable);

        asyncTask.execute(source);

        // return reference to URLDrawable where I will change with actual image from
        // the src tag
        return urlDrawable;
    }

    public class ImageGetterAsyncTask extends AsyncTask<String, Void, Drawable>  {
        URLDrawable urlDrawable;

        public ImageGetterAsyncTask(URLDrawable d) {
            this.urlDrawable = d;
        }

        @Override
        protected Drawable doInBackground(String... params) {
            String source = params[0];
            return fetchDrawable(source);
        }

        @Override
        protected void onPostExecute(Drawable result) {
            // set the correct bound according to the result from HTTP call
            urlDrawable.setBounds(0, 0, 0 + result.getIntrinsicWidth(), 0 
                    + result.getIntrinsicHeight()); 

            // change the reference of the current drawable to the result
            // from the HTTP call
            urlDrawable.drawable = result;

            // redraw the image by invalidating the container
            URLImageParser.this.container.invalidate();
        }

        /***
         * Get the Drawable from URL
         * @param urlString
         * @return
         */
        public Drawable fetchDrawable(String urlString) {
            try {
                InputStream is = fetch(urlString);
                Drawable drawable = Drawable.createFromStream(is, "src");
                drawable.setBounds(0, 0, 0 + drawable.getIntrinsicWidth(), 0 
                        + drawable.getIntrinsicHeight()); 
                return drawable;
            } catch (Exception e) {
                return null;
            } 
        }

        private InputStream fetch(String urlString) throws MalformedURLException, IOException {
            DefaultHttpClient httpClient = new DefaultHttpClient();
            HttpGet request = new HttpGet(urlString);
            HttpResponse response = httpClient.execute(request);
            return response.getEntity().getContent();
        }
    }
}

Finally, below is the sample program to demonstrate how things work:

String html = "Hello " +
"<img src='http://www.gravatar.com/avatar/" + 
"f9dd8b16d54f483f22c0b7a7e3d840f9?s=32&d=identicon&r=PG'/>" +
" This is a test " +
"<img src='http://www.gravatar.com/avatar/a9317e7f0a78bb10a980cadd9dd035c9?s=32&d=identicon&r=PG'/>";

this.textView = (TextView)this.findViewById(R.id.textview);
URLImageParser p = new URLImageParser(textView, this);
Spanned htmlSpan = Html.fromHtml(html, p, null);
textView.setText(htmlSpan);
Interrex answered 16/9, 2011 at 9:35 Comment(11)
You are amazing, this is a wonderful answer, great explanation, and best of all it works. Thanks a million!Predatory
This works great! One issue though, when the images are large, and there are lines of text above them, the images cover the text above them, rather than the text shifting to make room. Any thoughts?Theurer
I am trying to use solution posted above but the image is hiding text in html file and also if there are many images they are not positioned properly and also while scrolling images hide when scrollview reaches top or bottom edge. I have tried putting <br/> and <p> for spaces between text and image but does not help.Paredes
Thanks so much for this solution, but my images are always being drawn on a small rectangle that have the same size with any image. Also the image is out of place, it's being cropped. My TextView has the attributes width and height set to fill_parent and wrap_content.Asthmatic
This works wonderfully, however, invalidate() is not enough as @Theurer suggests. If you know the size of your images beforehand you can simply setup the default drawable to be big enough and invalidate will work, however, if you don't know this information before downloading the images, and some of the bigger ones overlap your text, you must force the textview to re-render the text and not just redraw() or re-requestLayout(). A simple solution is: TextView t = (TextView) URLImageGetterAsync.this.container; t.setText(t.getText()); You can decide if you need it more robust than that.Dasya
Image overlap bug fix availalbe here: #7870812 (works for both pre-ICS and ICS)Ricercar
Doesn't work for me :( Null pointer exception for the: " urlDrawable.setBounds(0, 0, 0 + result.getIntrinsicWidth(), 0 "Homocentric
If the Html has base64 images, this answer gives Null pointer exception as mentioned in above comment.. I have updated this answer to handle Base64 images as well.. Please refer to the answer https://mcmap.net/q/453879/-load-images-in-html-fromhtml-in-textview-http-url-images-base64-url-imagesLoopy
how i get multiple images from html tag where images are in SD cardDiplo
I got stuck with the issue ::: The inline style not applied , like style=color:red;"Soapbark
For a similar approach using Kotlin and coroutines + Glide see: https://mcmap.net/q/242297/-html-imagegetter-textviewOliver
M
5

Pretty nice. However, The type DefaultHttpClient is deprecated. Try this on fetch method:

private InputStream fetch(String urlString) throws MalformedURLException, IOException {

        URL url = new URL(urlString);
        HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
        InputStream stream = urlConnection.getInputStream();

        return stream;

    }
Maidinwaiting answered 1/5, 2016 at 23:34 Comment(1)
I got stuck with the issue ::: The inline style not applied , like style=color:red;"Soapbark
R
1

I got a bit confused, is the HTML you want to render static and merely for formatting, or is it dynamic and coming from the web? If you wanted the latter, that is, to render the HTML and retrieve the images, well it's gonna be a bit of a pain (suggestion - just use a WebView?).

Anyway, you would first have to run the AsyncTask to retrieve the initial HTML. You would then pass those results into the Html.fromHtml() with the custom implementation for the Html.ImageGetter class. Then in that implementation you'd have to kick off an individual AsyncTask to retrieve each of the images (you probably want to implement some caching).

However, from reading the documentation (and I think I've seen some samples), it would seem to me that this is not what they meant the Html.ImageGetter for. I think it's meant for hardcoded HTML with references to internal drawables, but that's just my take.

Regurgitation answered 15/9, 2011 at 4:49 Comment(1)
It's coming from the web, and okay, that makes sense I guess. I really don't want to use a WebView. I already wrote a task that returns a Drawable when given the URL of an image for a different part of my app, so maybe I can leverage that in some way. What a painPredatory
C
1

if you using Picasso, change part of @momo code to

/***
         * Get the Drawable from URL
         * @param urlString
         * @return
         */
        public Drawable fetchDrawable(String urlString) {
            try {
                Drawable drawable = fetch(urlString);
                drawable.setBounds(0, 0, 0 + drawable.getIntrinsicWidth(), 0
                        + drawable.getIntrinsicHeight());
                return drawable;
            } catch (Exception e) {
                return null;
            }
        }

        private Drawable fetch(String urlString) throws MalformedURLException, IOException {
            return new BitmapDrawable(c.getResources(), Picasso.with(c).load(urlString).get());
        }
Colander answered 10/8, 2016 at 10:35 Comment(1)
I got stuck with the issue ::: The inline style not applied , like style=color:red;"Soapbark
A
0

AsyncTask task = new AsyncTask (){

                @Override
                protected String doInBackground(Integer... params) {
                    span = Html.fromHtml(noticeList.get(0)
                            .getContent(), imgGetter, null);
                    return null;
                }
                @Override
                protected void onPostExecute(String result) {
                    super.onPostExecute(result);
                    text.setMovementMethod(ScrollingMovementMethod
                            .getInstance());
                    if(span != null){
                        text.setText(span);
                    }
                }
            };

            task.execute();
Aceydeucy answered 4/2, 2016 at 6:25 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.