Tap Target Prompt in Android

Tap Target Prompts are generally used when the user onboards a new app and the user doesn’t know about the functionality of the buttons/some text fields then we can use Target Prompts in any of the activity Components and it is so simple and easy to implement. A sample video is given below to get an idea about what we are going to do in this article.

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. Note that select Java as the programming language.

Step 2:

Add this dependency into the buid.gradle(module :app) and after that sync the gradle file.

dependencies {
   implementation 'uk.co.samuelwall:material-tap-target-prompt:3.3.2'
}

Step 3:

The Activities that we used in the above video, you can skip this part if you have already created activities and referenced them properly in your Java file. 

activity_main.xml file:

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/teal_700"
    tools:context=".MainActivity">

      <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="28dp"
        android:layout_marginTop="172dp"
        android:backgroundTint="@color/purple_200"
        android:text="@string/click"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="564dp"
        android:backgroundTint="@color/purple_200"
        android:text="@string/second_activity"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

activity_second.xml file:

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/teal_700"
    tools:context=".SecondActivity">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="384dp"
        android:backgroundTint="@color/purple_200"
        android:text="@string/click"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.049"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="112dp"
        android:backgroundTint="@color/purple_200"
        android:text="@string/click"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.95"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:src="@drawable/baseline_add_24"
        android:backgroundTint="@color/purple_200"
        android:layout_height="wrap_content"
        android:layout_marginStart="324dp"
        android:layout_marginTop="616dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Make Sure to Extract String Resouce by right-clicking on your text

Step 4:

In the First Activity i.e; we have used a simple Tap Target that is implemented by default and one setPromptStateChangeListener use of this is been added to the code.

MainActivity.java

Java

package com.android.gfgapp;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.Button;
import android.widget.Toast;
import uk.co.samuelwall.materialtaptargetprompt.MaterialTapTargetPrompt;

public class MainActivity extends AppCompatActivity {

    Button button1, button2, button3;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button1 = findViewById(R.id.button1);
        button2 = findViewById(R.id.button2);
        new MaterialTapTargetPrompt.Builder(MainActivity.this)
            .setTarget(R.id.button1)
            .setPrimaryText("Clicked On First Button")
            .setSecondaryText("By Default  Prompt")
            // this is used when user click on Focal it
            // should do some functions so we are adding toast
            .setPromptStateChangeListener(new MaterialTapTargetPrompt.PromptStateChangeListener() {
                @Override
                public void onPromptStateChanged(MaterialTapTargetPrompt prompt, int state)
                {
                    if (state == MaterialTapTargetPrompt.STATE_FOCAL_PRESSED) {
                        Toast.makeText(getApplicationContext(), "Hello", Toast.LENGTH_LONG).show();
                    }
                }
            })
            .show();
        new MaterialTapTargetPrompt.Builder(MainActivity.this)
            .setTarget(R.id.button2)
            .setPrimaryText("This is Second Button")
            .setSecondaryText("Changing Prompt Color")
            // changing prompt color only you can
            // choose any colour of your choice
            .setBackgroundColour(Color.RED)
            .setPromptStateChangeListener(new MaterialTapTargetPrompt.PromptStateChangeListener() {
                @Override
                public void onPromptStateChanged(MaterialTapTargetPrompt prompt, int state)
                {
                    if (state == MaterialTapTargetPrompt.STATE_FOCAL_PRESSED) {
                        // User has pressed the prompt target
                        Intent intent = new Intent(MainActivity.this, SecondActivity.class);
                        startActivity(intent);
                    }
                }
            })
            .show();
    }
}

In the Second Activity, we used different functionalities like changing the background/prompt style to a rectangle also you can change the focal radius of the prompts also added changing the focal color. Make sure when you’re using .setFocalRadius((float)) it should float only otherwise your app may crash sometimes by using int.

SecondActivity.java

Java

package com.android.gfgapp;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.floatingactionbutton.FloatingActionButton;

import uk.co.samuelwall.materialtaptargetprompt.MaterialTapTargetPrompt;
import uk.co.samuelwall.materialtaptargetprompt.extras.backgrounds.RectanglePromptBackground;
import uk.co.samuelwall.materialtaptargetprompt.extras.focals.RectanglePromptFocal;

public class SecondActivity extends AppCompatActivity {

    Button button1, button2;
    FloatingActionButton floatingActionButton;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        button1 = findViewById(R.id.button1);
        button2 = findViewById(R.id.button2);
        FloatingActionButton floatingActionButton = findViewById(R.id.fab);
        new MaterialTapTargetPrompt.Builder(SecondActivity.this)
            .setTarget(R.id.button1)
            .setPrimaryText("Button 1")
            .setSecondaryText("Chnaging Focal Color")
            .setFocalColour(Color.CYAN)
            // You Can Also set Custom Focal
            // Radius of the prompt
            .setFocalRadius((float)150.4)
            .setPromptStateChangeListener(new MaterialTapTargetPrompt.PromptStateChangeListener() {
                @Override
                public void onPromptStateChanged(MaterialTapTargetPrompt prompt, int state)
                {
                    if (state == MaterialTapTargetPrompt.STATE_FOCAL_PRESSED) {
                        Toast.makeText(getApplicationContext(), "Hello", Toast.LENGTH_LONG).show();
                    }
                }
            })
            .show();
        new MaterialTapTargetPrompt.Builder(SecondActivity.this)
            .setTarget(R.id.button2)
            .setPrimaryText("Button 2")
            .setSecondaryText("Chnaging Focal Color")
            .setFocalColour(Color.GREEN)
            .setPromptStateChangeListener(new MaterialTapTargetPrompt.PromptStateChangeListener() {
                @Override
                public void onPromptStateChanged(MaterialTapTargetPrompt prompt, int state)
                {
                    if (state == MaterialTapTargetPrompt.STATE_FOCAL_PRESSED) {
                        Toast.makeText(getApplicationContext(), "Hello", Toast.LENGTH_LONG).show();
                    }
                }
            })
            .show();

        new MaterialTapTargetPrompt.Builder(SecondActivity.this)
            .setTarget(R.id.fab)
            .setPrimaryText("This is Fab")
            .setSecondaryText("Chnaging Prompt Style")
            .setPromptBackground(new RectanglePromptBackground())
            .setBackgroundColour(Color.MAGENTA)
            .setPromptFocal(new RectanglePromptFocal())
            .setPromptStateChangeListener(new MaterialTapTargetPrompt.PromptStateChangeListener() {
                @Override
                public void onPromptStateChanged(MaterialTapTargetPrompt prompt, int state)
                {
                    if (state == MaterialTapTargetPrompt.STATE_FOCAL_PRESSED) {
                        Toast.makeText(getApplicationContext(), "Hello", Toast.LENGTH_LONG).show();
                    }
                }
            })
            .show();
    }
}

Output: