Skip to content
Related Articles

Related Articles

Improve Article

How to Use SVG Vector Drawables in Android?

  • Last Updated : 11 Aug, 2021

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

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.

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: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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :