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 android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <!--creating imatgeview--> <!--app:srcCompat="@drawable/ic_icons8_neveropen--> <!--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_neveropen"/> <!--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:
