TapTargetView for Android Tutorial

Releasing a new feature for your app sounds exciting, and you can’t wait to have your users use it. But what if your users didn’t use that feature at all, or worst case they don’t even know that the feature exists in your app. That sounds pretty scary, right?

You don’t have to be afraid though because today you will learn how you can highlight that new feature with an explanation. Your users will understand what the feature is and what its function is, and this will help you build a positive relationship with them.

You will be using a third party library named TapTargetView. You can use this library to help you to better highlight your app features to your users. You will build an app called What2eat where you will learn the following things:

• How to add the TapTargetView library to your project.
• How you can use the TapTargetView library to highlight menu items on the Android Toolbar, AlertDialog buttons, and standard Android buttons.
• How you can highlight a feature to your users only once so that you don’t annoy them every time they use your app.

Prerequisites: This tutorial assumes that you have the basics of Android development with Kotlin under your belt. If you’re new to Android Development, please go through Beginning Android Development with Kotlin to understand the basics. If you’re new to Kotlin, please check out this introduction to Kotlin tutorial.

Getting Started

Download the starter project using the download button at the top or bottom of the tutorial. Open up Android Studio 3.0.1 or later, select the second option Open an existing Android Studio project and navigate to and select the starter project folder.

Once the initial Gradle build is complete, build and run the app to see the current state of the app.

The first screen shows you a list of yummy food inside a RecyclerView.

Note: If you’re new to Android Recyclerview, please go through Android RecyclerView Tutorial with Kotlin to understand the basics.

You have a Settings screen that you can access from the app menu that shows the app icon and version:

Tap a food item on the first screen to show a detail screen:

From the detail screen, you can share the food item or tap on “Visit Store” to open your device browser to this link: https://www.freshdirect.com/index.jsp

Adding the TapTargetView Dependency

Open the build.gradle (Module:app) file to add the TapTargetView library dependency.

dependencies {
  ...
  implementation 'com.getkeepsafe.taptargetview:taptargetview:1.11.0'
}

Click on Sync now to sync your project Gradle files and so you’re able to use these libraries.

Now let’s get started working with TapTargetView.

Working with TapTargetView

In this section, you will learn how you can use the library with Toolbar, AlertDialog, and ImageView items.

TapTargetView with a Toolbar

First you’ll learn how you can use TapTargetView to highlight menu items on a Toolbar.

Open up MainActivity and add the following code below this line

recyclerView.adapter = FoodAdapter(this, foodName, foodImage)

// 1
TapTargetView.showFor(this,
    // 2
    TapTarget.forToolbarOverflow(toolbar, getString(R.string.label_app_settings),
        getString(R.string.description_app_setting))
        // 3
        .cancelable(false)
        // 4
        .tintTarget(true),
    // 5
    object : TapTargetView.Listener() {
      override fun onTargetClick(view: TapTargetView) {
        super.onTargetClick(view)
        view.dismiss(true)
      }
    })

Use Alt+Enter on PC or Option+Return on Mac to pull in the necessary imports.

Let’s go through this code step by step:

1. TapTargetView.showFor: You always start with this, and you pass the current Context as the first argument.
2. TapTarget.forToolbarOverflow: Here you choose to highlight the overflow menu item by passing these three arguments: the Toolbar that has the overflow menu item, the title of the menu item, and a simple description about the function of the menu item.
3. cancelable(boolean): You pass a boolean value (true) if you want to dismiss the highlight circle when tapping on an empty area or (false) to prevent that from happening.
4. tintTarget(boolean): You pass a boolean value (true) if you want to tint the view’s icon color or (false) if you want to make it white.
5. TapTargetView.Listener: Here is where you write the logic that you want to execute when you tap on the overflow menu item. Otherwise you can dismiss the highlight circle using view.dismiss(true)

Build and run the app to TapTargetView in action on the Toolbar.

It looks cool right! :]

Now go ahead and create a highlight circle for the search menu item by adding the following code below the highlight circle for the overflow menu item.

TapTargetView.showFor(this, TapTarget.forToolbarMenuItem(toolbar, R.id.action_search,
    getString(R.string.label_search), getString(R.string.description_search))
    .cancelable(false).tintTarget(true), object : TapTargetView.Listener() {
  override fun onTargetClick(view: TapTargetView) {
    super.onTargetClick(view)
    view.dismiss(true)
  }
})

Here you use TapTarget.forToolbarMenuItem because you want the highlight circle to appear on the search menu icon. When you tap on the search menu icon you will dismiss the highlight circle.

Build and run the app to see the output.

TapTargetView with an AlertDialog

In this section, you will learn how you can use TapTargetView to show a highlight circle inside an AlertDialog.

Open up MainActivity and add the following method below onCreate().

override fun onBackPressed() {
  // 1
  val alertDialog = AlertDialog.Builder(this).create()
  // 2
  alertDialog.setMessage("Are you sure you want to exit ${resources.getString(R.string.app_name)}")
  // 3
  alertDialog.setButton(AlertDialog.BUTTON_POSITIVE, getString(R.string.label_ok),
      { _, _ ->
        val intent = Intent(Intent.ACTION_MAIN)
        intent.addCategory(Intent.CATEGORY_HOME)
        intent.flags = Intent.FLAG_ACTIVITY_NEW_TASK
        startActivity(intent)
      })
  // 4
  alertDialog.setButton(AlertDialog.BUTTON_NEGATIVE, getString(R.string.label_no),
      { dialogInterface, _ ->
        dialogInterface.dismiss()
      })
  // 5
  alertDialog.show()
  // 6
  TapTargetView.showFor(alertDialog,
      // 7
      TapTarget.forView(alertDialog.getButton(DialogInterface.BUTTON_POSITIVE),
          getString(R.string.label_exit_app),
          getString(R.string.description_exit))
          .cancelable(false).tintTarget(false), object : TapTargetView.Listener() {
    // 8        
    override fun onTargetClick(view: TapTargetView) {
      super.onTargetClick(view)
      view.dismiss(true)
    }
  })
}

Here’s a step-by-step breakdown:

You’ve overridden onBackPressed(), so that when you tap on your device physical back button, it will show an AlertDialog with the highlight circle.

1. val alertDialog: You define an AlertDialog.
2. alertDialog.setMessage: You give the AlertDialog a message.
3. alertDialog.setButton: You give the AlertDialog a positive button, once you tap on that button you will exit the app.
4. alertDialog.setButton: You give the AlertDialog a negative button, and once you tap on that button, you will dismiss the dialog.
5. alertDialog.show(): You need to call show() for the dialog to appear on the device screen.
6. TapTargetView.showFor: Here you want to show the highlight circle on the AlertDialog.
7. TapTarget.forView: You use this method to show the highlight circle on the positive button of the AlertDialog.
8. override fun onTargetClick(...): You dismiss the highlight circle on the first tap of the positive button.

Build and run the app, then tap on the physical device back button to see the new highlight circle.