Using Picasso with Image Getter

Question

I ma building a chat application and I am attempting to append an image to an EditText, through use of Picasso to get the image from a URL and the append and ImageGetter to attach the image to the EditText. However, what I have implemented below does not work, as appending messages when using the app displays nothing (but the message does show up in the database).

I have tested without using Picasso, as simply just using the ImageGetter with an image resource within the app works just fine, only it's not from a URL as is required.

What is the proper way to configure the ImageGetter and/or the append method so that this functionality will work with Picasso? Or is there a simpler way?

Append method:

public void appendToMessageHistory(final String username,
            final String message) {
        if (username != null && message != null) {

            Picasso.with(getBaseContext())
                    .load("http://localhost:3000/uploads/campaign/image/2/2.jpg")
                    .into(new Target() {

                        @Override
                        public void onPrepareLoad(Drawable arg0) {

                        }

                        @Override
                        public void onBitmapLoaded(Bitmap bitmap,
                                LoadedFrom arg1) {
                            Drawable drawImage = new BitmapDrawable(
                                    getBaseContext().getResources(), bitmap);

                            drawImage.setBounds(0, 0,
                                    drawImage.getIntrinsicHeight(),
                                    drawImage.getIntrinsicWidth());
                            messageHistoryText.append(Html.fromHtml("<b>"
                                    + username + ":" + "</b>" + "<br>"));
                            messageHistoryText.append(Html.fromHtml(message
                                    + "<hr>" + "<br>")
                                    + System.getProperty("line.separator") + "");

                            messageHistoryText.append(Html
                                    .fromHtml("<img src = '" + drawImage
                                            + "'/>",
                            imageGetter,
                            null));
                        }

                        @Override
                        public void onBitmapFailed(Drawable arg0) {

                        }
                    });

        }
    }

ImageGetter:

ImageGetter imageGetter = new ImageGetter() {
        Drawable imageUsed=null;

        @Override
        public Drawable getDrawable(String source) {

            Picasso.with(getBaseContext())
                    .load("http://localhost:3000/uploads/campaign/image/2/2.jpg")
                    .into(new Target() {

                        @Override
                        public void onPrepareLoad(Drawable arg0) {

                        }

                        @Override
                        public void onBitmapLoaded(Bitmap bitmap,
                                LoadedFrom arg1) {
                            Drawable drawImage = new BitmapDrawable(
                                    getBaseContext().getResources(), bitmap);

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

                            imageUsed=drawImage;

                        }

                        @Override
                        public void onBitmapFailed(Drawable arg0) {

                        }
                    });

            return imageUsed;
        }

    };

Answer 1

I couldn't get it to work with using Picasso's Target...

My workaround is:

• use an AsyncTask for concurrency
• use Picasso's get() method to load the image synchronously in the AsyncTask's background method

Like this:

public class PicassoImageGetter implements Html.ImageGetter {

final Resources resources;

final Picasso pablo;

final TextView textView;

public PicassoImageGetter(final TextView textView, final Resources resources, final Picasso pablo) {
    this.textView  = textView;
    this.resources = resources;
    this.pablo     = pablo;
}

@Override public Drawable getDrawable(final String source) {
    final BitmapDrawablePlaceHolder result = new BitmapDrawablePlaceHolder();

    new AsyncTask<Void, Void, Bitmap>() {

        @Override
        protected Bitmap doInBackground(final Void... meh) {
            try {
                return pablo.load(source).get();
            } catch (Exception e) {
                return null;
            }
        }

        @Override
        protected void onPostExecute(final Bitmap bitmap) {
            try {
                final BitmapDrawable drawable = new BitmapDrawable(resources, bitmap);

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

                result.setDrawable(drawable);
                result.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

                textView.setText(textView.getText()); // invalidate() doesn't work correctly...
            } catch (Exception e) {
                /* nom nom nom*/
            }
        }

    }.execute((Void) null);

    return result;
}

static class BitmapDrawablePlaceHolder extends BitmapDrawable {

    protected Drawable drawable;

    @Override
    public void draw(final Canvas canvas) {
        if (drawable != null) {
            drawable.draw(canvas);
        }
    }

    public void setDrawable(Drawable drawable) {
        this.drawable = drawable;
    }

}

Hope this is useful.

Answer 2

I built upon Thomas' answer. I used the existing Picasso methods to download any images on a different thread and accounted for the placeholder Drawables as well.

public class PicassoImageGetter implements Html.ImageGetter {
    private TextView textView = null;

    public PicassoImageGetter() {}

    public PicassoImageGetter(TextView target) {
        textView = target;
    }

    @Override
    public Drawable getDrawable(String source) {
        BitmapDrawablePlaceHolder drawable = new BitmapDrawablePlaceHolder();

        Context context = FeedSurferApp.getContext();
        FeedSurferApp
                .getPicasso()
                .load(source)
                .error(ResourcesCompat.getDrawable(context.getResources(), R.drawable.connection_error, context.getTheme()))
                .into(drawable);

        return drawable;
    }

    private class BitmapDrawablePlaceHolder extends BitmapDrawable implements Target {
        protected Drawable drawable;

        @Override
        public void draw(final Canvas canvas) {
            if (drawable != null) {
                drawable.draw(canvas);
            }
        }

        public void setDrawable(Drawable drawable) {
            this.drawable = drawable;
            drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
            setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
            if (textView != null) {
                textView.setText(textView.getText());
            }
        }

        @Override
        public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
            setDrawable(new BitmapDrawable(FeedSurferApp.getContext().getResources(), bitmap));
        }

        @Override
        public void onBitmapFailed(Drawable errorDrawable) {
            setDrawable(errorDrawable);
        }

        @Override
        public void onPrepareLoad(Drawable placeHolderDrawable) {}
    }
}

Answer 3

I found a way to use ImageGetter with Picasso Target:

    public Drawable getDrawable(String source) {

            final BitmapDrawablePlaceHolder result = new BitmapDrawablePlaceHolder();

            Picasso.with(getContext()).load(source).into(new Target() {
                @Override public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
                    final BitmapDrawable drawable = new BitmapDrawable(mContext.getResources(), bitmap);

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


                    result.setDrawable(drawable);
                    result.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());

                    content.setText(content.getText());




                    // cache is now warmed up
                }
                @Override public void onBitmapFailed(Drawable errorDrawable) { }
                @Override public void onPrepareLoad(Drawable placeHolderDrawable) { }
            });
            return result;

}

This uses the cache and is no longer a synchronous call requiring the AsyncTask.

Credit to: Fetch images with Callback in Picasso?