0

I have a png file loaded in image view in the layout. Then I have a svg image which I need to render on top of that png image.

Please suggest any possible ways.

And let me know if you have any clarifications on my question.

SVG svg1 = SVGParser.getSVGFromResource(getResources(), R.raw.svg_image1);
    Drawable resID1 = svg1.createPictureDrawable();

    SVG svg2 = SVGParser.getSVGFromResource(getResources(), R.raw.svg_image2);
    Drawable resID2 = svg2.createPictureDrawable();

    SVG svg3 = SVGParser.getSVGFromResource(getResources(), R.raw.svg_image3);
    Drawable resID3 = svg3.createPictureDrawable();

    Drawable mainImage = this.getResources().getDrawable(R.drawable.main_image);

    LayerDrawable ld = new LayerDrawable(new Drawable[]{mainImage, resID1, resID2, resID3}); 
    ld.setLayerInset(1, 1, 1, 1, 1); 

    ImageView imageView = (ImageView) findViewById(R.id.img1);
    imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    imageView.setImageDrawable(ld);
Firnaz
  • 553
  • 7
  • 31
  • You need a library to get the SVG file rendered as an image. Then simply overlay the 2 images. [Here](http://stackoverflow.com/a/27734297/2649012) I answered on how to overlay 2 images. – Phantômaxx Apr 20 '15 at 10:47
  • us this for example: `https://code.google.com/p/svg-android/` then use `LayerDrawable` to overlay two `Drawables` – pskink Apr 20 '15 at 10:50
  • I've edited your title. See [Should questions include “tags” in their titles?](http://meta.stackoverflow.com/a/130208/158100) where the consensus is "no, they should not". – rene Apr 20 '15 at 11:52
  • Thanks pskink. I have used two svg files overlayed on the png file. But i am not able to view the png file as background. I have tried opacity concepts. Nothing works. The 2 svg files are in picture drawable format and png in bitmap drawable format. – Firnaz Apr 20 '15 at 12:30
  • I posted a comment where I linked an answer for that purpose. – Phantômaxx Apr 20 '15 at 13:03
  • just use LayerDrawable with original BitmapDrawable and drawable you are getting from svg.createPictureDrawable() – pskink Apr 20 '15 at 13:14
  • Yes but we are able to view those 2 picture drawables(SVG Images) alone whereas Bitmap drawable(PNG file) is not visible. – Firnaz Apr 20 '15 at 13:18
  • use LayerDrawable with 3 Drawables: first one is a BitmapDrawable the second two are your svg Drawables, the first one you can get by getResources().getDrawable(R.drawable.something) – pskink Apr 20 '15 at 13:34
  • Pls find my updated code above. in which i am not able to get that png image visible – Firnaz Apr 20 '15 at 13:53
  • do you see anything with that `LayerDrawable ld = new LayerDrawable(new Drawable[]{mainImage})` ? if so add the next Drawable: `{mainImage, resID1}` – pskink Apr 20 '15 at 14:02

1 Answers1

2

There are several ways to achieve what you want.

  1. You could use a FrameLayout to stack an ImageView and an SVGImageView.

  2. You could read your PNG into a Bitmap. Then use that Bitmap to create a Canvas. Then pass that Canvas to SVG.renderToCanvas();

Plus several others I can think of. Your question is a bit broad. The best solution will depend on other factors, such as what you want to do once it is rendered. Is it going to be interactive? Updated and redrawn? etc.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Thanks paul. Is it possible using LayerDrawable ? – Firnaz Apr 20 '15 at 12:53
  • Yes. You could create BitmapDrawable from the PNG, and a PictureDrawable from the SVG (with AndroidSVG). Once you have those you can create a LayerDrawable from them. – Paul LeBeau Apr 20 '15 at 22:05
  • Thanks. I did it. Is it possible to implement onClick or onTouch on the layerDrawable. Kindly help – Firnaz Apr 21 '15 at 09:35
  • Not on the Drawable you can't. But you can capture clicks on the ImageView you are applying the drawable to. – Paul LeBeau Apr 21 '15 at 11:20
  • but i need to get which picture drawable i have clicked. whether resID1 or resID2 in the above code – Firnaz Apr 21 '15 at 11:25
  • There is currently no support in AndroidSVG for testing whether a point touches an SVG element. Nor does that feature exist for any sort of Drawable. You may need to do something like: render everything to ARGB Bitmaps and when you need to test a point, read the pixel and see if it is non-transparent. If it isn't test the same pixel on the next Bitmap below the current one. – Paul LeBeau Apr 21 '15 at 12:29
  • Thank you paul. I am doing it by the RGB way – Firnaz Apr 22 '15 at 05:53