SVG Graphics or Vector Assets in Android App

SVG Graphics or Vector Assets in Android App

For displaying images on our app or website,  we have two options a Vector image or a bitmap (raster) image. When we use bitmap then we need to use different sizes for a single image to support multiple resolutions. It will increase your Android app apk size because we have multiple copies of a single image. For example, check the following image.

In the above image, we have three different sizes for the same circle image. Size for the first image is 10 x 10 pixels, the second image size is 100 x 100 pixels and size for the last and the final image is 1000 x 1000 pixels.

The first image may look good on small devices.
The second image looks good on small devices. But on the larger screen with high resolution, it may not.
Finally, the last image looks good on almost all devices. But maybe in future for extra large screens, it will not look good.
 
Why?
We are using a bitmap (raster) image.
 
Why it will not look good on a large screen?
Because Bitmap (raster) is made up of pixels. A pixel is a single smallest element on a display device. When we zoom a small image on large devices, then we may be able to start seeing tiny little squares. For the bitmap images, squares are used for drawing the shapes.
 
Then what is the solution? 
In such scenarios or you can say to support multiple resolutions we use vector images. The vector images contain paths. Paths are used for all the shapes available in the image. A vector file contains calculations for all the available paths. If we scale a vector image, then the final image will render based on the stored calculations for all the paths. Because of this vector images are resolutions independent. 
 
So why not we use vector images earlier? 
1. Limitations - You may ignore this point now because of almost all technologies are now supporting vector graphics.
2. Vector graphics are computer-generated graphics. For a real person or things, photos, you may need to use bitmap or raster images. You can convert a bitmap image into equivalent vector graphics, but it is a different story.
 
Now, how to use a vector graphic in our Android app?
 
For our demo app, we will use the following SVG graphics file.
Android Use SVG Graphics Image 1

Our First Image is for the demonstration the power of SVG. The Second Image to know how to edit an SVG file. Now we have our images. The next thing we need to import it in Android Studio.

For importing a vector or SVG assets right click on the app -> new -> vector asset.
In Asset Studio Configure Vector Asset selects the following options
  • Asset Type: Local file (SVG, PSD)
  • Select your SVG file path
  • Size: Override.

Finally, click on Next. On Confirm Dialog, click on Finish.

Similarly, import other remaining images. Now we can use our SVG images in our activity. Following is the code for activity_main.xml file
 
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.vlemonn.blog.svggraphics.MainActivity">

    <ImageView
        android:id="@+id/iv1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginStart="8dp"
        android:src="@drawable/ic_monster"
        app:layout_constraintBottom_toTopOf="@+id/iv2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

    <ImageView
        android:id="@+id/iv2"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:src="@drawable/ic_android_use_svg_graphics_image_1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>

Finally, below is the output. No need to run your app. You can check the changes in design view.

Let's assume we need to modify color for the square, star and circle in ic_android_use_svg_graphics_image_1 graphic for this we are going to edit the ic_android_use_svg_graphics_image_1.xml file. Following is the changed version for ic_android_use_svg_graphics_image_1.xml file.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="512dp"
        android:height="512dp"
        android:viewportWidth="135.46666"
        android:viewportHeight="135.46667">
    <path
        android:pathData="M53.96,52.47L47.98,52.47L43.85,40.72L25.62,40.72l-4.13,11.75h-5.69l15.35,-42.16h7.47zM42.12,35.91 L34.73,15.21 27.32,35.91z"
        android:fillAlpha="1"
        android:strokeColor="#00000000"
        android:fillColor="#9fbe61"
        android:strokeWidth="1.44963992"/>
    <path
        android:pathData="M87.03,15.3L71.97,15.3v37.18L66.36,52.47L66.36,15.3L51.3,15.3v-4.98h35.73z"
        android:fillAlpha="1"
        android:strokeColor="#00000000"
        android:fillColor="#9fbe61"
        android:strokeWidth="1.44963992"/>
    <path
        android:pathData="M119.67,15.3L98.35,15.3v11.89h18.32v4.98L98.35,32.17v20.3h-5.61v-42.16h26.93z"
        android:fillAlpha="1"
        android:strokeColor="#00000000"
        android:fillColor="#9fbe61"
        android:strokeWidth="1.44963992"/>
    <path
        android:pathData="M2.12,69.48h40v40h-40z"
        android:fillAlpha="1"
        android:fillColor="#00ffff"
        android:strokeWidth="0.27773187"/>
    <path
        android:pathData="M113.35,87.87m-20,0a20,20 0,1 1,40 0a20,20 0,1 1,-40 0"
        android:fillAlpha="1"
        android:fillColor="#ffff00"
        android:strokeWidth="0.26224402"/>
    <path
        android:pathData="m54.28,108.54 l4.7,-15.74 -12.75,-10.08 16.14,-0.31 5.47,-15.48 5.27,15.55 16.13,0.52 -12.88,9.92 4.5,15.8 -13.23,-9.42z"
        android:fillAlpha="1"
        android:fillColor="#ff00ff"
        android:strokeWidth="0.26458332"/>
</vector>

Finally, the output.

 
0 Comments
Leave A Comment

Please login to post your valuable comments.

Join the newsletter

Get the latest vLemonn news first

share