HelpGurus

How to add TapTargetVew to your Android Apps in Sketchware

by 2 Comments

Have you thought about how you can quickly tell your users the new features of your Application?  It is very easy to do that, just use TapTargetView.
Today you will learn how to implement TapTargetView in your Sketchware-built Android Application.

With TapTargetView, you can tell your users ‘the specific function for each buttons and widgets in your Application’ in a way you or them will find ‘unique’.

Now, you might be thinking “What is TapTargetView?“, “How can I use it in my App?“, “I can’t use it in my App, I don’t know Java“. But not to worry, I will cover everything concerning TapTargetView in  this article.

Contents Navigation Table hide      

What is Tap Target view in Android?

TapTargetView is an view mainly used to highlight features of your App to your new users. It is just like a taking your users on a quick tour in your App and explaining every about every function they should know just like “this button does this”, “a click on the other Button does”.
 This helps in improving your UX (user experience) because when your users knows the full function of your App, it helps them produce great results.

What is the importance of Tap Target ?

At this point, I’m sure you need much explanations about the usefulness of TapTargetView, lol.
     But still, the common importance of TapTargetView is :
  • It helps in giving your users full knowledge about your Application features.
  • It help increases your users’ first impressions.
  • It is a more unique way of welcoming new Users.
  • It helps draw the user’s attention so you can quickly display the Terms of Use/Terms and Conditions of your Application.
And there are so many more I can’t explain to you but you will figure it when you finally use TapTargetView in your Application.

How to Add TapTarget to your Sketchware project

Implementing TapTargetView in Sketchware doesn’t require any extra library and it is very easy due to the fact that there is already a Moreblock for that function.
   To easily implement TapTargetView in your Sketchware project, follow this steps:

 Open your Sketchware project (preferably a new one for testing) and go to Logic > Moreblock > Shared Moreblocks

 Search for “TapTarget” (without Quotes) and scroll down till you see the moreblock for TapTarget added by ‘Usman’ ( check the Image below to understand )

Moreblocks in Sketchware
Tap it and import the Moreblock into your Sketchware project.
 Now head to the component area and add a SharedPreferences component to your project.
  •  Go to Moreblock and create a new Moreblock and name it “startTapTargetView”.

Define “startTapTargetView” Moreblock by adding this blocks.

 Set your Target view (ex. button), set the Title of TapTargetView, set the message, set the background color you wish (ex. #ffffff) and lastly set the Time (milliseconds) which will delay the TapTargetView.

When that is done, go to the onCreate event of your activity and call for the TapTargetView by using this blocks. Set the time according to your taste.
Sketchware Tutorials - HelpGurus
That is all, you can now run your project and see that it works.
 However, you can’t display multiple TapTargetView respectively with only that you would still need to add some few things which is clearly explained below.

How to display multiple TapTargets (one after the other) in your Sketchware-made Application

Displaying multiple TapTargetView in Sketchware apps is not difficult, all you need to do follow this steps :

Go to Moreblock area and open the “NewTapTarget” moreblock then you replace the codes in the first ASD (add source directly) block with the one below

How to add TapTargetView in Android
//change "MainActivity" to your specific Activity TapTargetView.showFor(MainActivity.this, TapTarget.forView(_view, _title, _msg) .outerCircleColorInt(Color.parseColor(_bgcolor)) .outerCircleAlpha(0.96f) .targetCircleColorInt(Color.parseColor("#FFFFFF")) .titleTextSize(25) .titleTextColorInt(Color.parseColor("#FFFFFF")) .descriptionTextSize(18) .descriptionTextColor(android.R.color.white) .textColorInt(Color.parseColor("#FFFFFF")) .textTypeface(Typeface.SANS_SERIF) .dimColor(android.R.color.black) .drawShadow(true) .cancelable(false) .tintTarget(true) .transparentTarget(true) //.icon(Drawable) .targetRadius(60), //LISTENER// new TapTargetView.Listener() { @Override public void onTargetClick(TapTargetView view) { //ON CLICKED// super.onTargetClick(view); _startTapTargetView(); } });

Go back and open the “startTapTargetView” moreblock and insert this additional blocks. Do this for as many views you want to display, but just make sure it goes in this format.

TapTargetView in Sketchware - HelpGurus
To make it more easy and fast, just copy the previous blocks and then add it to the ‘else’ event of the previous one and change the string value (ex. Title, message, etc) and also change to the focus View to next one you wish to display.
The images below will explain better.

NOTE: Always put “Tap it to continue” at the end of your message because the TapTargetView won’t dismiss until the Target is clicked.

When done with done with that, change the data of the SharedPreferences (use the data of the previous TapTargetView as an “if” condition, then you change it). For a clear understanding, take a look at this images

Shared Preferences in Sketchware

Go back to your onCreate event and make this blocks are still there.

Tap Target View in Android

 Run your project and see the good result you have achieved.

Final Result
Our Final Result

Frequently Asked Questions

Why did you use a SharedPreferences component in every if block?

SharedPreferences is used to locally save data. In this tutorial, we used the data of a particular key “taptarget” as a condition. If that condition is met, the assigned TapTargetView for that condition will be displayed, then, you will have to change the data of the to prevent the displayed TapTarget from displaying again.

More than one TapTargetView are displaying at once, how I can stop this?

   To stop this, you just have to make sure you didn’t repeat the same SharedPreferences data.
And also make sure you blocks like this:
if ( condition ) {
//display TapTargetView for the second view
}else{
 if ( condition ) {
 //display TapTargetView for the third view 
  }else{
    if ( condition ) {
   display TapTargetView for the fourth view
    }else{
       if ( condition ) {
       //display TapTargetView the last view
        }
     }
  }
}
This can go on depending on how many widgets you will want to highlight.
The next TapTargetView you want to display should go in the ‘else’ event of the previous  one.

Can I use this codes to display TapTargetView in an Android Studio or AIDE project? If possible, how can I do it?

 I haven’t personally tried to use this codes in Android studio or AIDE, but if you want to use the codes in your Android Studio project;

 

  • Finish the whole process and run the Application.
  • Open XML EDITOR PRO.
  • Open the project in XML Editor Pro and go to the activity which you implemented the codes and easily copy it from there ( if you don’t know how, read this article)

Paste the codes in the specific events which you need TapTargetView.

What should be the proper implementation method in other avoid bugs in my project ?

  To avoid bugs or compile errors in your project, just make sure:
  1. You start the TapTargetView display in the onCreate event in your Application.
  2. You use new components and variables.

Conclusion

I hope this article helped you understand TapTargetView and how you can implement it in your Sketchware project. If you still have additional questions, don’t hesitate to comment below or you contact us.
Share this with your friends and have a nice day 🙂

Related posts:

  1. Creating a simple Quiz App in Sketchware (Beginners Guide)
  2. How to add Bottom Navigation View to your Sketchware Android Projects

Reader Interactions

Comments

  1. Wow

    Thank you so much.
    This lightened up my day in so many ways

    I'm glad to see you understood everything 🙂
    I wish to you around, thank you once again.

    Reply

  2. Hey HelpGurus ,

    Great post with effective tips to add Tap-Target-view on android apps in sketch-ware. It is my first time commenting on your blog post and i must say
    that you have done a fantastic work and suggested great tips to add Tap-Target-view.

    It is absolutely true that Tap-Target-View helps user in providing full knowledge about application features and is really a unique way for welcoming new users.

    Your each of the suggested steps to add Tap-Target to sketch-ware project and steps to display multiple Tap-Targets are so clear, easy to understand and
    follow, whereas following these steps will helps a lot.

    Truly helpful post and thanks for sharing.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *