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.kotlingfgprojectÂ
import android.os.Bundleimport android.view.animation.DecelerateInterpolatorimport android.widget.Buttonimport android.widget.Toastimport androidx.appcompat.app.AppCompatActivityimport com.takusemba.spotlight.SimpleTargetimport com.takusemba.spotlight.SpotlightÂ
class 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:
