ShowcaseView

[Archived] Highlight the best bits of your app to users quickly, simply, and cool...ly

5,602

1,288

5,602

View on GitHub

Top Related Projects

TapTargetView

5,371

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

MaterialTapTargetPrompt

1,522

⛔️ DEPRECATED Material Design tap target for Android. https://sjwall.github.io/MaterialTapTargetPrompt/

FancyShowCaseView

1,949

An easy-to-use customisable show case view with circular reveal animation.

Spotlight

3,614

Android Library that lights items for tutorials or walk-throughs etc...

Quick Overview

ShowcaseView is an Android library that provides an elegant and customizable way to highlight and showcase specific UI elements in your app. It creates an overlay that focuses on a particular view, making it ideal for onboarding experiences, feature introductions, or drawing attention to new functionality.

Pros

Easy to implement and integrate into existing Android projects
Highly customizable, allowing for various styles and animations
Supports both single-shot and multi-step showcases
Compatible with a wide range of Android versions

Cons

Limited documentation and examples for advanced use cases
Some reported issues with compatibility on newer Android versions
Infrequent updates and maintenance
Lack of built-in support for complex shapes or custom highlight areas

Code Examples

Basic showcase:

new ShowcaseView.Builder(this)
    .setTarget(new ViewTarget(findViewById(R.id.my_button)))
    .setContentTitle("Welcome")
    .setContentText("This is where you can perform an action")
    .hideOnTouchOutside()
    .build();

Customizing the showcase style:

new ShowcaseView.Builder(this)
    .setTarget(new ViewTarget(findViewById(R.id.my_button)))
    .setStyle(R.style.CustomShowcaseTheme)
    .setContentTitle("Custom Style")
    .setContentText("This showcase has a custom style")
    .build();

Creating a multi-step showcase:

ShowcaseView.Builder builder = new ShowcaseView.Builder(this);
builder.setStyle(R.style.CustomShowcaseTheme2);

ShowcaseView showcaseView = builder.build();
showcaseView.setOnShowcaseEventListener(new OnShowcaseEventListener() {
    @Override
    public void onShowcaseViewHide(ShowcaseView showcaseView) {
        // Show the next step
        showcaseView.setShowcase(new ViewTarget(findViewById(R.id.next_button)), true);
    }

    @Override
    public void onShowcaseViewDidHide(ShowcaseView showcaseView) {}

    @Override
    public void onShowcaseViewShow(ShowcaseView showcaseView) {}

    @Override
    public void onShowcaseViewTouchBlocked(MotionEvent motionEvent) {}
});

Getting Started

Add the dependency to your build.gradle file:

dependencies {
    implementation 'com.github.amlcurran.showcaseview:library:5.4.3'
}

In your activity or fragment, create a ShowcaseView instance:

new ShowcaseView.Builder(this)
    .setTarget(new ViewTarget(findViewById(R.id.my_button)))
    .setContentTitle("Welcome")
    .setContentText("This is a showcase of an important UI element")
    .hideOnTouchOutside()
    .build();

Customize the showcase as needed using the builder methods before calling build().

Competitor Comparisons

TapTargetView

5,371

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

Pros of TapTargetView

More modern and Material Design-compliant appearance
Smoother animations and transitions
Better support for custom shapes and layouts

Cons of TapTargetView

Slightly more complex setup process
Less extensive documentation compared to ShowcaseView
Fewer customization options for text positioning

Code Comparison

TapTargetView:

TapTargetView.showFor(this,
    TapTarget.forView(findViewById(R.id.target), "Title", "Description")
        .outerCircleColor(R.color.colorPrimary)
        .targetCircleColor(R.color.white)
        .titleTextSize(20)
        .titleTextColor(R.color.white)
        .descriptionTextSize(10)
        .descriptionTextColor(R.color.black)
        .tintTarget(false))

ShowcaseView:

new ShowcaseView.Builder(this)
    .setTarget(new ViewTarget(findViewById(R.id.target)))
    .setContentTitle("Title")
    .setContentText("Description")
    .hideOnTouchOutside()
    .build();

Both libraries offer similar functionality for highlighting UI elements, but TapTargetView provides a more modern look and smoother animations. ShowcaseView, while slightly older, offers more extensive documentation and simpler setup. The choice between the two depends on specific project requirements and design preferences.

MaterialTapTargetPrompt

1,522

⛔️ DEPRECATED Material Design tap target for Android. https://sjwall.github.io/MaterialTapTargetPrompt/

Pros of MaterialTapTargetPrompt

More modern Material Design aesthetic
Smoother animations and transitions
Better customization options for shape, color, and text positioning

Cons of MaterialTapTargetPrompt

Limited to circular target shapes
Requires more setup code compared to ShowcaseView
Less extensive documentation and community support

Code Comparison

MaterialTapTargetPrompt:

new MaterialTapTargetPrompt.Builder(MainActivity.this)
    .setTarget(findViewById(R.id.fab))
    .setPrimaryText("Send your first email")
    .setSecondaryText("Tap the envelope to start composing")
    .show();

ShowcaseView:

new ShowcaseView.Builder(this)
    .setTarget(new ViewTarget(findViewById(R.id.button)))
    .setContentTitle("ShowcaseView")
    .setContentText("This is highlighting the Home button")
    .hideOnTouchOutside()
    .build();

Both libraries offer similar functionality for creating onboarding and feature highlight experiences. MaterialTapTargetPrompt provides a more modern look and feel with smoother animations, while ShowcaseView offers more flexibility in target shapes and has been around longer with a larger user base. The code comparison shows that MaterialTapTargetPrompt requires slightly more setup but offers more customization options in a single builder chain.

FancyShowCaseView

1,949

An easy-to-use customisable show case view with circular reveal animation.

Pros of FancyShowCaseView

More customization options, including custom shapes and animations
Better support for circular and rounded rectangle focus areas
Easier to create multi-step showcase sequences

Cons of FancyShowCaseView

Slightly more complex setup process
May have a higher performance overhead due to additional features
Less established community and fewer long-term users

Code Comparison

ShowcaseView:

new ShowcaseView.Builder(this)
    .setTarget(new ViewTarget(findViewById(R.id.button)))
    .setContentTitle("Title")
    .setContentText("Description")
    .hideOnTouchOutside()
    .build();

FancyShowCaseView:

new FancyShowCaseView.Builder(this)
    .focusOn(findViewById(R.id.button))
    .title("Title")
    .description("Description")
    .roundRectRadius(60)
    .dismissOnTouch(true)
    .build();

Both libraries provide similar functionality for creating showcase views in Android applications. ShowcaseView offers a simpler, more straightforward approach, while FancyShowCaseView provides more advanced customization options at the cost of slightly increased complexity. The choice between the two depends on the specific requirements of your project and the level of customization needed.

Spotlight

3,614

Android Library that lights items for tutorials or walk-throughs etc...

Pros of Spotlight

More customizable and flexible, allowing for various shapes and animations
Supports both Android and iOS platforms
Actively maintained with recent updates

Cons of Spotlight

Slightly more complex implementation due to increased flexibility
May require more setup code for basic use cases
Smaller community and fewer resources compared to ShowcaseView

Code Comparison

ShowcaseView:

new ShowcaseView.Builder(this)
    .setTarget(new ViewTarget(findViewById(R.id.button)))
    .setContentTitle("Title")
    .setContentText("Description")
    .hideOnTouchOutside()
    .build();

Spotlight:

Spotlight.with(this)
    .setOverlayColor(ContextCompat.getColor(this, R.color.background))
    .setDuration(1000L)
    .setAnimation(DecelerateInterpolator(2f))
    .setTargets(
        Target.Builder()
            .setAnchor(findViewById<View>(R.id.button))
            .setShape(Circle(100f))
            .setEffect(RippleEffect(100f, 200f, Color.GREEN))
            .setOverlay(ViewTarget(R.layout.layout_target))
            .build()
    )
    .start()

Both libraries offer showcase functionality for Android apps, but Spotlight provides more customization options and cross-platform support. ShowcaseView has a simpler implementation for basic use cases and a larger community. The code comparison demonstrates the difference in setup complexity and customization options between the two libraries.

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

ShowcaseView

The ShowcaseView (SCV) library is designed to highlight and showcase specific parts of apps to the user with a distinctive and attractive overlay. This library is great for pointing out points of interest for users, gestures, or obscure but useful items.

Holo	"New style"	Material

The library is based on the "Cling" view found in the Launcher on Ice-Cream Sandwich and Jelly Bean.

Project set-up

ShowcaseView currently supports API LEVEL 11+

If you're using a Gradle-based project, then you can add SCV as a dependency directly:

compile 'com.github.amlcurran.showcaseview:library:5.4.3'

If you're using Maven (but not Gradle), you can add the APKlib as a dependency:

<dependency>
  <groupId>com.github.amlcurran.showcaseview</groupId>
  <artifactId>library</artifactId>
  <version>5.4.3</version>
  <type>apklib</type>
</dependency>

If you're using a standard project without either Maven or Gradle, you'll have to download the project, and the add the library manually to your project.

Usage

To use ShowcaseView, use the Builder pattern.

As an example:

new ShowcaseView.Builder(this)
    .setTarget(new ActionViewTarget(this, ActionViewTarget.Type.HOME))
    .setContentTitle("ShowcaseView")
    .setContentText("This is highlighting the Home button")
    .hideOnTouchOutside()
    .build();

You can use styles to customise how a ShowcaseView looks. I'll write more documentation soon, but for now, check out the sample project's styles.

Sample Project

There's a sample project available which you can find in the project, or as an app on the Google Play Store.

What's the legacy branch?

The legacy branch is still available for people to use. This has more features than the master branch, but it more unwieldy to use and less stable. I don't support it at all - you'll have to build and compile it yourself. It isn't available on Maven Central either.

Is it worth using?

Perhaps. Why not ask Google, iPlayer Radio, or AllCast, which each use the library?

Previous users include The Guardian and HaxSync

What's missing in v5

ShowcaseViews: the class which queues up ShowcaseViews in a tutorial-type method. I never really liked this class (generally, you should use SCV sparingly); I'll add it back in based on the Builder class when I can.
Ghostly hand: this has gone for now until I can test-drive it back in.
Scale multiplier: this has gone for simplicity - if people really loved it I'll add in back in

FAQs

Where has X feature gone?

Look one paragraph up!

Waaaah, but I really liked feature X!!!

Switch to the legacy branch and use that one then! All legacy features are in there.

What happened to all the other constructors?

Gone. You should be using the new Target API.

What if I want to add feature X?

At the moment, I'm not taking any feature requests. It's unlikely I'll take many anyway, unless I feel they are both useful and well tested. If you have some cosmetic tweak then I don't want that added into the library as another option. But, if you need to make a tweak to the library to add such a tweak to your own, overridden ShowcaseView then that is totally great.

Copyright and Licensing

This library is distributed under an Apache 2.0 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