Android applications have so many options present within them, so users can interact with the features within the application. Many application provides a spotlight on some of the important features within the application to grab user attention. In this article, we will take a look at How to add Spotlight on a specific view within an android application. A sample video is given below to get an idea about what we are going to do in this article.
Note: This Android article covered in both Java and Kotlin languages.
Step by Step Implementation
Step 1: Create a New Project in Android Studio
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.
Step 2: Adding dependency for the spotlight in the build.gradle file
Navigate to app>build.gradle(app) and add the below dependency in the dependencies section.
implementation 'com.github.takusemba:spotlight:1.0.1'
After adding the dependency sync your project to install it.
Step 3: Working with the activity_main.xml file
Navigate to app > res > layout > activity_main.xml and add the below code to it. Comments are added in the code to get to know in detail.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout android:id="@+id/idRLContainer" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <!--on below line we are adding an image view--> <ImageView android:id="@+id/idIVAndroid" android:layout_width="200dp" android:layout_height="200dp" android:layout_above="@id/idTVHeading" android:layout_centerInParent="true" android:layout_margin="10dp" android:padding="20dp" android:src="@drawable/android" /> <!--displaying a simple text view--> <TextView android:id="@+id/idTVHeading" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_margin="15dp" android:text="Geeks for Geeks" android:textAlignment="center" android:textColor="@color/black" android:padding="20dp" android:textSize="20sp" android:textStyle="bold" /> <!-- creating a button to show spotlight--> <Button android:id="@+id/idBtnShowSpot" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/idTVHeading" android:layout_centerHorizontal="true" android:layout_margin="20dp" android:padding="20dp" android:text="Show Spotlight" android:textAllCaps="false" /></RelativeLayout> |
Step 4: Working with the MainActivity file
Navigate to app > java > your app’s package name > MainActivity file and add the below code to it. Comments are added in the code to get to know in detail.
Kotlin
package com.gtappdevelopers.kotlingfgprojectimport android.os.Bundleimport android.view.animation.DecelerateInterpolatorimport android.widget.Buttonimport android.widget.Toastimport androidx.appcompat.app.AppCompatActivityimport com.takusemba.spotlight.SimpleTargetimport com.takusemba.spotlight.Spotlightclass MainActivity : AppCompatActivity() { // on below line creating a variable for our button. lateinit var showSpotBtn: Button override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) // initializing our button with id. showSpotBtn = findViewById(R.id.idBtnShowSpot) // adding on click listener for our button. showSpotBtn.setOnClickListener { // on below line creating a target // for displaying a spot light. val simpleTarget: SimpleTarget = SimpleTarget.Builder(this) // on below line specifying position // from x and y direction. .setPoint( 550f, 840f ) // radius of the Target .setRadius(270f) // title for spot light .setTitle("Welcome to Geeks") // description for spot light .setDescription("Spotlight Example in Android") //at last calling build to build our spot light .build() // on below line creating a spot light. Spotlight.with(this) // duration of Spotlight emerging // and disappearing in ms .setDuration(1000L) // animation of Spotlight .setAnimation(DecelerateInterpolator(2f)) // on below line specifying target for spot light as simple target .setTargets(simpleTarget).setOnSpotlightStartedListener { // displaying toast message on below line as spot light started. Toast.makeText(this, "spotlight is started", Toast.LENGTH_SHORT).show(); }.setOnSpotlightEndedListener { // displaying toast message on spot light ended. Toast.makeText(this, "spotlight is ended", Toast.LENGTH_SHORT).show(); } // calling start to // show our spot light. .start() } }} |
Java
package com.gtappdevelopers.contactpickerapplication;import android.os.Bundle;import android.view.View;import android.view.animation.DecelerateInterpolator;import android.widget.Button;import android.widget.Toast;import androidx.appcompat.app.AppCompatActivity;import com.takusemba.spotlight.OnSpotlightEndedListener;import com.takusemba.spotlight.OnSpotlightStartedListener;import com.takusemba.spotlight.SimpleTarget;import com.takusemba.spotlight.Spotlight;public class MainActivity extends AppCompatActivity { // on below line creating a variable for button. private Button showSpotBtn; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // on below line initializing button with id. showSpotBtn = findViewById(R.id.idBtnShowSpot); // adding click listener for our button. showSpotBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // on below line creating a simple target SimpleTarget simpleTarget = new SimpleTarget.Builder(MainActivity.this) // on below line specifying position from x and y direction. .setPoint( 550f, 840f ) // radius of the Target .setRadius(270f) // title for spot light .setTitle("Welcome to Geeks") // description for spot light .setDescription("Spotlight Example in Android") // at last calling build to build our spot light .build(); Spotlight.with(MainActivity.this) // duration of Spotlight emerging // and disappearing in ms .setDuration(1000L) .setAnimation(DecelerateInterpolator(2f)) // setting target on below line. .setTargets(simpleTarget).setOnSpotlightStartedListener(new OnSpotlightStartedListener() { @Override public void onStarted() { // on below line displaying a toast message. Toast.makeText(MainActivity.this, "spotlight is started", Toast.LENGTH_SHORT).show(); } }) // on below line adding a spot light ended listener. .setOnSpotlightEndedListener(new OnSpotlightEndedListener() { @Override public void onEnded() { // on below line displaying a toast message. Toast.makeText(MainActivity.this, "spotlight is ended", Toast.LENGTH_SHORT).show(); } }) // on below line calling // start to show spot light. .start(); } }); }} |
Now run your application to see the output of it.
Output:
