Search code examples
androidimagesvgadobe-illustrator

SVG image with poor quality in Android Studio


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:

image

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:

enter image description here

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.


Solution

  • 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());
    }