Vector graphics in Android

Question

I\'m working on an application that displays someone else\'s database of images. The images they have are all vector graphics and can be converted to any format, however keepin

Answer 1

A shameless self-plug, but maybe you'd be interested in ribbon-vg? It's basic, pure Java and fast; relying on cutting-edge techniques to unburden the CPU in the rendering process.

Answer 2

TinyLive SVG provides an SVG viewer for Android. I haven't tried it, so I've no idea if it's any good or not.

Reading this bug request it seems that SVG might be enabled in the Browser - and so presumably WebView too - in Gingerbread. But since this is a possible feature in future release it probably isn't much help to you now.

Answer 3

This question is old. But hope my answer helps future visitors here.

We place VectorDrawable files in drawable folder. AnimatedVectorDrawable also is a drawable . Hence, We place these files also in drawable folder. Below are examples of the two :

vd_omega.xml

    <vector 

        xmlns:android="http://schemas.android.com/apk/res/android"
                android:width="1536dp"
                android:height="864dp"
                android:viewportWidth="1536.0"
                android:viewportHeight="864.0">

            <path
                android:name="my_vector"
                android:pathData="M  162   8
                q    -07    00   -41    26
                q    -34    27   -50    64
                q    -25    59   -19   117
                q     07    70    53   121
                q     57    63   151    62
                q     87   -01   140   -66
                q     46   -55    48  -142
                q     01   -56   -34  -105
                q    -38   -52   -77   -70
                l    -29   -11
                q     16   -01    31   -02
                q     59   -01   119   -02 "

                android:strokeLineCap="round"
                android:strokeColor="#f00f"
                android:fillColor="#00000000"
                android:strokeWidth="32"
                android:trimPathEnd="0"/>



        </vector>

avd_omega_animator.xml

<animated-vector
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:aapt="http://schemas.android.com/aapt"
android:drawable="@drawable/vd_number8">

    <target
        android:name="my_vector"
        android:animation="@animator/trimpath_animator"/>       



</animated-vector>

Then you can animate using an animator file like following:

trimpath_animator.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">

<objectAnimator
android:propertyName="trimPathEnd"
android:duration="1000"
android:valueFrom="0"
android:valueTo="1"
android:repeatCount="0"
android:repeatMode="reverse"/>
</set>

You can have more animators in same file for various properties.

In your layout file

activity_main.xml

<RelativeLayout
    xmlna:android="http://schemasandroid.com/apk/res/android"
    xmlna:app="http://schemasandroid.com/apk/res-auto"
    xmls:tools="http:schemas.android.com/tools"
    android:id="@+some_id"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity">

    <ImageView
    android:id="@+id/my_image"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/avd_omega_animator"/>

</RelativeLayout>

In your activity write the following code in the onCreate:

import ... import ...

public class MyActivity extends Activity{

ImageView myImage;


...
...
setContentView(R.layout.activity_main);
myImage = (ImageView)findViewById(R.id.my_image);
Drawable d = myImage.getDrawable():
if(d instance of Animatable){
d.start;
}

and see the fun.

Just as I used getDrawable above you can also use other methods to place drawables in the ImageView like setImageDrawable("d") etc.

You can also refer to "Introduction to Icon animation techniques" of Mr. Alex Lockwood at:

https://www.androiddesignpatterns.com/2016/11/introduction-to-icon-animation-techniques.html

for good examples.

Hope I gave you helpful answer.

All the example code which I gave above works. It is also simple and straight.

Answer 4

Check out svg-android - it's a relatively new library and it only supports SVG Basic, but it's the library used to draw Androidify. There are examples on the homepage on how to get a Drawable from an SVG which sems to be what you're looking for.

Answer 5

Creating Vector Drawables.

---

I know this question is old, but I came across this same requirement and I'm happy to learn that Android 5.0 supports vector drawables now. You can use <vector> tag and path data to create vector drawables and it works like a charm on API-21. Here is an example that produces a vector image in the shape of a heart.

<!-- res/drawable/heart.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="256dp"
    android:width="256dp"
    android:viewportWidth="32"
    android:viewportHeight="32">

    <!-- draw a path -->
    <path android:fillColor="#8fff"
        android:pathData="M20.5,9.5
                    c-1.955,0,-3.83,1.268,-4.5,3
                    c-0.67,-1.732,-2.547,-3,-4.5,-3
                    C8.957,9.5,7,11.432,7,14
                    c0,3.53,3.793,6.257,9,11.5
                    c5.207,-5.242,9,-7.97,9,-11.5
                    C25,11.432,23.043,9.5,20.5,9.5z" />
</vector>

The only problem I faced so far is that, it is not included in the support libs, and so you cannot make use of them in lower APIs. The wonderful thing is that, you can even animate vector drawables now. Here is an example.

<!-- res/drawable/vectordrawable.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

Read more about vector drawable animation here.

Answer 6

Look at the BetterVectorDrawable lib together with the SVG to VectorDrawable Converter.

BetterVectorDrawable is the VectorDrawable implementation for Android 4.0+ with configurable fall-back behavior on Android 5.0+.

SVG to VectorDrawable Converter is the batch converter of SVG images to Android VectorDrawable XML resource files. Online version is here.

Links point to readmes, which provide enough information on how to use the lib and the converter.