I am pretty new with SVG
images. I am trying to use SVG images in an Android Studio project.
I have an SVG image that I created in Illustrator in my raw
directory within my project.
I have also integrated a jar fie: svg-android.jar...
In my main activity I have this humble code:
package meaningless.safr.com.meaningless;
import android.graphics.Color;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ImageView;
import com.larvalabs.svgandroid.SVG;
import com.larvalabs.svgandroid.SVGParser;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Create a new ImageView
ImageView imageView = new ImageView(this);
// Set the background color to white
imageView.setBackgroundColor(Color.WHITE);
// Parse the SVG file from the resource
SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.personaje);
// Get a drawable from the parsed SVG and set it as the drawable for the ImageView
imageView.setImageDrawable(svg.createPictureDrawable());
// Set the ImageView as the content view for the Activity
setContentView(imageView);
}
}
The SVG file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!--<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">-->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<polygon points="50,25.62 57.82,1.23 57.73,26.84 72.7,6.07 64.69,30.39 85.36,15.26 70.23,35.92 94.55,27.92 73.78,42.89
99.38,42.79 75,50.62 99.38,58.44 73.78,58.34 94.55,73.32 70.23,65.31 85.36,85.97 64.69,70.84 72.7,95.17 57.73,74.39 57.82,100
50,75.62 42.18,100 42.27,74.39 27.3,95.17 35.31,70.84 14.64,85.97 29.77,65.31 5.45,73.32 26.22,58.34 0.62,58.44 25,50.62
0.62,42.79 26.22,42.89 5.45,27.92 29.77,35.92 14.64,15.26 35.31,30.39 27.3,6.07 42.27,26.84 42.18,1.23 "/>
<polygon fill="#FFFFFF" points="50,34.64 55,19.05 54.94,35.42 64.51,22.14 59.39,37.69 72.6,28.02 62.93,41.22 78.47,36.11
65.2,45.68 81.56,45.62 65.98,50.62 81.56,55.61 65.2,55.55 78.47,65.12 62.93,60.01 72.6,73.21 59.39,63.54 64.51,79.09
54.94,65.81 55,82.18 50,66.59 45,82.18 45.06,65.81 35.49,79.09 40.61,63.54 27.4,73.21 37.07,60.01 21.53,65.12 34.8,55.55
18.44,55.61 34.02,50.62 18.44,45.62 34.8,45.68 21.53,36.11 37.07,41.22 27.4,28.02 40.61,37.69 35.49,22.14 45.06,35.42 45,19.05
"/>
<circle fill="#110505" cx="50" cy="50" r="10.89"/>
<circle fill="#FFFFFF" cx="50" cy="50" r="8.71"/>
<circle fill="#E6007E" cx="50" cy="50" r="3.07"/>
</svg>
The code serves its function, to display the image on the device. Now, the problem is, the image appears to be in a poor quality even though its format is SVG. This is how the final output looks like:
Thanks in advance.
UPDATE: I converted the SVG into XML. Now, I used it in my layout code as follow:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="meaningless.safr.com.meaningless.MainActivity">
<ImageView
android:id="@+id/imageButton"
android:src="@drawable/personaje"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</RelativeLayout>
And this is the final output:
It looks nice, just how I wanted it but I think I should be able to have the same result within the Java code using the image with the SVG file.
Thanks again.
I'm not sure if this is has any connection to the cause of your problem, but there is one slightly odd thing about your code. It is point 3 of Rotwang's first comment.
First you are setting a layout to be content of your Activity.
setContentView(R.layout.activity_main);
then you are replacing it with an ImageView
setContentView(imageView);
Normally you would have an ImageView in your layout. You would then get the ImageView using its id
and set the drawable into that.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Create a new ImageView
ImageView imageView = (ImageView) fiindViewById(R.id.imageButton);
// Set the background color to white
imageView.setBackgroundColor(Color.WHITE);
// Parse the SVG file from the resource
SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.personaje);
// Get a drawable from the parsed SVG and set it as the drawable for the ImageView
imageView.setImageDrawable(svg.createPictureDrawable());
}