Modern way to download and caching inline images from html content inside TextView (Kotlin)

Question

According to this question, I used the following two classes to download the images inside (HTML content <img tag), but not too efficient for some reasons, first sometimes it's not to cache all images, second the static Picasso field causes a leak in the app, so I looking for a better way and support kaolin for sure

PicassoCache

public class PicassoCache {

//    @SuppressLint("StaticFieldLeak")
    private static Picasso picassoInstance = null;

    private PicassoCache(Context context) {

        Downloader downloader = new OkHttp3Downloader(context, Integer.MAX_VALUE);
        Picasso.Builder builder = new Picasso.Builder(context);
        builder.downloader(downloader);
        picassoInstance = builder.build();
    }

    public static Picasso getPicassoInstance(Context context) {

        if (picassoInstance == null) {

            //noinspection InstantiationOfUtilityClass
            new PicassoCache(context);
            return picassoInstance;
        }

        return picassoInstance;
    }
}

PicassoImageGetter


public class PicassoImageGetter implements Html.ImageGetter {

    private static final String TAG = "PicassoImageGetter";

    private TextView textView = null;
    Context mContext;

    public PicassoImageGetter(TextView target, Context context) {
        textView = target;
        mContext = context;
    }

    public PicassoImageGetter() {

    }

    @Override
    public Drawable getDrawable(String source) {
        BitmapDrawablePlaceHolder drawable = new BitmapDrawablePlaceHolder();
//        Picasso.get().load(source).into(drawable);
        PicassoCache.getPicassoInstance(mContext)
                .load(source)
                .priority(Picasso.Priority.HIGH)
                .error(R.drawable.no_image)
                .into(drawable);

        return drawable;

    }

    @SuppressWarnings("deprecation")
    private class BitmapDrawablePlaceHolder extends BitmapDrawable implements com.squareup.picasso.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;
                int width = drawable.getIntrinsicWidth();
                int height = drawable.getIntrinsicHeight();
                drawable.setBounds(0, 0, width, height);
                setBounds(0, 0, width, height);
            if (textView != null) {
                textView.setText(textView.getText());
            }
        }

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

        @Override
        public void onBitmapFailed(Exception e, Drawable errorDrawable) {
            setDrawable(errorDrawable);
            Log.e(TAG, "onBitmapFailed: "+e.toString() );
        }

        @Override
        public void onPrepareLoad(Drawable placeHolderDrawable) {

        }

    }
}

and I used it like this

val imageGetter = PicassoImageGetter(binding.blogContent, this)
        val html: Spannable = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            Html.fromHtml(content, Html.FROM_HTML_MODE_LEGACY, imageGetter, null) as Spannable
        } else {
            Html.fromHtml(content, imageGetter, null) as Spannable
        }
        binding.blogContent.text = html

Result

score 0 · Answer 1 · answered Sep 07 '22 at 01:28

Take a look at the accepted answer to this question on how to replace a placeholder in an HTML string processed by Html or HtmlCompat. (The sample project in the answer awarded the bounty has a slightly improved solution.) You would need to replace the simulateNetworkFetch() function with another that actually does a network fetch. (This was just a demo for the answer.)

For efficiently fetching images from a network, I suggest that you take a look at the Glide library. There are tutorials available online on how to to implement Glide into a project. I am sure the Picasso has similar functionality, but I don't have any experience with it.

I looked at your method, but unfortunately, it's not suitable in my case because of the URL of images in the content itself, and I can't get each URL of it since it's uncountable, and don't know if the URL has images or not, the `PicassoImageGetter` and `PicassoCache` classes handle all this work, I don't care about the library glide or Picasso the important thing is using the more efficient one — Dr Mido, Sep 07 '22 at 13:34

score 0 · Accepted Answer · answered Sep 08 '22 at 09:39

I found this library html-textview sufficientlysecure.htmltextview.HtmlTextView

the dependency

in project Gradle file:

repositories {
    jcenter()
}

in App Gradle file:

dependencies {
implementation 'org.sufficientlysecure:html-textview:3.9'
}

Inside XML file replace your textView with:

<org.sufficientlysecure.htmltextview.HtmlTextView
      android:id="@+id/allNewsBlockTextView"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_margin="2dp"
      android:textColor="#000"
      android:textSize="18sp"
      app:htmlToString="@{detailsViewModel.selectedText}" />

there's one problem the project has been stopped. 4.0 is the last release and there's no more update/maintaining, I'll use it until I found a better solution

Modern way to download and caching inline images from html content inside TextView (Kotlin)

2 Answers2