Android Volley display SVG image

Question

In my Android App I download text-content from my website and store it in my mysql database. Now I want to download and cache images from the same website. With AndroidVolley's <com.android.volley.toolbox.NetworkImageView, downloading normal pictures works pretty good. But I want to download SVG-vector images, cache them and display in my App. So far this is not possible in Android Volley...

I already tried to download the SVGs with AndroidVolley as a String and then put them in a svg-android element (See here), but svg-android did never show my image. It seems, that it can't display SVGs created by Inkscape...

Does anybody know a simple way, how to download these files and display them in a view?

Thanks

// UPDATE 27.3.2015 //

So this is my solution: With Android Volley I set a StringRequest to access my SVG-Image as a String. The AndroidSVG library (don't mix up with the svg-android library) may convert this String into a SVG-Object and put it into an SVGImageView-View. Here is an example Code how it worked:

            StringRequest stringRequest = new StringRequest("http://******/image.svg",new Response.Listener<String>() {
                @Override
                public void onResponse(String response) {
                    try {
                        SVG svg = SVG.getFromString(response);
                        View view = getView();
                        if(view != null){
                            SVGImageView target = (SVGImageView)view.findViewById(catID);
                            target.setSVG(svg);
                        }

                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            },new Response.ErrorListener() {
                @Override
                public void onErrorResponse(VolleyError error) {
                    Log.d(Globals.TAG,"Fehler "+error);
                }
            });
            RequestQueue queue = Volley.newRequestQueue(mContext);
            stringRequest.setShouldCache(true);
            queue.add(stringRequest);

Thanks a lot!

Answer 1

You can try two things:

1. With svg-android library, you need to set

imgView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

to make it work.

2. If the first approach doesn't work, you can try using SVGImageView.

Answer 2

Here is a slightly different solution because I wanted to store the image loaded in a variable for reuse several times.

So I just changed the source Volley replacing "private" with "protected" for the method

protected Response <Bitmap> doParse (NetworkResponse response)

Then I created a class that inherits from ImageRequest and which uses the AndroidSVG library.

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.widget.ImageView;

import com.android.volley.NetworkResponse;
import com.android.volley.ParseError;
import com.android.volley.Response;
import com.android.volley.toolbox.HttpHeaderParser;
import com.android.volley.toolbox.ImageRequest;
import com.caverock.androidsvg.SVG;
import com.caverock.androidsvg.SVGParseException;

/**
* Version modifiée de ImageRequest de Volley pour gérer aussi les images SVG
*/
public class MultiFormatImageRequest extends ImageRequest {

final String TAG = "EE." + getClass().getSimpleName();

boolean isSVG = false;

public MultiFormatImageRequest(String url, Response.Listener<Bitmap> listener, int maxWidth, int maxHeight,
                               ImageView.ScaleType scaleType, Bitmap.Config decodeConfig, Response.ErrorListener errorListener) {
    super(url, listener, maxWidth, maxHeight, scaleType, decodeConfig, errorListener);
    String extension = url.substring(url.lastIndexOf("."));
    isSVG = (extension.toUpperCase().contains("SVG"));
}

/****
 * ATTENTION : "private" Response in Volley need to be changed in protected
 */
@Override
protected Response<Bitmap> doParse(NetworkResponse response) {
    Bitmap image = null;
    if (isSVG) {
        try {
            SVG svg = SVG.getFromString(new String(response.data));
            int h = (int) svg.getDocumentHeight();
            int w = (int) svg.getDocumentWidth();
            image = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_4444);  // transparent
            Canvas bmcanvas = new Canvas(image);
            svg.renderToCanvas(bmcanvas);
        } catch (SVGParseException ex) {
            ex.printStackTrace();
        }

        if (image == null) {
            return Response.error(new ParseError(response));
        } else {
            return Response.success(image, HttpHeaderParser.parseCacheHeaders(response));
        }
    } else
        return super.doParse(response);  // Volley default
    }
}