TapTargetView

An implementation of tap targets from the Material Design guidelines for feature discovery.

5,371

587

5,371

View on GitHub

Top Related Projects

Shimmer-android

1,995

(DEPRECATED) An Android TextView with a shimmering effect

recyclerview-animators

11,506

An Android Animation library which easily add itemanimator to RecyclerView items.

lottie-android

34,999

Render After Effects animations natively on Android and iOS, Web, and React Native

shimmer-android

5,316

An easy, flexible way to add a shimmering effect to any view in an Android app.

Quick Overview

TapTargetView is an Android library that provides an implementation of the Tap Target feature from the Material Design guidelines. It allows developers to easily create a guided tour or onboarding experience for their Android applications, highlighting specific UI elements and providing contextual information to the user.

Pros

Customizable Appearance: The library offers a wide range of customization options, allowing developers to tailor the appearance of the tap target to match the branding and design of their application.
Smooth Animations: The tap target view and its accompanying animations are designed to be smooth and visually appealing, providing a polished user experience.
Flexible Positioning: The tap target can be positioned relative to any view in the application, making it easy to highlight specific UI elements.
Extensive Documentation: The project's documentation is comprehensive, providing detailed instructions and examples to help developers get started with the library.

Cons

Limited Functionality: While the library provides a solid implementation of the Tap Target feature, it may not offer the full range of functionality required for more complex onboarding or tutorial experiences.
Dependency on Android Support Library: The library relies on the Android Support Library, which may be a concern for developers who prefer to use the newer AndroidX libraries.
Potential Performance Impact: Depending on the complexity of the tap target and the number of views in the application, the library may have a slight performance impact, especially on older or lower-end devices.
Limited Customization Options: While the library offers a good degree of customization, some developers may find that they need to extend or modify the library's code to achieve their desired look and feel.

Code Examples

Here are a few examples of how to use the TapTargetView library:

Displaying a Tap Target

TapTargetView.showFor(this, // `this` is an Activity
    TapTarget.forView(findViewById(R.id.my_view), "This is a title", "This is a description")
        .targetCircleColor(R.color.my_target_circle_color)
        .titleTextSize(20)
        .titleTextColor(R.color.my_title_text_color)
        .descriptionTextSize(10)
        .descriptionTextColor(R.color.my_description_text_color)
        .textColor(R.color.my_text_color)
        .outerCircleColor(R.color.my_outer_circle_color)
        .targetRadius(60),
    object : TapTargetView.Listener() {
        override fun onTargetClick(view: TapTargetView) {
            super.onTargetClick(view)
            // do something
        }
    })

Displaying a Sequence of Tap Targets

val targets = listOf(
    TapTarget.forView(findViewById(R.id.view1), "Title 1", "Description 1"),
    TapTarget.forView(findViewById(R.id.view2), "Title 2", "Description 2"),
    TapTarget.forView(findViewById(R.id.view3), "Title 3", "Description 3")
)

TapTargetSequence(this)
    .targets(targets)
    .listener(object : TapTargetSequence.Listener {
        override fun onSequenceFinish() {
            // Sequence finished
        }

        override fun onSequenceStep(lastTarget: TapTargetView?, targetClicked: Boolean) {
            // Sequence step
        }
    })
    .start()

Displaying a Tap Target with a Custom Drawable

TapTargetView.showFor(this,
    TapTarget.forView(findViewById(R.id.my_view), "This is a title", "This is a description")
        .targetDrawable(ContextCompat.getDrawable(this, R.drawable.my_custom_drawable))
        .outerCircleColor(R.color.my_outer_circle_color)
        .targetRadius(60),
    object : TapTargetView.Listener() {
        override fun onTargetClick(view: TapTargetView) {
            super.onTargetClick(view)

Competitor Comparisons

Shimmer-android

1,995

(DEPRECATED) An Android TextView with a shimmering effect

Pros of Shimmer-android

Lightweight and focused on a single effect (shimmer animation)
Easy to implement with minimal configuration
Can be applied to any View or ViewGroup

Cons of Shimmer-android

Limited to shimmer effect only, less versatile for other UI interactions
Less actively maintained (last update was several years ago)
Fewer customization options compared to TapTargetView

Code Comparison

Shimmer-android implementation:

Shimmer shimmer = new Shimmer();
shimmer.start(textView);

TapTargetView implementation:

TapTargetView.showFor(this,
    TapTarget.forView(findViewById(R.id.target), "Title", "Description")
        .outerCircleColor(R.color.red)
        .targetCircleColor(R.color.white)
        .titleTextSize(20)
        .titleTextColor(R.color.white)
        .descriptionTextColor(R.color.black)
        .descriptionTextSize(10)
        .textColor(R.color.black)
        .dimColor(R.color.black)
        .drawShadow(true)
        .cancelable(false)
        .tintTarget(true)
        .transparentTarget(false)
        .targetRadius(60));

The code comparison shows that Shimmer-android is simpler to implement, requiring just two lines of code. TapTargetView, on the other hand, offers more customization options but requires more complex setup.

Android-SpinKit

8,621

Android loading animations

Pros of Android-SpinKit

Offers a wide variety of loading animations (8 different styles with multiple variations)
Lightweight and easy to implement in Android projects
Customizable in terms of color, size, and animation speed

Cons of Android-SpinKit

Limited to loading animations, less versatile for other UI interactions
May require additional customization for complex use cases
Less actively maintained compared to TapTargetView

Code Comparison

TapTargetView:

TapTargetView.showFor(this,
    TapTarget.forView(findViewById(R.id.target), "This is a target", "We have the best targets, believe me")
        .outerCircleColor(R.color.red)
        .targetCircleColor(R.color.white)
        .titleTextSize(20)
        .titleTextColor(R.color.white)
        .descriptionTextSize(10)
        .descriptionTextColor(R.color.red)
        .textColor(R.color.blue)
        .dimColor(R.color.black)
        .drawShadow(true)
        .cancelable(false)
        .tintTarget(true)
        .transparentTarget(false)
        .targetRadius(60));

Android-SpinKit:

SpinKitView spinKitView = findViewById(R.id.spin_kit);
Sprite doubleBounce = new DoubleBounce();
spinKitView.setIndeterminateDrawable(doubleBounce);

AVLoadingIndicatorView

9,745

DEPRECATED

Pros of AVLoadingIndicatorView

Offers a wide variety of loading indicator styles (26 different types)
Lightweight and easy to implement in Android projects
Supports customization of colors and sizes

Cons of AVLoadingIndicatorView

Limited to loading indicators, less versatile than TapTargetView
May require additional implementation for complex user onboarding scenarios
Less active maintenance and updates compared to TapTargetView

Code Comparison

AVLoadingIndicatorView:

AVLoadingIndicatorView avi = findViewById(R.id.avi);
avi.setIndicator("BallPulseIndicator");
avi.show();

TapTargetView:

TapTargetView.showFor(this,
    TapTarget.forView(findViewById(R.id.target), "This is a target", "We have the best targets, believe me")
        .outerCircleColor(R.color.red)
        .targetCircleColor(R.color.white)
        .titleTextSize(20)
        .titleTextColor(R.color.white)
        .descriptionTextSize(10)
        .descriptionTextColor(R.color.red)
        .textColor(R.color.blue)
        .dimColor(R.color.black)
        .drawShadow(true)
        .cancelable(false)
        .tintTarget(true)
        .transparentTarget(false)
        .targetRadius(60),
    new TapTargetView.Listener() {
        @Override
        public void onTargetClick(TapTargetView view) {
            super.onTargetClick(view);
            // Handle click event
        }
    });

recyclerview-animators

11,506

An Android Animation library which easily add itemanimator to RecyclerView items.

Pros of recyclerview-animators

Focuses specifically on RecyclerView animations, offering a wide range of pre-built animations
Provides easy-to-use methods for implementing complex animations with minimal code
Supports both item animations and add/remove animations for RecyclerView

Cons of recyclerview-animators

Limited to RecyclerView animations, while TapTargetView offers a different type of UI enhancement
May require more setup and configuration for custom animations compared to TapTargetView's simpler implementation

Code Comparison

TapTargetView:

TapTargetView.showFor(this,
    TapTarget.forView(findViewById(R.id.target), "This is a target", "We have the best targets, believe me")
        .outerCircleColor(R.color.red)
        .targetCircleColor(R.color.white)
        .titleTextSize(20)
        .titleTextColor(R.color.white)
        .descriptionTextSize(10)
        .descriptionTextColor(R.color.red)
        .textColor(R.color.blue)
        .dimColor(R.color.black)
        .drawShadow(true)
        .cancelable(false)
        .tintTarget(true)
        .transparentTarget(false)
        .targetRadius(60));

recyclerview-animators:

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.list);
recyclerView.setItemAnimator(new SlideInLeftAnimator());

// or
recyclerView.setItemAnimator(new SlideInUpAnimator(new OvershootInterpolator(1f)));

Both libraries offer unique features for enhancing Android UI, with TapTargetView focusing on guided user experiences and recyclerview-animators specializing in RecyclerView animations. The choice between them depends on the specific UI requirements of your project.

lottie-android

34,999

Render After Effects animations natively on Android and iOS, Web, and React Native

Pros of Lottie

Supports complex animations created in Adobe After Effects
Renders animations natively on mobile devices, reducing file size and improving performance
Extensive documentation and community support

Cons of Lottie

Steeper learning curve, especially for designers unfamiliar with After Effects
Requires additional software (Adobe After Effects) to create animations

Code Comparison

TapTargetView:

TapTargetView.showFor(this,
    TapTarget.forView(findViewById(R.id.target), "This is a target", "We have the best targets, believe me")
        .outerCircleColor(R.color.red)
        .targetCircleColor(R.color.white)
        .titleTextSize(20)
        .titleTextColor(R.color.white)
        .descriptionTextSize(10)
        .descriptionTextColor(R.color.red)
        .textColor(R.color.blue)
        .dimColor(R.color.black)
        .drawShadow(true)
        .cancelable(false)
        .tintTarget(true)
        .transparentTarget(false)
        .targetRadius(60))

Lottie:

val animationView = findViewById<LottieAnimationView>(R.id.animation_view)
animationView.setAnimation(R.raw.your_animation)
animationView.loop(true)
animationView.playAnimation()

TapTargetView is specifically designed for creating onboarding experiences and highlighting UI elements, while Lottie is a more versatile animation library that can handle complex animations. TapTargetView offers a simpler API for its specific use case, while Lottie provides more flexibility but requires more setup and external tools for creating animations.

shimmer-android

5,316

An easy, flexible way to add a shimmering effect to any view in an Android app.

Pros of Shimmer-android

Provides a shimmering effect for loading states, enhancing user experience
Lightweight and easy to implement in existing Android projects
Customizable animation properties (duration, direction, color)

Cons of Shimmer-android

Limited to a specific visual effect, less versatile than TapTargetView
Requires more manual setup for complex layouts
Less active maintenance and updates compared to TapTargetView

Code Comparison

TapTargetView:

TapTargetView.showFor(this,
    TapTarget.forView(findViewById(R.id.target), "This is a target", "We have the best targets, believe me")
        .outerCircleColor(R.color.red)
        .targetCircleColor(R.color.white)
        .titleTextSize(20)
        .titleTextColor(R.color.white)
        .descriptionTextSize(10)
        .descriptionTextColor(R.color.red)
        .textColor(R.color.blue)
        .dimColor(R.color.black)
        .drawShadow(true)
        .cancelable(false)
        .tintTarget(true)
        .transparentTarget(false)
        .targetRadius(60));

Shimmer-android:

ShimmerFrameLayout container = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
container.setDuration(1800);
container.setRepeatMode(ObjectAnimator.REVERSE);
container.setRepeatCount(ObjectAnimator.INFINITE);
container.startShimmerAnimation();

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

TapTargetView

An implementation of tap targets from Google's Material Design guidelines on feature discovery.

Min SDK: 14

JavaDoc

Installation

TapTargetView is distributed using MavenCentral.

   repositories { 
        mavenCentral()
   }
   
   dependencies {
         implementation 'com.getkeepsafe.taptargetview:taptargetview:x.x.x'
   }

If you wish, you may also use TapTargetView with jitpack. For snapshots, please follow the instructions here.

Usage

Simple usage

TapTargetView.showFor(this,                 // `this` is an Activity
    TapTarget.forView(findViewById(R.id.target), "This is a target", "We have the best targets, believe me")
        // All options below are optional
        .outerCircleColor(R.color.red)      // Specify a color for the outer circle
	.outerCircleAlpha(0.96f)            // Specify the alpha amount for the outer circle
        .targetCircleColor(R.color.white)   // Specify a color for the target circle
        .titleTextSize(20)                  // Specify the size (in sp) of the title text
        .titleTextColor(R.color.white)      // Specify the color of the title text
        .descriptionTextSize(10)            // Specify the size (in sp) of the description text
        .descriptionTextColor(R.color.red)  // Specify the color of the description text
        .textColor(R.color.blue)            // Specify a color for both the title and description text
        .textTypeface(Typeface.SANS_SERIF)  // Specify a typeface for the text
        .dimColor(R.color.black)            // If set, will dim behind the view with 30% opacity of the given color
        .drawShadow(true)                   // Whether to draw a drop shadow or not
        .cancelable(false)                  // Whether tapping outside the outer circle dismisses the view
        .tintTarget(true)                   // Whether to tint the target view's color
        .transparentTarget(false)           // Specify whether the target is transparent (displays the content underneath)
        .icon(Drawable)                     // Specify a custom drawable to draw as the target
        .targetRadius(60),                  // Specify the target radius (in dp)
    new TapTargetView.Listener() {          // The listener can listen for regular clicks, long clicks or cancels
        @Override
        public void onTargetClick(TapTargetView view) {
            super.onTargetClick(view);      // This call is optional
            doSomething();
        }
    });

You may also choose to target your own custom Rect with TapTarget.forBounds(Rect, ...)

Additionally, each color can be specified via a @ColorRes or a @ColorInt. Functions that have the suffix Int take a @ColorInt.

Tip: When targeting a Toolbar item, be careful with Proguard and ensure you're keeping certain fields. See #180

Sequences

You can easily create a sequence of tap targets with TapTargetSequence:

new TapTargetSequence(this)
    .targets(
        TapTarget.forView(findViewById(R.id.never), "Gonna"),
        TapTarget.forView(findViewById(R.id.give), "You", "Up")
                .dimColor(android.R.color.never)
                .outerCircleColor(R.color.gonna)
                .targetCircleColor(R.color.let)
                .textColor(android.R.color.you),
        TapTarget.forBounds(rickTarget, "Down", ":^)")
                .cancelable(false)
                .icon(rick))
    .listener(new TapTargetSequence.Listener() {
        // This listener will tell us when interesting(tm) events happen in regards
        // to the sequence
        @Override
        public void onSequenceFinish() {
            // Yay
        }
        
        @Override
        public void onSequenceStep(TapTarget lastTarget, boolean targetClicked) {
            // Perform action for the current target
        }

        @Override
        public void onSequenceCanceled(TapTarget lastTarget) {
            // Boo
        }
    });

A sequence is started via a call to start() on the TapTargetSequence instance

For more examples of usage, please look at the included sample app.

Tutorials

raywenderlich.com

Third Party Bindings

React Native

Thanks to @prscX, you may now use this library with React Native via the module here

NativeScript

Thanks to @hamdiwanis, you may now use this library with NativeScript via the plugin here

Xamarin

Thanks to @btripp, you may now use this library via a Xamarin Binding located here.

License

Copyright 2016 Keepsafe Software Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot