How to Use SVG Vector Drawables in Android?

SVG stands for Scalable Vector Graphics. It is used for rendering two-dimensional images on the internet. SVG is used for high-quality images that can be scaled to any size. we can use SVG files in android too. SVG can be used for icons, for creating images for creating beautiful UI. In this post, we are how to see create vector graphics in the Android studio

Step by Step Implementation of Creating SVG Vector

Step 1: Create a new project

Step 2: Right click on res –> drawable –> new –> vector asset

Step 3: By default clip art will be selected 

Step 4: Select local file

Step 5: After selecting the local file you will see this screen

Step 6: Locate your image file location. After that click on finish.

Step 7: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<androidx.constraintlayout.widget.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=".MainActivity">

      <!--creating imatgeview-->
    <!--app:srcCompat="@drawable/ic_icons8_geeksforgeeks-->
    <!--this attribute is used for showing image-->
    <ImageView android:id="@+id/imageView"
               android:layout_width="178dp"
               android:layout_height="180dp"
               android:layout_marginStart="128dp"
               android:layout_marginTop="120dp"
               android:layout_marginEnd="105dp"
               app:layout_constraintBottom_toTopOf="@+id/gfgButton"
               app:layout_constraintEnd_toEndOf="parent"
               app:layout_constraintStart_toStartOf="parent"
               app:layout_constraintTop_toTopOf="parent"
               android:visibility="gone"
               app:layout_constraintVertical_bias="0.0"
               app:srcCompat="@drawable/ic_icons8_geeksforgeeks"/>

  <!--creating button-->
    <Button android:id="@+id/gfgButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="92dp"
            android:layout_marginTop="127dp"
            android:layout_marginEnd="77dp"
            android:layout_marginBottom="256dp"
            android:backgroundTint="#000"
            android:text="Tap here to see gfg icon"
            android:textColor="#fff"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageView"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Step 8: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener
{
    ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button b = findViewById(R.id.gfgButton);
        imageView = findViewById(R.id.imageView);
        // registering on click listener
        b.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
      // when we will click on button we will see image
      // therefore using View.VISIBLE to make it visible
      imageView.setVisibility(View.VISIBLE);
    }
}

Output: