FancyShowCaseView
An easy-to-use customisable show case view with circular reveal animation.
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:
- Add the library to your project's
build.gradle
file:
dependencies {
implementation 'com.github.faruktoptas:FancyShowCaseView:1.1.0'
}
- 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()
- Show the showcase view:
fancyShowCaseView.show()
- (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 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 CopilotREADME
An easy-to-use customizable show case view with circular reveal animation.
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.3.9'
}
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 | |
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 | |
focusCircleRadiusFactor | |
focusRectSizeFactor | |
customView | Use a fully customized view. If custom view used, title and title properties (titleStyle, titleGravity etc.) will be ignored. |
closeOnTouch | |
enableTouchOnFocusedView | |
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)
- News - Newspaper & Magazine
- NN Senin Mobilin
- UmÃme Äesky
- DHIS2 Capture
- Travel Weather - Forecast plan for your trip
- muSync for Spotify
Sample App
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
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
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