Android HTML ImageGetter as AsyncTask

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

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

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. – Yevgeny Simkin Sep 15, 2011 at 0:21 @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? – Squonk Sep 15, 2011 at 0:35 @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 NetworkOnMainThreadException – Nick Sep 15, 2011 at 0:51 For images overlapping text, check this answer: stackoverflow.com/a/10208504/1373568 (works well on PRE-ICS but not well on ICS). – Aladin Q May 5, 2012 at 11:22 For an alternate approach using coroutines + Glide see: stackoverflow.com/a/58091529/683658 – Marco RS Sep 25, 2019 at 5:16

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


    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);
                You are amazing, this is a wonderful answer, great explanation, and best of all it works. Thanks a million!
– Nick
                Sep 16, 2011 at 15:35
                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?
– maxpower47
                Mar 16, 2012 at 16:19
                This works wonderfully, however, invalidate() is not enough as @maxpower47 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.
– dcow
                Mar 26, 2013 at 18:14
                Image overlap bug fix availalbe here: stackoverflow.com/questions/7870312/… (works for both pre-ICS and ICS)
– Pascal
                Mar 29, 2013 at 8:53
                Doesn't work for me :( Null pointer exception for the: "   urlDrawable.setBounds(0, 0, 0 + result.getIntrinsicWidth(), 0 "
– Groosha
                Jan 20, 2014 at 23:25
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;
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. 
                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 pain
– Nick
                Sep 15, 2011 at 23:09
        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());
                @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();
        Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.