Android: how to deal with html tags that are embedded in a string retrieved using JSON

Question

I have a news website that displays articles, i have written a java code in android studio to get the article's content from a URL like this as JSON and it's all good so far.

But in the article there may be photos in the description, now i want to get the html <img /> tags from the description node and display the images properly in my android application where they occur in the description.

This is my test code if that helps:

import java.io.IOException;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.util.EntityUtils;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.app.ProgressDialog;
import android.content.DialogInterface;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.AsyncTask;

import android.os.Bundle;
import android.app.Activity;
import android.text.Html;
import android.util.Log;
import android.widget.ImageView;
import android.widget.TextView;

import java.io.InputStream;


public class SingleContactActivity extends Activity {

    public static String myArticleUrl = "http://ana.fm/api/article/";
    TextView title;
    TextView desc;
    ImageView img;
    String ar_id;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.article);

        title = (TextView) findViewById(R.id.single_article_title);
        desc = (TextView) findViewById(R.id.single_article_desc);
        img = (ImageView) findViewById(R.id.single_article_cover_photo);

        ar_id = getIntent().getExtras().getString("id");

        myArticleUrl = myArticleUrl.concat(ar_id);

        new LoadAllArticles().execute();

    }

    // Load an image from a url
    private class DownloadImageTask extends AsyncTask<String, Void, Bitmap> {
        ImageView bmImage;

        public DownloadImageTask(ImageView bmImage) {
            this.bmImage = bmImage;
        }

        protected Bitmap doInBackground(String... urls) {
            String urldisplay = urls[0];
            Bitmap mIcon11 = null;
            try {
                InputStream in = new java.net.URL(urldisplay).openStream();
                mIcon11 = BitmapFactory.decodeStream(in);
            } catch (Exception e) {
                Log.e("Error", e.getMessage());
                e.printStackTrace();
            }
            return mIcon11;
        }

        protected void onPostExecute(Bitmap result) {
            bmImage.setImageBitmap(result);
        }
    }


    // LOADING THE ARTICLE CONTENTS IN THE BACKGROUND
    class LoadAllArticles extends AsyncTask<String, String, Void> {

        private ProgressDialog progressDialog = new ProgressDialog(SingleContactActivity.this);
        InputStream inputStream = null;
        String result = "";
        HttpResponse httpResponse;
        HttpEntity httpEntity;

        protected void onPreExecute() {
            progressDialog.setMessage("Downloading article...");
            progressDialog.show();
            progressDialog.setOnCancelListener(new DialogInterface.OnCancelListener() {
                public void onCancel(DialogInterface arg0) {
                    LoadAllArticles.this.cancel(true);
                }
            });
        }

        @Override
        protected Void doInBackground(String... params) {

            String url_select = myArticleUrl;

            // Set up HTTP Get
            HttpClient httpClient = new DefaultHttpClient();
            HttpGet httpGet = new HttpGet(url_select);

            try {


                httpResponse = httpClient.execute(httpGet);
                result = EntityUtils.toString(httpResponse.getEntity(), "UTF-8");

            } catch (ClientProtocolException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
            return null;
        }

        protected void onPostExecute(Void v) {
            //parse JSON data
            try {

                JSONObject parent_obj = new JSONObject(result);
                JSONArray jArray= parent_obj.getJSONArray("article");
                JSONObject json = jArray.getJSONObject(0);



                String ar_title = json.getString("title");
                String ar_desc = json.getString("description");
                String ar_image = json.getString("inner_photo");


                String newTitle = Html.fromHtml(ar_title).toString();
                title.setText(newTitle);
                String newDesc = Html.fromHtml(ar_desc).toString();
                desc.setText(newDesc);

                if(ar_image != null) {
                    String img_url = "http://www.ana.fm/photos/articles/".concat(ar_image);
                    new DownloadImageTask(img).execute(img_url);
                }

                this.progressDialog.dismiss();
            } catch (JSONException e) {
                Log.e("JSONException", "Error: " + e.toString());
            } // catch (JSONException e)
        }
    }
}

And this is the XML article.xml :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content" android:layout_height="fill_parent">
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="wrap_content"
    android:orientation="vertical">

    <!-- Article Cover Photo -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/single_article_cover_photo"
        android:layout_gravity="center"
        android:layout_weight=".14"/>

    <!-- Article Title -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/single_article_title"
        android:layout_gravity="center"
        android:textColor="#acacac"
        android:layout_weight=".14"/>

    <!-- Article Description -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/single_article_desc"
        android:layout_gravity="center"
        android:layout_weight=".14"/>
    </LinearLayout>
</ScrollView>

Is there a way to do that ?

Max · Accepted Answer · 2015-02-15T00:50:30.437

You can try use the class:

public class UILImageGetter implements Html.ImageGetter {
Context c;
TextView container;

public UILImageGetter(View textView, Context context) {
    this.c = context;
    this.container = (TextView) textView;
}

@Override
public Drawable getDrawable(String source) {
    urlDrawable = new UrlImageDownloader(c.getResources(), source);
    urlDrawable.drawable = c.getResources().getDrawable(R.drawable.no_image);

    ImageLoader.getInstance().loadImage(source, new SimpleListener(urlDrawable));
    return urlDrawable;
}

private class SimpleListener extends SimpleImageLoadingListener {
    UrlImageDownloader urlImageDownloader;

    public SimpleListener(UrlImageDownloader downloader) {
        super();
        urlImageDownloader = downloader;
    }

    @Override
    public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
        int width = loadedImage.getWidth();
        int height = loadedImage.getHeight();

        int newWidth = width;
        int newHeight = height;

        if(width > container.getWidth() ) {
            newWidth = container.getWidth();
            newHeight = (newWidth * height) / width;
        }

        if (view != null) {
            view.getLayoutParams().width = newWidth;
            view.getLayoutParams().height = newHeight;
        }

        Drawable result = new BitmapDrawable(c.getResources(), loadedImage);
        result.setBounds(0, 0, newWidth, newHeight);

        urlImageDownloader.setBounds(0, 0, newWidth, newHeight);
        urlImageDownloader.drawable = result;

        container.setHeight((container.getHeight() + result.getIntrinsicHeight()));
        container.invalidate();
    }
}

private class UrlImageDownloader extends BitmapDrawable {
    public Drawable drawable;

    public UrlImageDownloader(Resources res, String filepath) {
        super(res, filepath);
        drawable = new BitmapDrawable(res, filepath);
    }

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

If you do it, you must import library imageloader. And after them you write this:

Spanned spanned = Html.fromHtml(ar_desc, new UILImageGetter(desc, this), null);
desc.setText(spanned);

Also, you can use WebView.

By the way, use the library imageloader for download your images. This is easy. :) — Max, Feb 15 '15 at 00:47
Thanks for your reply, WebView is slow in older android devices and i think the user can tell that it's a WebView and not a normal activity right ? — Fadi Obaji, Feb 15 '15 at 00:48
Yes, you are right. Then use the UILImageGetter, which I proposed. — Max, Feb 15 '15 at 00:55

Android: how to deal with html tags that are embedded in a string retrieved using JSON

1 Answers1

Linked