faruktoptas/fancyshowcaseview

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

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

Sample Usage

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

Supported Properties

Command	Description
focusOn
title
typeface
titleStyle
titleGravity
titleSize
enableAutoTextPosition	Center text position vertically.
backgroundColor
fitSystemWindows
focusShape
focusBorderColor
focusBorderSize
focusDashedBorder
roundRectRadius
showOnce
clickableOn
focusCircleRadiusFactor
focusRectSizeFactor
customView
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

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

fancyshowcaseview's Issues

FancyShowCaseView with recyclerview item

How to show FancyShowCaseView with RecyclerView item?

Focus a specific position (x, y, r)

Focusing on a view is possible now. But focusing a specific position will be useful.

program

can't work well in android 7.1.1!!

Action bar items are not getting focused

Action bar items are only getting focused if I call them inside onOptionsItemSelected() as per given sample program. But if I initialize the menu item view and then show casing it, show case focus is not getting visible / remains unfocused. Any way to fix it?

Prevent too big focus views to overflow screen

Overlapping focus view and title

I think it would make sense to add some logic to avoid this...

The text should be placed in the biggest remaining space on the screen by default imho...

Skip button

Hello there,
thank you for this amazing library!
I wonder if it is possible to add a skip button in order to close all the further FancyShowCaseView.
Can you suggest me how can I reach that?
Cheers!

Click on view in focus

Hey guys, quick question.

Is it possible to make only the target view (.focusOn) clickable even if .closeOnTouch is false?

Thanks!

Supporting rounded rectangle focus

Focusing wrong position on Android 4.x devices

Wrong position of focus

Wrong position of focus.

Chaining show case views

Is this possible? There is no listener for on showcase closed (only for the animation).

Would be nice to have at least a callback which can be setup via the builder

Animating focus circle

Looping with custom animation

Hello! The library is great, but there is an error. I want to set your fade animation for every api version. I use this code to create an animation:
Animation animationOut = AnimationUtils.loadAnimation(this, R.anim.fscv_fade_out);
And then in the builder:
.exitAnimation(animationOut)

Now, if I tap the show case view, it appears again and again

Hide on backPress

Adding APK file for the latest release

very critical bug with android:windowTranslucentStatus true

Hello! Excellent library and thanks for the work. But I have found a very critical bug.

Try to add

<item name="android:windowTranslucentStatus">true</item>

to your v21+/style and check application.

Result:

How can we fix it as soon as possible?

Listener on complete of ShowCase Queue

Hi @faruktoptas,

It would be great if you can provide listener on complete of ShowCase Queue like below:

`FancyShowCaseQueue fq = new FancyShowCaseQueue()
.add(fancyShowCaseView1)
.add(fancyShowCaseView2)
.add(fancyShowCaseView3)
.add(fancyShowCaseView4)
.show();

    fq.setOnCompleteListener(new OnCompleteListener() {
        @Override
        public void onComplete() {
            //Queue completed
        }
    });`

Adding border to focus circle

Border width, and color may be builder parameters.

Graphics problem when rotating screen

Thank you for this amazing repository!
I've noticed some problem after rotating screen:

• wrong background
• wrong circle position
  How can I fix it?
  Cheers!

Out of memory issue on createBitmap

Recenlty i started facing OOM issue on android 6.0.0 on createBitmap, did someone else face the same issue.
i have used RGB_565 in place of ARGB_888 to reduce the memory usage.

mCalculator = new Calculator(mActivity, mFocusShape, mView, mFocusCircleRadiusFactor, mFitSystemWindows); Bitmap bitmap = Bitmap.createBitmap(mCalculator.getBitmapWidth(), mCalculator.getBitmapHeight(), Bitmap.Config.RGB_565); bitmap.eraseColor(mBackgroundColor);

Wrong focus position if root view is fitsSystemWindows enabled

removeView() not called when custom exit animation applied

Hi, thanks for the library!
I think it should call removeView() when custom exit animation set, isn't it?

Title position is wrong

new Handler().postDelayed(new Runnable() {
          @Override
          public void run() {
              new FancyShowCaseView.Builder(getmActivity())
                      .focusOn(btnTwitterLogin)
                      .title("Etc etc")
                      .focusShape(FocusShape.ROUNDED_RECTANGLE)
                      .fitSystemWindows(true)
                      .titleSize(20, TypedValue.COMPLEX_UNIT_SP)
                      .titleStyle(0, Gravity.TOP | Gravity.CENTER_HORIZONTAL)
                      .build()
                      .show();
              sharedPrefManager.setIsLoginFragmmentAnimationsSeen(true);
          }
      }, 100);

First, in this code snippet (when i use titleStyle(...) ) fistsystemwindows(true) has no effect.

I tried to use titleGravity(..) with fitSystemWindows(true), in that case the title gets pushed outside the screen partially. I thought i could solve it by defining a style with marginTop and apply it and then the fitSystemWindows is eliminated and the button's focus is pushed upwards. :)

Any idea? Btw love the library.

Add onclicklistener on focus view

I want user can click the view the showcase is focusing. Is that possible?

Media files removed from project files

Gif

How to change the font family of the title ?

What is the font used in the title ? How can I change it ?

Views that are not on focus on .closeOnTouch(false) are still clickable

Heya,

I've notice that when you are using a view as a focus with closeOnTouch set as false the other views, for instance a button, below the overlay are still clickable.

Is there a way to go around it?

Cheers!

How to skip all show case views?

How can I apply the skipping action to skip all show case views when I use FancyShowCaseQueue?

Adding new shapes

What do you think about adding new shapes besides circle and rounded rectangle? The code reads as though rounded rectangle was added as an afterthought. Thinking about generalizing the code and supporting a couple more shapes (elipse, rectangle).

Add abort/cancel method to FancyShowCaseQueue

I used to call FancyShowCaseView.hideCurrent(activity) to hide a whole FancyShowCaseQueue of an Activity.
This doesn't seem to work anymore as it only closes the currently displayed FancyShowCaseView inside the Queue.

Is the current behavior a bug or intended? If it's intended, i think FancyShowCaseQueue should also
have a hideCurrent Method. Or is there already a way to accomplish that?

Accessing mContainer view via mFancyShowCaseView.getView() method

FancyShowCaseView.Builder.build() method performance

First of all, thanks for this awesome library. Here is a small performance enhancement request. The builder should check whether it has been shown before if showOnce flag is set and do thing if it has been shown before. No need to continue building the view in this case. Thanks.

Can't get right focus height with focusRectAtPosition()

I'm setting the view using .focusRectAtPosition() and get focus height multiplied by 2.

 // Calculate position
        val centerY = onScreenY + cityNameTV.height / 2
        val centerX = cityNameTV.left + cityNameTV.width / 2
        val width = activity.getScreenWidth()
        val height = resources.getDimensionPixelSize(R.dimen.city_showcase_height)

        // Create showcase
        FancyShowCaseView.Builder(activity)
                .backgroundColor(ContextCompat.getColor(context, R.color.showcase))
                .focusShape(FocusShape.ROUNDED_RECTANGLE)
                .focusRectAtPosition(centerX, centerY, width, height)
                .roundRectRadius(1) // Almost 0 :)
                .disableFocusAnimation()
                .customView(R.layout.layout_showcase_city) {
                    it.button.setOnClickListener { cityShowcase.hide() }
                }
                .closeOnTouch(false)
                .exitAnimation(AnimationUtils.loadAnimation(context, R.anim.fscv_fade_out).apply {
                    setAnimationListener(object : Animation.AnimationListener {
                        override fun onAnimationEnd(animation: Animation?) {
                            cityShowcase.removeView()
                        }

                        override fun onAnimationRepeat(animation: Animation?) {}
                        override fun onAnimationStart(animation: Animation?) {}
                    })
                })
                .build()

Height is from dimensions:

<dimen name="city_showcase_height">12dp</dimen>

And I get the visual height of focus exactly as the status bar (24dp).
Could you please help with this?

Is there a way to call a function as soon as the tutorial is dismissed?

Focus not working with constraint layout

Hey Faruk, I'm trying to implement your lib with dagger and constraint layout.

    @Bind(R.id.login) AppCompatButton login;

 @Override public void onViewCreated(View view, Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
   
new FancyShowCaseView.Builder(getActivity())
        .focusOn(login)
        .title("Focus on View")
        .build()
        .show();
  }

Full size of screen is in focus all the time, can not focus on button or any other view.Can you help?
Thanks

Bottom bar items are not getting focused

I used it like this:
-=-=-=-=-=-=-=-
new FancyShowCaseView.Builder(this)
.focusOn(findViewById(R.id.tab_home))
.title("Focus on View")
.focusShape(FocusShape.CIRCLE)
.build()
.show();

change animation radius (mAnimCounter)

Hello.
Can you add function to change animation radius? Or, just set public construction to your classes?
Thank you for lib

android:allowBackup="true" in library's manifest file

Please remove this attribute from library's manifest file, it's unusual. This causes a merging error when the application has it set to false.

codecov integration

Doesn't work with BottomSheetDialogFragment

Doesn't work with BottomSheetDialogFragment.

The ShowCaseView gets drawn behind the bottom sheet. Any quick workarounds?

Adding robolectric unit tests

how to show in fragment ?

i checked the code it seems library is finding views from an activity only . how can i display in fragment ?

Updating README.md

• Explain all Builder parameters in README.md
• Add more examples with screenshots

Accessing focus circle position and radius parameters (x, y, r)

Public getFocusPosition() and getFocusRadius() that should be defined

Unable to import the library into gradle

used this in root:
maven { url 'https://jitpack.io' }

used this in project gradle:
compile 'com.github.faruktoptas:FancyShowCaseView:0.1.0'

FancyShowCaseView should be extended from FrameLayout

TabLayout custom view focus

Hi, I have a tab alyout with custom view

<ImageView
    android:id="@+id/notification_tab_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/selector_tab_notifications"
    xmlns:android="http://schemas.android.com/apk/res/android" />

My drawable/selector_tab_notifications looks like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/ic_ac_tab_notif_select"/>
    <item android:drawable="@drawable/ic_ac_tab_notif"/>
</selector>

I'm trying to use:

new FancyShowCaseView.Builder(this)
                .focusOn(toolbarTabLayout.getTabAt(1).getCustomView())
                .title("Focus text")
                .build()
                .show();

new FancyShowCaseView.Builder(this)             
            .focusOn((ImageView)toolbarTabLayout.getTabAt(1).getCustomView().findViewById(R.id.notification_tab_view))
                .title("Focus text")
                .build()
                .show();

and nothing works. Is there a solution to this problem?

Flag to disable Focus animation

The animation on the focus is nice, but probably more often than not, i don't want that and have
a static focus instead.
A flag to disable it on the Builder would be nice.

Reset showOnce

It would be nice to support resetting of the showOnce flag, indiviually and all at once