Mobile Development

Feature Discovery

  • Android
  • Software
  • Mobile Dev
  • Animations




Do you like the above? I am glad you do because, by the end of this tutorial, you are going to learn how to implement it.

To implement the app above we are going to use an open-sourced library from KeepSafe called TapTargetView.

You can find the complete code of this tutorial in my GitHub repo.

Let’s get started.

Step #1: Project Dependencies

Add the following dependencies to your app build.gradle file:

    // AppCompat
    implementation 'androidx.appcompat:appcompat:1.1.0-alpha02'

    // KeepSafe
    implementation 'com.getkeepsafe.taptargetview:taptargetview:1.12.0'

    // Material Design
    implementation "com.google.android.material:material:1.1.0-alpha04"
    

Note how we are using androidx for this project. If your project does not use androidx, go to Refactor →Migrate to AndroidX…

This should resolve any build problems.

Step #2: Import drawables

We need to import the following icons to the drawable folder:

     — ic_add_white_24dp.xml
     — ic_arrow_back_white_24dp.xml
     — ic_search_white_24dp.xml
  

You can import all these icons from within Android studio (Right click on your res folder → New → Vector Asset → Clip Art). Alternatively, you can find them at the Material Design Icon site.

Step #3: Change the app style

Remove the action bar from our app by changing the parent of your AppTheme style to Theme.AppCompat.Light.NoActionBar in your styles.xml file.

Your styles.xml file should now look like this:

    <resources>"

        
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        <style>

    <resources>
    

Step #4: Create a menu resource file

Create a menu resource folder and add to it a menu resource file called menu_main.xml. This menu will be loaded into the toolbar in a coming step.

To this menu file, we are going to include a search and overflow item. Your menu_main.xml should look like this:

      <?xml version="1.0" encoding="utf-8"?>
      <menu
          xmlns:app="http://schemas.android.com/apk/res-auto"
          xmlns:android="http://schemas.android.com/apk/res/android">

          <!--Search item-->
          <item
              android:title="Search"
              android:id="@+id/search"
              android:icon="@drawable/ic_search_white_24dp"
              app:showAsAction="always" />

          <!--Overflow item-->
          <item
              android:title="Overflow items"
              app:showAsAction="never"/>
      </menu>
  

Step #5: activity_main.xml

Our UI is very simple: A toolbar with three icons (back arrow, search button, more button) and a Floating Action Button (FAB).

Your activity_main.xml should look like this:

      <?xml version="1.0" encoding="utf-8"?>
      <RelativeLayout
          xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical">

              <androidx.appcompat.widget.Toolbar
                  android:id="@+id/toolbar"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  android:background="@color/colorAccent"
                  android:theme="@style/Theme.AppCompat" />

             <com.google.android.material.floatingactionbutton.FloatingActionButton
                  android:id="@+id/fab"
                  android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                  android:layout_margin="30dp"
                  android:layout_alignParentBottom="true"
                  android:layout_alignParentEnd="true"
                  android:src="@drawable/ic_add_white_24dp"/>

      </RelativeLayout>
  

Step #6: MainActivity.java

Here is where the magic begins.

Instead of throwing at you the entire code for MainActivity.java, I am going to break it up into digestible parts and little by little we are going to build MainActivity.java together.

However, if you prefer going directly to the complete code of MainActivity.java, you can scroll all the way down to part #5.

Part #1: Create variables

The variables we are interested in are Toolbar and TapTargetSequence.

In a coming step I will show you how they are used but for now, add the following variables to your MainActivity.class

    private final static String TAG= MainActivity.class.getSimpleName();
    private TapTargetSequence tapTargetSequence;
    private Toolbar toolbar;
  

Part #2: initToolbar()

Create a private method called initToolbar(). This method returns void and has no arguments.

This method accomplishes the following things:

  • Initializes the toolbar
  • Inflates the toolbar with the menu
  • Adds the back arrow.

The initToolbar() method looks as follows:

    private void initToolbar(){
        // Initializing the toolbar
        toolbar = findViewById(R.id.toolbar);

        // Inflating the toolbar menu
        toolbar.inflateMenu(R.menu.menu_main);

        // Setting the back arrow in the toolbar
        toolbar.setNavigationIcon(ContextCompat.getDrawable(this, R.drawable.ic_arrow_back_white_24dp));
    }
  

Part #3: initTapTargetSequence()

Create a private method called initTapTargetSequence() which returns null and has no arguments. This method will allow you to create a sequence of “focuses” to various icons in our UI.

Remember the variable tapTargetSequence we created in part #1? We are going to initialize it inside this method.

This is how the initTapTargetSequence() looks:

Don’t get scared, let me explain it:
  1. Inside the .target() we specify all the targets we want to include in our sequence. For our app, the sequence includes the following targets: the back arrow icon, the search icon, and the more icon.

  2. The order in which targets are added to the sequence is the order in which they are presented to the user.

  3. The method called on lines 8, 14, and 20 is key. To this method, we pass the target, the toolbar (if applicable), and the title and subtitle for describing the target to the user. Note that depending on the target item the method name changes.

  4. The .cancelable(false) is used to prevent the user from canceling the sequence in case he clicks outside the clickable area. In other words, if we add .cancelable(false) to all of our targets, the user must go through the entire sequence.

  5. The .listener() gives us access to useful callbacks that allows us to know things like: when the sequence is finished, the step of the sequence, or if the sequence is canceled.

  6. The .id() allow us to set an id to each target. This is useful if we want to uniquely identify each target of the sequence. We log the id of the clicked target inside the onSequenceStep() callback.

  7. Inside the onSequenceFinish() method we show a toast telling the user that the sequence is done.

Finally, the sequence we just created will not start automatically. To start it we need to call tapTargetSequence.start(). However, we are doing this in the next step.

Btw, did you notice that our sequence does not include the FAB? Well, the next part will explain why.

Part #4: initTapTargetView()

Let’s say that for your project you do not want to create a sequence as we did in part #3. Instead, you just want to focus on one button and nothing else. In that case instead of creating a TapTargetSequence we use a TapTargetView.

In this part, I am going to show you how to use a TapTargetView for the FAB.

Start by creating a private method called initTapTargetView(). This method returns null and has no arguments. The method should look as follows:

Let me explain what all this means:
  1. The purpose of .cancelable(false) is the same as the one explained before.

  2. In the .showFor() we specify the id of the view we want to focus on and the context in which it is located (i.e., the activity is our context and the FAB is the view we want to focus on).

  3. We are interested in the onTargetClick() callback because it let us know when the FAB target was clicked. Notice that inside such a method we start the TapTargetSequence we created in part #3.

  4. Unlike the TapTargetSequence that need to be initialized with the .start() method, the TapTargetView initializes automatically.

We have done all the heavy lifting. Now it is time to call these methods.

Part #5: Putting it all together

On your onCrate() method call the the initToolbar(), initTapTargetSequence(), initTapTargetView() methods. As mentioned before the TapTargetView will initiate automatically and once we tap the FAB, it will initialize the TapTargetSequence. (You will see what I mean when you run the app)

At this point, we have completed the MainActivity.java and it should look like this:

That is it!

If you build and run your app, it should behave as follows:

As mentioned before you can find the complete code of this tutorial in my GitHub repo.


Stay tuned for the next one.

● ● ●

How would you rate this article?