Convert Figma logo to code with AI

faruktoptas logoFancyShowCaseView

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

1,949
275
1,949
9

Top Related Projects

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

:octocat: 📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion

Android Floating Action Button based on Material Design specification

A menu which can ... BOOM! - Android

Quick Overview

FancyShowCaseView is an Android library that provides a customizable and interactive showcase view to highlight specific parts of an app's UI. It allows developers to guide users through the features of their app by highlighting specific elements and displaying informative content.

Pros

  • Highly Customizable: The library offers a wide range of customization options, allowing developers to tailor the showcase view to match the branding and design of their app.
  • Interactive Animations: The showcase view includes smooth and engaging animations that help draw the user's attention to the highlighted elements.
  • Flexible Positioning: The showcase view can be positioned and sized to fit the specific needs of the app's UI.
  • Easy Integration: The library provides a simple and straightforward API for integrating the showcase view into an Android app.

Cons

  • Limited Targeting Options: The library primarily focuses on highlighting specific UI elements, and may not be as suitable for more complex or dynamic showcases.
  • Dependency on External Libraries: The library relies on the use of external libraries, such as Kotlin and RxJava, which may increase the overall project size and complexity.
  • Potential Performance Impact: Depending on the complexity of the showcase view and the number of elements being highlighted, the library may have a slight impact on the app's performance.
  • Lack of Extensive Documentation: While the library provides some documentation, the level of detail and examples may not be sufficient for all use cases.

Code Examples

Here are a few examples of how to use the FancyShowCaseView library in your Android app:

// Create a new showcase view
val fancyShowCaseView = FancyShowCaseView.Builder(this)
    .focusOn(view) // Focus on a specific view
    .title("Title")
    .content("Content")
    .closeOnTouch(true)
    .build()

// Show the showcase view
fancyShowCaseView.show()
// Create a showcase sequence
val sequence = FancyShowCaseSequence.Builder()
    .addShowCase(fancyShowCaseView1)
    .addShowCase(fancyShowCaseView2)
    .addShowCase(fancyShowCaseView3)
    .build()

// Show the showcase sequence
sequence.show()
// Customize the showcase view
val fancyShowCaseView = FancyShowCaseView.Builder(this)
    .focusOn(view)
    .title("Title")
    .content("Content")
    .backgroundColor(Color.GRAY)
    .titleStyle(R.style.TextAppearance_AppCompat_Title)
    .contentStyle(R.style.TextAppearance_AppCompat_Body1)
    .closeButtonText("Got it")
    .build()

Getting Started

To use the FancyShowCaseView library in your Android app, follow these steps:

  1. Add the library to your project's build.gradle file:
dependencies {
    implementation 'com.github.faruktoptas:FancyShowCaseView:1.1.0'
}
  1. Create a new FancyShowCaseView instance and configure it with the desired options:
val fancyShowCaseView = FancyShowCaseView.Builder(this)
    .focusOn(view)
    .title("Title")
    .content("Content")
    .closeOnTouch(true)
    .build()
  1. Show the showcase view:
fancyShowCaseView.show()
  1. (Optional) Create a sequence of showcase views and show them in a specific order:
val sequence = FancyShowCaseSequence.Builder()
    .addShowCase(fancyShowCaseView1)
    .addShowCase(fancyShowCaseView2)
    .addShowCase(fancyShowCaseView3)
    .build()

sequence.show()

That's it! You can now use the FancyShowCaseView library to guide your users through the features of your Android app.

Competitor Comparisons

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

Pros of RecyclerView Animators

  • Provides a wide range of pre-built animations for RecyclerView items, including fade, scale, slide, and more.
  • Supports both item and layout animations, allowing for more customization.
  • Integrates well with popular RecyclerView libraries like Epoxy and Groupie.

Cons of RecyclerView Animators

  • Requires more setup and configuration compared to FancyShowCaseView.
  • May have a larger impact on performance, especially for large datasets, due to the nature of the animations.
  • Doesn't provide the same level of customization and flexibility as FancyShowCaseView for non-RecyclerView use cases.

Code Comparison

FancyShowCaseView:

FancyShowCaseView.Builder(this)
    .title("Title")
    .focusOn(view)
    .closeOnTouch(true)
    .build()
    .show();

RecyclerView Animators:

recyclerView.setItemAnimator(new SlideInUpAnimator());
recyclerView.getItemAnimator().setAddDuration(300);
recyclerView.getItemAnimator().setRemoveDuration(300);

:octocat: 📃 FoldingCell is a material design expanding content cell inspired by folding paper material made by @Ramotion

Pros of Folding Cell Android

  • Provides a unique and visually appealing UI component for Android applications
  • Supports various animation styles and customization options
  • Includes detailed documentation and examples to help developers get started

Cons of Folding Cell Android

  • May be more complex to integrate and customize compared to FancyShowCaseView
  • Requires more code to set up and configure the folding cell behavior
  • May have a larger impact on app performance due to the complex animations

Code Comparison

FancyShowCaseView (5 lines):

FancyShowCaseView fancyShowCaseView = new FancyShowCaseView.Builder(this)
    .title("Title")
    .focusOn(view)
    .closeOnTouch(true)
    .show();

Folding Cell Android (5 lines):

FoldingCell foldingCell = new FoldingCell(this);
foldingCell.setBackSideView(R.layout.back_side);
foldingCell.setFrontSideView(R.layout.front_side);
foldingCell.setAnimationDuration(1000);
foldingCell.initialize(this);

Android Floating Action Button based on Material Design specification

Pros of Clans/FloatingActionButton

  • Provides a wide range of customization options for the floating action button, including size, color, and animation.
  • Supports multiple floating action buttons with different actions.
  • Includes a built-in menu system for displaying additional actions when the main button is clicked.

Cons of Clans/FloatingActionButton

  • The library may be overkill for simple use cases where a single floating action button is sufficient.
  • The API can be more complex compared to FancyShowCaseView, which has a more straightforward implementation.
  • The library may have a larger footprint in your app, depending on your specific requirements.

Code Comparison

FancyShowCaseView:

FancyShowCaseView.Builder(this)
    .title("Title")
    .content("Content")
    .closeOnTouch(true)
    .build()
    .show();

Clans/FloatingActionButton:

FloatingActionButton fab = new FloatingActionButton.Builder(this)
    .withButtonSize(FloatingActionButton.SIZE_NORMAL)
    .withButtonColor(Color.WHITE)
    .withGravity(Gravity.BOTTOM | Gravity.RIGHT)
    .create();

A menu which can ... BOOM! - Android

Pros of BoomMenu

  • BoomMenu provides a more visually appealing and interactive menu experience compared to FancyShowCaseView.
  • BoomMenu offers a wider range of customization options, allowing developers to tailor the menu to their specific needs.
  • BoomMenu's animations and transitions are generally more polished and fluid than those of FancyShowCaseView.

Cons of BoomMenu

  • BoomMenu may have a steeper learning curve for developers, as it offers a more complex and feature-rich API compared to FancyShowCaseView.
  • BoomMenu's larger codebase and feature set may result in a larger APK size, which could be a concern for some mobile applications.

Code Comparison

FancyShowCaseView:

FancyShowCaseView.Builder(this)
    .title("Title")
    .focusOn(view)
    .closeOnTouch(true)
    .build()
    .show();

BoomMenu:

BoomMenuButton bmb = (BoomMenuButton) findViewById(R.id.bmb);
bmb.setButtonEnum(ButtonEnum.SimpleCircle);
bmb.setPiecePlaceEnum(PiecePlaceEnum.DOT_3_1);
bmb.setButtonPlaceEnum(ButtonPlaceEnum.SC_3_1);
bmb.setButtonRadius(getResources().getDimension(R.dimen.button_radius));
bmb.setButtonSpace(getResources().getDimension(R.dimen.button_space));

Convert Figma logo designs to code with AI

Visual Copilot

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

Try Visual Copilot

README

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.3.9'
}

Sample Usage

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

Supported Properties

CommandDescription
focusOnThe view to be focused.
titleThe title text to be displayed.
typefaceThe custom typeface for the title text.
titleStyleThe text style for the title. (style defined in xml file)
titleGravityThe gravity (alignment) of the title within the view (e.g., start, center, end).
titleSizeThe size of the title text, typically in sp units.
enableAutoTextPositionCenter text position vertically.
backgroundColorThe background color of the view, typically in hexadecimal or resource ID format.
fitSystemWindowsThis should be set to true, if your root view has this property set to true.
focusShapeThe shape of the focus area (e.g., rounded rectangle, circle).
focusBorderColorThe color of the border around the focus area.
focusBorderSizeThe thickness of the border around the focus area (px)
focusDashedBorder
roundRectRadiusThe radius for rounded corners when the focus shape is a rectangle with rounded edges. Use 0 for rectangle shape.
showOnceDetermines if the focus should be shown only once.
clickableOn
focusCircleRadiusFactor
focusRectSizeFactor
customViewUse a fully customized view. If custom view used, title and title properties (titleStyle, titleGravity etc.) will be ignored.
closeOnTouch
enableTouchOnFocusedView
enterAnimation
exitAnimation
animationListener
disableFocusAnimation
focusAnimationMaxValueFocus animation max value. Bigger value makes larger focus area.
focusAnimationStepStep for focus animation. Default value is 1.
focusRectAtPosition
focusCircleAtPosition
dismissListener
delayShows 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