FancyShowCaseView is a free, open source design & prototyping project written in Kotlin and released under Apache-2.0. It has 2,000 GitHub stars, 275 forks and 8 open issues, and was last pushed 11 months ago. On this registry it ranks #75 of 105 tracked projects in Design & Prototyping, with 5 head-to-head comparisons available.

What is FancyShowCaseView?

FancyShowCaseView is an open-source Kotlin library for Android that draws a customisable show case overlay — a focus area revealed with a circular reveal animation and an optional title — so an app can point users at one specific view on screen.

What it is

FancyShowCaseView is a Kotlin Android UI library released under the Apache-2.0 licence and distributed through JitPack as com.github.faruktoptas:FancyShowCaseView:1.5.0. Its topics place it squarely in the Android interface ecosystem — android-library, android-ui, material-design, material-ui — and the project was picked by MaterialUp as "Best of the Day". The work it does is narrow and visual: it masks the screen, cuts a focus shape around a view or a coordinate, and reveals that shape with a circular reveal animation on API Level 21 and above, with support for a title, a border and custom enter and exit animations. The repository carries roughly 2,000 stars and 275 forks.

The concrete problem it solves is the show case overlay — the first-run hint, the feature announcement, the guided step that has to highlight one control while everything else is dimmed. Built by hand, that means an overlay view, a highlighted shape positioned over a target, title placement, touch handling and dismissal logic, repeated for every hint in the app. FancyShowCaseView replaces that hand-written overlay with a builder call: new FancyShowCaseView.Builder(this).focusOn(view).title("Focus on View").build().show();. It also provides the behaviour such overlays usually lack, including showOnce, chained sequences of overlays, pass-through touch zones and listeners for animation completion and dismissal.

Key capabilities

  • The whole overlay is configured through FancyShowCaseView.Builder, which takes focusOn, title, backgroundColor, delay and closeOnTouch before build().show() displays it.
  • Focus geometry is selectable: focusShape chooses a circle or a rounded rectangle, refined by focusBorderColor, focusBorderSize, focusDashedBorder and roundRectRadius (set to 0 for a plain rectangle).
  • Position-based focus is available through focusCircleAtPosition (x, y, radius) and focusRectAtPosition (x, y, width, height) for targets that are not a view.
  • Sizing is adjustable with focusCircleRadiusFactor and focusRectSizeFactor, while the pulsing focus animation can be tuned with focusAnimationMaxValue and focusAnimationStep or switched off with disableFocusAnimation.
  • Presentation can be replaced entirely with customView, which takes precedence over the title and its properties, and motion can be replaced with enterAnimation, exitAnimation and animationListener.
  • Touch behaviour is configurable through clickableOn, enableTouchOnFocusedView (false by default), closeOnTouch and dismissListener.
  • Multiple FancyShowCaseView instances can be chained into a sequence, and showOnce restricts an overlay to a single appearance.

Who uses it and how

  • Published Android applications already ship it: the README lists News – Newspaper & Magazine and NN Senin Mobilin as apps in use.
  • First-run onboarding benefits from showOnce, which keeps a hint from returning on later launches.
  • Feature announcements on a single control rely on focusOn plus the radius and size factors to frame the target precisely.
  • Guided tours chain several instances across a flow, with fitSystemWindows set to true when the host root view uses that property.
  • Integration is Gradle-based through JitPack, and the README's sample is written in Java, so the builder is callable from Java or Kotlin projects.

Getting started

Add the JitPack repository with maven { url "https://jitpack.io" } to the root build.gradle file rather than the module file, then add implementation 'com.github.faruktoptas:FancyShowCaseView:1.5.0' to the module's dependencies. Further samples are collected in the project wiki.

How it compares

The facts for this entry name no paid products that FancyShowCaseView replaces and no sibling tools in the same category, so it stands alone in this registry. The honest comparison is therefore build-versus-adopt: either assemble an overlay, focus shape, title and dismissal handling from Android views and animation code, or take the Apache-2.0 library and its builder API.

When to use it — and when not to

Choose it for an API Level 21 or higher Android app that needs to spotlight a control, because the circular reveal animation is only available from that level up. As a client-side view library there is no database, storage or mail service to operate, so the running cost is limited to keeping the JitPack dependency and Gradle configuration current. It is a poor fit if the app must support older API levels or non-Android platforms, and the documentation stops at the README property table and the wiki — nothing there covers analytics or remote configuration of tours — with 8 open issues on the tracker.

project readme (upstream, from github) — read inline

FancyShowCaseView

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

Status Download

@MaterialUp Best of the Day

Features

  • Circular reveal animation (API Level 21+)
  • Focus on a specific view or position
  • Background color
  • Circle and Rounded Rectangle focus shapes
  • Title style and position
  • Custom view inflation
  • Custom enter/exit animations
  • Chaining multiple FancyShowCaseView instances
  • Showing only one time

!gif!gif

Download

Add this in your root build.gradle file (not your module build.gradle file):

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Then, add the library to your module build.gradle

dependencies {
    implementation 'com.github.faruktoptas:FancyShowCaseView:1.5.0'
}

Sample Usage

new FancyShowCaseView.Builder(this)
        .focusOn(view)
        .title("Focus on View")
        .build()
        .show();

Supported Properties

Command Description
focusOn The view to be focused.
title The title text to be displayed.
typeface The custom typeface for the title text.
titleStyle The text style for the title. (style defined in xml file)
titleGravity The gravity (alignment) of the title within the view (e.g., start, center, end).
titleSize The size of the title text, typically in sp units.
enableAutoTextPosition Center text position vertically.
backgroundColor The background color of the view, typically in hexadecimal or resource ID format.
fitSystemWindows This should be set to true, if your root view has this property set to true.
focusShape The shape of the focus area (e.g., rounded rectangle, circle).
focusBorderColor The color of the border around the focus area.
focusBorderSize The thickness of the border around the focus area (px)
focusDashedBorder Makes focus border dashed
roundRectRadius The radius for rounded corners when the focus shape is a rectangle with rounded edges. Use 0 for rectangle shape.
showOnce Determines if the focus should be shown only once.
clickableOn Let the touch event pass through to clickable view zone only if clicking within
focusCircleRadiusFactor Circle radius factor. Default value is 1. Bigger value makes bigger circle.
focusRectSizeFactor Focus rectangle size factor. Default value is 1. Bigger value makes bigger rectangle.
customView Use a fully customized view. If custom view used, title and title properties (titleStyle, titleGravity etc.) will be ignored.
closeOnTouch Closes the FancyShowCaseView when touching it.
enableTouchOnFocusedView Enables touching the focused view. Default value is false.
enterAnimation Custom animation to use when the FancyShowCaseView appears.
exitAnimation Custom animation to use when the FancyShowCaseView disappears.
animationListener Listener that triggers when enter/exit animations finish.
disableFocusAnimation Disables the pulsing focus animation.
focusAnimationMaxValue Focus animation max value. Bigger value makes larger focus area.
focusAnimationStep Step for focus animation. Default value is 1.
focusRectAtPosition Focus a rectangle at a specific position (x, y, width, height).
focusCircleAtPosition Focus a circle at a specific position (x, y, radius).
dismissListener Listener that triggers when the FancyShowCaseView is dismissed or skipped.
delay Shows the FancyShowCaseView after a delay.

Please see wiki for more samples.

Already in use in following apps

(feel free to send me new projects)

Sample App

Latest Release

Xamarin Port

Thanks to DigitalSa1nt for the Xamarin ported version Xamarin.ShowcaseView

Contribute

You can contribute by opening a pull request to dev branch. Please try to push one feature in one commit for a clean commit history.

Buy Me a Coffee

Buy Me A Coffee

License

Apache License 2.0

Frequently asked questions

Is FancyShowCaseView free to use?

FancyShowCaseView is open source under the Apache-2.0 licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does FancyShowCaseView do?

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

What is FancyShowCaseView written in?

FancyShowCaseView is primarily written in Kotlin. Its source is publicly available at https://github.com/faruktoptas/FancyShowCaseView, and it has 2,000 GitHub stars.