Search code examples
androidinterfacefloating-action-button

Android : Circular pulsating help for the FAB button


I saw various apps using this exact interface to help their users when they use it for the first time. (Colored disc, descriptive text and the pulsating fab button). Anybody knows the name of this library? Comes it from the Android SDK?


Solution

  • Same ripple effect can be achieved using TaptTargetView library.

    TapTargetView Library

    It has a very simple usage

    TapTargetView.showFor(this,                 // `this` is an Activity
        TapTarget.forView(findViewById(R.id.target), "This is a target", "We have the best targets, believe me")
            // All options below are optional
            .outerCircleColor(R.color.red)      // Specify a color for the outer circle
            .outerCircleAlpha(0.96f)            // Specify the alpha amount for the outer circle
            .targetCircleColor(R.color.white)   // Specify a color for the target circle
            .cancelable(false)                  // Whether tapping outside the outer circle dismisses the view
            .tintTarget(true)                   // Whether to tint the target view's color
            .transparentTarget(false)           // Specify whether the target is transparent (displays the content underneath)
            .icon(Drawable)                     // Specify a custom drawable to draw as the target
            .targetRadius(60),                  // Specify the target radius (in dp)
        new TapTargetView.Listener() {          // The listener can listen for regular clicks, long clicks or cancels
            @Override
            public void onTargetClick(TapTargetView view) {
                super.onTargetClick(view);      // This call is optional
                doSomething();
            }
        });
    

    You can also perform a sequence of actions on elements

    new TapTargetSequence(this)
        .targets(
            TapTarget.forView(findViewById(R.id.never), "Gonna"),
            TapTarget.forView(findViewById(R.id.give), "You", "Up")
                    .dimColor(android.R.color.never)
                    .outerCircleColor(R.color.gonna)
                    .targetCircleColor(R.color.let)
                    .textColor(android.R.color.you),
            TapTarget.forBounds(rickTarget, "Down", ":^)")
                    .cancelable(false)
                    .icon(rick))
        .listener(new TapTargetSequence.Listener() {
            // This listener will tell us when interesting(tm) events happen in regards
            // to the sequence
            @Override
            public void onSequenceFinish() {
                // Yay
            }
    
            @Override
            public void onSequenceStep(TapTarget lastTarget) {
               // Perfom action for the current target
            }
    
            @Override
            public void onSequenceCanceled(TapTarget lastTarget) {
                // Boo
            }
        });
    

    Add this to your build.gradle

    repositories { 
            jcenter()
       }
    
       dependencies {
             implementation 'com.getkeepsafe.taptargetview:taptargetview:1.12.0'
       }