img src attribute of json value showing small blue colored box in android TextView

Question

I have retrieved JSON value to show it in android TextView This is my sample JSON Value

    "introtext": "The District Administration Office has sealed the case was underway.<img src="images/dec_09_Lazimpat_road_b.JPG" alt="" />"

I used Apache Common lang Liabrary to escape HTML attributes and styles like this.

String str = org.apache.commons.lang3.StringEscapeUtils.unescapeHtml4(stringValue);

and I have set the value to TextView like this

textView.setText(Html.fromHtml(str));

Everything worked fine till here but the text in TextView is shown like in this image

This small blue box is shown where img src attribute is there. I've wasted too long time trying to remove this. Please help me how to remove this box from TextView. Any help will be appreciated.

Answer 1

Try this code:

String s = "The District Administration Office has sealed the case was underway.<img src="images/dec_09_Lazimpat_road_b.JPG" alt="" />";
String str = Html.fromHtml(s).toString();
///// Remove all img tags using Regular Expression 
str = str.replaceAll("[<](/)?img[^>]*[>]", "");
textView.setText(Html.fromHtml(str));

Answer 2

To display Image with html content need to use BitmapDrawable & ImageGetter from HTML too. Using ImageGetter need to download image convert it in bitmap and dislay in TextView using Html.fromHtml with Html Content & instance of the Html.ImageGetter

Below I have give things to resolve the issue mentioned in question

Suggestion I'll suggest you to use WebView for the content where you need to display html text

HTMLImageDrawable

public class HTMLImageDrawable extends BitmapDrawable {

    protected Drawable drawable;

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

HtmlImageParser

 public class HtmlImageParser implements ImageGetter {
    public static final String LOG = HtmlImageParser.class.getName();
    Context c;
    View container;

    public HtmlImageParser(View t, Context c) {
        this.c = c;
        this.container = t;
    }

    @TargetApi(Build.VERSION_CODES.HONEYCOMB)
    public Drawable getDrawable(String source) {
        try {
            HTMLImageDrawable urlDrawable = new HTMLImageDrawable();
            ImageGetterAsyncTask asyncTask = new ImageGetterAsyncTask(
                    urlDrawable);

            if (Build.VERSION.SDK_INT < 11) {
                asyncTask.execute(source);
            } else {
                asyncTask.executeOnExecutor(AsyncTask.THREAD_POOL_EXECUTOR, source);
            }
            return urlDrawable;
        } catch (Exception e) {
            Log.e(LOG, e.getMessage());
        }
        return null;

    }

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

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

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

        @Override
        protected void onPostExecute(Drawable result) {
            try {
                if (urlDrawable != null) {
                    urlDrawable.setBounds(0, 0, 0 + result.getIntrinsicWidth(),
                            0 + result.getIntrinsicHeight());

                    urlDrawable.drawable = result;
                    HtmlImageParser.this.container.invalidate();
                }

            } catch (Exception e) {
                Log.e(LOG, e.getMessage());
            }
        }


        public Drawable fetchDrawable(String urlString) {
            try {
//                InputStream is = fetch(urlString);
                URL imageURL = new URL(urlString);
                InputStream inputStream = imageURL.openStream();
                Drawable drawable = Drawable.createFromStream(inputStream, "src");
                drawable.setBounds(0, 0, 0 + drawable.getIntrinsicWidth(),
                        0 + drawable.getIntrinsicHeight());
                return drawable;
            } catch (Exception e) {
                return null;
            }
        }


    }
}

Add above two classes.

Set Html Text to TextView

TextView htmltext = (TextView) view.findViewById(R.id.htmltext);
    HtmlImageParser clsUrlimageparser = new HtmlImageParser(htmltext.getRootView(), getActivity());

    String imageviewBaseURL = "http://tfwiki.net/mediawiki/images2/thumb/8/8c/";

    //For multiple image if base url is fix & image path is relative
    String img1 = imageviewBaseURL + "AOE_optimus_reformatted.jpg/180px-AOE_optimus_reformatted.jpg";
    String img2 = imageviewBaseURL + "AnimeMach.jpg/82px-AnimeMach.jpg";
    String text = "Android test image text" +
            "<br /> <img style='width:304px;height:228px;' src='" + img1 + "'/>" +
            "<br /> <img style='width:304px;height:228px;' src='" + img2 + "'/>";
    htmlSpan = Html.fromHtml(text, clsUrlimageparser, null);
    htmltext.setText(htmlSpan);