Load background from SVG resource

Question

I'd like to use svg-android to load an SVG picture as a layout background. I tried this, but my layout background still white (nothing special in logcat):

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.bg);
    RelativeLayout rl = (RelativeLayout) findViewById(R.id.mainLay);
    rl.setBackground(svg.createPictureDrawable());
}

What am I doing wrong ?

Answer 1

Well, there was a time when even I was wondering about a similar issue of placing an SVG image on a view.

Here's a demonstration which displays an SVG image in a CustomView in Android:

// MainActivity.java
package com.test.svg;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;

public class MainActivity extends Activity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    requestWindowFeature(Window.FEATURE_NO_TITLE);
    getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
      WindowManager.LayoutParams.FLAG_FULLSCREEN);

    CustomView view = new CustomView(this);
    view.setBackgroundResource(android.R.color.holo_green_dark);
    setContentView(view);
  }
}

Here's CustomView class:

// CustomView.java
package com.test.svg;

import java.io.IOException;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Picture;
import android.util.AttributeSet;
import android.view.View;

import com.larvalabs.svgandroid.SVG;
import com.larvalabs.svgandroid.SVGParseException;
import com.larvalabs.svgandroid.SVGParser;

public class CustomView extends View {

  private Picture picture;
  private int scaleFactor;

  public CustomView(Context context) {
    super(context);
    initialize();
  }

  public CustomView(Context context, AttributeSet attrs) {
    super(context, attrs);
    initialize();
  }

  private void initialize() {
    scaleFactor = 1;
    try {
      setLayerType(View.LAYER_TYPE_SOFTWARE, null); // This is important!!!
      SVG svg = SVGParser.getSVGFromAsset(getContext().getAssets(),
        "Character.svg");
      picture = svg.getPicture();
    } catch (SVGParseException e) {
      e.printStackTrace();
    } catch (IOException e) {
      e.printStackTrace();
    }
  }

  public void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.save();
    // Code for centering the SVG.
    canvas.translate((getWidth() - scaleFactor * picture.getWidth()) >> 1,
      (getHeight() - scaleFactor * picture.getHeight()) >> 1);
    canvas.scale(scaleFactor, scaleFactor);
    canvas.drawPicture(picture);
    canvas.restore();
  }
}

What is important in the above snippet is the line:

setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Also download and use SVG-Android-2 instead of using its first version.

Apart from that, you can tweak this code to show the SVG as your background image as well. You just have to scale the SVG with a certain factor and then let the onDraw() method do its work.

Also note that my SVG image is kept in the assets folder and so I have used the AssetManager to load the SVG as shown in the above code.