faruktoptas/FancyShowCaseView — 2.0k Stars

Topics

#android #android-development #android-library #android-ui #animation #circular-reveal #fancyshowcaseview #kotlin #kotlin-android #kotlin-library #material-design #material-ui

Language breakdown

No language data available.

▸ Files click to expand

README

FancyShowCaseView

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

@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

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. |