Awesome

FancyShowCaseView

An easy-to-use customizable show case view with circular reveal animation. <a href="https://github.com/faruktoptas/FancyShowCaseView/actions"><img src="https://github.com/faruktoptas/FancyShowCaseView/workflows/build/badge.svg" alt="Status"/></a> <a href="https://jitpack.io/#faruktoptas/FancyShowCaseView"><img src="https://jitpack.io/v/faruktoptas/FancyShowCaseView.svg" alt="Download"/></a> <a href="https://www.codacy.com/manual/faruktoptas/FancyShowCaseView?utm_source=github.com&utm_medium=referral&utm_content=faruktoptas/FancyShowCaseView&utm_campaign=Badge_Grade"><img src="https://app.codacy.com/project/badge/Grade/47050961b2d947d3a58292f50d74e110" alt=""/></a> <a href="https://android-arsenal.com/details/1/5440"><img src="https://img.shields.io/badge/Android%20Arsenal-FancyShowCaseView-brightgreen.svg?style=flat" alt=""/></a> <a href="https://android-arsenal.com/api?level=10"><img src="https://img.shields.io/badge/API-14%2B-blue.svg?style=flat" alt=""/></a> <a href="https://gitter.im/faruktoptas/FancyShowCaseView?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"><img src="https://badges.gitter.im/faruktoptas/FancyShowCaseView.svg" alt=""/></a> <img src="https://cloud.githubusercontent.com/assets/1595227/24761426/f80dbc64-1af3-11e7-9c99-bca3dd836a8e.png"/> <a href="https://material.uplabs.com/posts/fancyshowcaseview">@MaterialUp Best of the Day</a>

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.4.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`
`exitAnimation`
`animationListener`
`disableFocusAnimation`
`focusAnimationMaxValue`	Focus animation max value. Bigger value makes larger focus area.
`focusAnimationStep`	Step for focus animation. Default value is 1.
`focusRectAtPosition`
`focusCircleAtPosition`
`dismissListener`
`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

License

Apache License 2.0