Android: Replace -tag with ImageViews

Question

I'm showing a bit of HTML in a TextView using Html.fromHtml, which works great.

Sometimes this html will have img-tags, and I'd also like to display these.

I tried Android HTML ImageGetter as AsyncTask but this seemed slow and unpredictable (size of the image).

Example HTML (it can differ...):

<h2>title</h2><br /><p>TEXT</p>
<p style="text-align: center;">Anyways, fokea?.<img src="http://xxxximages/1048268-11-1426170876314.jpg" alt="" /><br /><br /><br /></p>
<p>Jo, veldig mye blomster og duftelys. elt feil sk. Luksus!</p>
<p style="text-align: center;"><img src="http://xxxx/images/1048268-11-1426171000272.jpg" alt="" /></p>
<p><strong>Håper dere har det hakket bedre enn meg.</strong> </p>

I thought about using JSOUP to get all img-tags, and then create X amounts of ImageViews (and populating them with Picasso). This works OK, but the images are always either on top or the bottom of text.

What would be the best solution for replacing every img-tag and for each one, at the correct place according to the text, create a new ImageView?

EDIT: Well, since no-one had any suggestions, I made this quick and dirty one.

ArrayList<String> lines = new ArrayList<>();
    Scanner scanner = new Scanner(content);
    while (scanner.hasNextLine()) {
        String line = scanner.nextLine();
        lines.add(line);
    }
    scanner.close();


 for(int i = 0; i < lines.size(); i++) {
        Document doc = Jsoup.parse(lines.get(i));
        Elements imgs = doc.select("img");
        if(imgs.size() == 0) {
            TextView textView = new TextView(this);
            textView.setText(Html.fromHtml(lines.get(i)));
            maincontainer.addView(textView);
        } else {
            for(Element el : imgs) {
                Element img = el.select("img").first();
                String image = img.absUrl("src");
                ImageView imageView = new ImageView(this);
                imageView.setPadding(0, 10, 0, 10);
                imageView.setAdjustViewBounds(true);
                Picasso.with(getApplicationContext()).load(image).into(imageView);
                maincontainer.addView(imageView);
            }
        }
    }

It looks and works fantastic, although I'm sure the code is far from optimal.

I am not quite certain why you think this is a worthwhile approach to your problem. With regards to "slow", downloading the image will take time, regardless of whether the image is in an `ImageSpan` (what `` tags turn into) or an `ImageView`. With regards to "unpredictable (size of the image)", that too is your responsibility, whether it is an `ImageSpan` or `ImageView`. All you seem to be doing is adding complexity without actually addressing either of your stated problems. — CommonsWare, Mar 14 '15 at 16:21
Ok, I'm sure you're right, but when I load it using ImageGetter, the images slowly pops up, but when creating a few imageviews and loading it with Picasso, it's done loading instantly... — dbso, Mar 14 '15 at 16:29
That may be a function of the code that you are using in the `ImageGetter` itself. I am guessing that you are using the highly-upvoted answer there. That's not great code, if for no other reason than it is using the now-deprecated HttpClient API. [This question](http://stackoverflow.com/questions/24068753/adding-imagespan-after-html-fromhtml) contains code for using Picasso to populate `ImageSpans`. I would give something like that a shot. — CommonsWare, Mar 14 '15 at 16:35

score 2 · Accepted Answer · answered Mar 15 '15 at 14:29

I solved it using this:

ArrayList<String> lines = new ArrayList<>();
Scanner scanner = new Scanner(content);
while (scanner.hasNextLine()) {
    String line = scanner.nextLine();
    lines.add(line);
}
scanner.close();

for(int i = 0; i < lines.size(); i++) {
    Document doc = Jsoup.parse(lines.get(i));
    Elements imgs = doc.select("img");
    if(imgs.size() == 0) {
        TextView textView = new TextView(this);
        textView.setText(Html.fromHtml(lines.get(i)));
        maincontainer.addView(textView);
    } else {
        for(Element el : imgs) {
            Element img = el.select("img").first();
            String image = img.absUrl("src");
            ImageView imageView = new ImageView(this);
            imageView.setPadding(0, 10, 0, 10);
            imageView.setAdjustViewBounds(true);
            Picasso.with(getApplicationContext()).load(image).into(imageView);
            maincontainer.addView(imageView);
        }
    }
}

Android: Replace -tag with ImageViews

1 Answers1

Linked