Spotlight in Android

0 0 3 minutes read

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
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    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.Bundle
import android.view.animation.DecelerateInterpolator
import android.widget.Button
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.takusemba.spotlight.SimpleTarget
import 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();
            }
        });
 
    }
 
}