Avoid button multiple rapid clicks

Question

I have a problem with my app that if the user clicks the button multiple times quickly, then multiple events are generated before even my dialog holding the button disappears

I know a solution by setting a boolean variable as a flag when a button is clicked so future clicks can be prevented until the dialog is closed. However I have many buttons and having to do this everytime for every buttons seems to be an overkill. Is there no other way in android (or maybe some smarter solution) to allow only only event action generated per button click?

What's even worse is that multiple quick clicks seems to generate multiple event action before even the first action is handled so if I want to disable the button in the first click handling method, there are already existing events actions in the queue waiting to be handled!

Please help Thanks

Answer 1

Here's a 'debounced' onClick listener that I wrote recently. You tell it what the minimum acceptable number of milliseconds between clicks is. Implement your logic in onDebouncedClick instead of onClick

import android.os.SystemClock;
import android.view.View;

import java.util.Map;
import java.util.WeakHashMap;

/**
 * A Debounced OnClickListener
 * Rejects clicks that are too close together in time.
 * This class is safe to use as an OnClickListener for multiple views, and will debounce each one separately.
 */
public abstract class DebouncedOnClickListener implements View.OnClickListener {

    private final long minimumIntervalMillis;
    private Map<View, Long> lastClickMap;

    /**
     * Implement this in your subclass instead of onClick
     * @param v The view that was clicked
     */
    public abstract void onDebouncedClick(View v);

    /**
     * The one and only constructor
     * @param minimumIntervalMillis The minimum allowed time between clicks - any click sooner than this after a previous click will be rejected
     */
    public DebouncedOnClickListener(long minimumIntervalMillis) {
        this.minimumIntervalMillis = minimumIntervalMillis;
        this.lastClickMap = new WeakHashMap<>();
    }

    @Override 
    public void onClick(View clickedView) {
        Long previousClickTimestamp = lastClickMap.get(clickedView);
        long currentTimestamp = SystemClock.uptimeMillis();

        lastClickMap.put(clickedView, currentTimestamp);
        if(previousClickTimestamp == null || Math.abs(currentTimestamp - previousClickTimestamp) > minimumIntervalMillis) {
            onDebouncedClick(clickedView);
        }
    }
}

Answer 2

With RxBinding it can be done easily. Here is an example:

RxView.clicks(view).throttleFirst(500, TimeUnit.MILLISECONDS).subscribe(empty -> {
            // action on click
        });

Add the following line in build.gradle to add RxBinding dependency:

compile 'com.jakewharton.rxbinding:rxbinding:0.3.0'

Answer 3

We can do it without any library. Just create one single extension function:

fun View.clickWithDebounce(debounceTime: Long = 600L, action: () -> Unit) {
    this.setOnClickListener(object : View.OnClickListener {
        private var lastClickTime: Long = 0

        override fun onClick(v: View) {
            if (SystemClock.elapsedRealtime() - lastClickTime < debounceTime) return
            else action()

            lastClickTime = SystemClock.elapsedRealtime()
        }
    })
}

View onClick using below code:

buttonShare.clickWithDebounce { 
   // Do anything you want
}

Answer 4

Here's my version of the accepted answer. It is very similar, but doesn't try to store Views in a Map which I don't think is such a good idea. It also adds a wrap method that could be useful in many situations.

/**
 * Implementation of {@link OnClickListener} that ignores subsequent clicks that happen too quickly after the first one.<br/>
 * To use this class, implement {@link #onSingleClick(View)} instead of {@link OnClickListener#onClick(View)}.
 */
public abstract class OnSingleClickListener implements OnClickListener {
    private static final String TAG = OnSingleClickListener.class.getSimpleName();

    private static final long MIN_DELAY_MS = 500;

    private long mLastClickTime;

    @Override
    public final void onClick(View v) {
        long lastClickTime = mLastClickTime;
        long now = System.currentTimeMillis();
        mLastClickTime = now;
        if (now - lastClickTime < MIN_DELAY_MS) {
            // Too fast: ignore
            if (Config.LOGD) Log.d(TAG, "onClick Clicked too quickly: ignored");
        } else {
            // Register the click
            onSingleClick(v);
        }
    }

    /**
     * Called when a view has been clicked.
     * 
     * @param v The view that was clicked.
     */
    public abstract void onSingleClick(View v);

    /**
     * Wraps an {@link OnClickListener} into an {@link OnSingleClickListener}.<br/>
     * The argument's {@link OnClickListener#onClick(View)} method will be called when a single click is registered.
     * 
     * @param onClickListener The listener to wrap.
     * @return the wrapped listener.
     */
    public static OnClickListener wrap(final OnClickListener onClickListener) {
        return new OnSingleClickListener() {
            @Override
            public void onSingleClick(View v) {
                onClickListener.onClick(v);
            }
        };
    }
}

Answer 5

UPDATE: This library is not recommended any more. I prefer Nikita's solution. Use RxBinding instead.

You can use this project: https://github.com/fengdai/clickguard to resolve this problem with a single statement:

ClickGuard.guard(button);

Answer 6

Here's a simple example:

public abstract class SingleClickListener implements View.OnClickListener {
    private static final long THRESHOLD_MILLIS = 1000L;
    private long lastClickMillis;

    @Override public void onClick(View v) {
        long now = SystemClock.elapsedRealtime();
        if (now - lastClickMillis > THRESHOLD_MILLIS) {
            onClicked(v);
        }
        lastClickMillis = now;
    }

    public abstract void onClicked(View v);
}

Answer 7

Just a quick update on GreyBeardedGeek solution. Change if clause and add Math.abs function. Set it like this:

  if(previousClickTimestamp == null || (Math.abs(currentTimestamp - previousClickTimestamp.longValue()) > minimumInterval)) {
        onDebouncedClick(clickedView);
    }

The user can change the time on Android device and put it in past, so without this it could lead to bug.

PS: don't have enough points to comment on your solution, so I just put another answer.

Answer 8

Here's something that will work with any event, not just clicks. It will also deliver the last event even if it's part of a series of rapid events (like rx debounce).

class Debouncer(timeout: Long, unit: TimeUnit, fn: () -> Unit) {

    private val timeoutMillis = unit.toMillis(timeout)

    private var lastSpamMillis = 0L

    private val handler = Handler()

    private val runnable = Runnable {
        fn()
    }

    fun spam() {
        if (SystemClock.uptimeMillis() - lastSpamMillis < timeoutMillis) {
            handler.removeCallbacks(runnable)
        }
        handler.postDelayed(runnable, timeoutMillis)
        lastSpamMillis = SystemClock.uptimeMillis()
    }
}


// example
view.addOnClickListener.setOnClickListener(object: View.OnClickListener {
    val debouncer = Debouncer(1, TimeUnit.SECONDS, {
        showSomething()
    })

    override fun onClick(v: View?) {
        debouncer.spam()
    }
})

1) Construct Debouncer in a field of the listener but outside of the callback function, configured with timeout and the callback fn that you want to throttle.

2) Call your Debouncer's spam method in the listener's callback function.

Answer 9

So, this answer is provided by ButterKnife library.

package butterknife.internal;

import android.view.View;

/**
 * A {@linkplain View.OnClickListener click listener} that debounces multiple clicks posted in the
 * same frame. A click on one button disables all buttons for that frame.
 */
public abstract class DebouncingOnClickListener implements View.OnClickListener {
  static boolean enabled = true;

  private static final Runnable ENABLE_AGAIN = () -> enabled = true;

  @Override public final void onClick(View v) {
    if (enabled) {
      enabled = false;
      v.post(ENABLE_AGAIN);
      doClick(v);
    }
  }

  public abstract void doClick(View v);
}

This method handles clicks only after previous click has been handled and note that it avoids multiple clicks in a frame.

Answer 10

Similar Solution using RxJava

import android.view.View;

import java.util.concurrent.TimeUnit;

import rx.android.schedulers.AndroidSchedulers;
import rx.functions.Action1;
import rx.subjects.PublishSubject;

public abstract class SingleClickListener implements View.OnClickListener {
    private static final long THRESHOLD_MILLIS = 600L;
    private final PublishSubject<View> viewPublishSubject = PublishSubject.<View>create();

    public SingleClickListener() {
        viewPublishSubject.throttleFirst(THRESHOLD_MILLIS, TimeUnit.MILLISECONDS)
                .observeOn(AndroidSchedulers.mainThread())
                .subscribe(new Action1<View>() {
                    @Override
                    public void call(View view) {
                        onClicked(view);
                    }
                });
    }

    @Override
    public void onClick(View v) {
        viewPublishSubject.onNext(v);
    }

    public abstract void onClicked(View v);
}

Answer 11

A Handler based throttler from Signal App.

import android.os.Handler;
import android.support.annotation.NonNull;

/**
 * A class that will throttle the number of runnables executed to be at most once every specified
 * interval.
 *
 * Useful for performing actions in response to rapid user input where you want to take action on
 * the initial input but prevent follow-up spam.
 *
 * This is different from a Debouncer in that it will run the first runnable immediately
 * instead of waiting for input to die down.
 *
 * See http://rxmarbles.com/#throttle
 */
public final class Throttler {

    private static final int WHAT = 8675309;

    private final Handler handler;
    private final long    thresholdMs;

    /**
     * @param thresholdMs Only one runnable will be executed via {@link #publish} every
     *                  {@code thresholdMs} milliseconds.
     */
    public Throttler(long thresholdMs) {
        this.handler     = new Handler();
        this.thresholdMs = thresholdMs;
    }

    public void publish(@NonNull Runnable runnable) {
        if (handler.hasMessages(WHAT)) {
            return;
        }

        runnable.run();
        handler.sendMessageDelayed(handler.obtainMessage(WHAT), thresholdMs);
    }

    public void clear() {
        handler.removeCallbacksAndMessages(null);
    }
}

Example usage:

throttler.publish(() -> Log.d("TAG", "Example"));

Example usage in an OnClickListener:

view.setOnClickListener(v -> throttler.publish(() -> Log.d("TAG", "Example")));

Example Kt usage:

view.setOnClickListener {
    throttler.publish {
        Log.d("TAG", "Example")
    }
}

Or with an extension:

fun View.setThrottledOnClickListener(throttler: Throttler, function: () -> Unit) {
    throttler.publish(function)
}

Then example usage:

view.setThrottledOnClickListener(throttler) {
    Log.d("TAG", "Example")
}

Answer 12

You can use Rxbinding3 for that purpose. Just add this dependency in build.gradle

build.gradle

implementation 'com.jakewharton.rxbinding3:rxbinding:3.1.0'

Then in your activity or fragment, use the bellow code

your_button.clicks().throttleFirst(10000, TimeUnit.MILLISECONDS).subscribe {
    // your action
}

Answer 13

I use this class together with databinding. Works great.

/**
 * This class will prevent multiple clicks being dispatched.
 */
class OneClickListener(private val onClickListener: View.OnClickListener) : View.OnClickListener {
    private var lastTime: Long = 0

    override fun onClick(v: View?) {
        val current = System.currentTimeMillis()
        if ((current - lastTime) > 500) {
            onClickListener.onClick(v)
            lastTime = current
        }
    }

    companion object {
        @JvmStatic @BindingAdapter("oneClick")
        fun setOnClickListener(theze: View, f: View.OnClickListener?) {
            when (f) {
                null -> theze.setOnClickListener(null)
                else -> theze.setOnClickListener(OneClickListener(f))
            }
        }
    }
}

And my layout looks like this

<TextView
        app:layout_constraintTop_toBottomOf="@id/bla"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:gravity="center"
        android:textSize="18sp"
        app:oneClick="@{viewModel::myHandler}" />

Answer 14

More significant way to handle this scenario is using Throttling operator (Throttle First) with RxJava2. Steps to achieve this in Kotlin :

1). Dependencies :- Add rxjava2 dependency in build.gradle app level file.

implementation 'io.reactivex.rxjava2:rxandroid:2.1.1'
implementation 'io.reactivex.rxjava2:rxjava:2.2.10'

2). Construct an abstract class that implements View.OnClickListener & contains throttle first operator to handle the view’s OnClick() method. Code snippet is as:

import android.util.Log
import android.view.View
import io.reactivex.android.schedulers.AndroidSchedulers
import io.reactivex.subjects.PublishSubject
import java.util.concurrent.TimeUnit

abstract class SingleClickListener : View.OnClickListener {
   private val publishSubject: PublishSubject<View> = PublishSubject.create()
   private val THRESHOLD_MILLIS: Long = 600L

   abstract fun onClicked(v: View)

   override fun onClick(p0: View?) {
       if (p0 != null) {
           Log.d("Tag", "Clicked occurred")
           publishSubject.onNext(p0)
       }
   }

   init {
       publishSubject.throttleFirst(THRESHOLD_MILLIS, TimeUnit.MILLISECONDS)
               .observeOn(AndroidSchedulers.mainThread())
               .subscribe { v -> onClicked(v) }
   }
}

3). Implement this SingleClickListener class on the click of view in activity. This can be achieved as :

override fun onCreate(savedInstanceState: Bundle?)  {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val singleClickListener = object : SingleClickListener(){
      override fun onClicked(v: View) {
       // operation on click of xm_view_id
      }
  }
xm_viewl_id.setOnClickListener(singleClickListener)
}

Implementing these above steps into the app can simply avoid the multiple clicks on a view till 600mS. Happy coding!

Answer 15

in Kotlin, we can use this extension

fun View.setOnSingleClickListener(action: (v: View) -> Unit) {
    setOnClickListener { v ->
        isClickable = false
        action(v)
        postDelayed({ isClickable = true }, 700)
    }
}

Answer 16

This is solved like this

Observable<Object> tapEventEmitter = _rxBus.toObserverable().share();
Observable<Object> debouncedEventEmitter = tapEventEmitter.debounce(1, TimeUnit.SECONDS);
Observable<List<Object>> debouncedBufferEmitter = tapEventEmitter.buffer(debouncedEventEmitter);

debouncedBufferEmitter.buffer(debouncedEventEmitter)
    .observeOn(AndroidSchedulers.mainThread())
    .subscribe(new Action1<List<Object>>() {
      @Override
      public void call(List<Object> taps) {
        _showTapCount(taps.size());
      }
    });

Answer 17

Here is a pretty simple solution, which can be used with lambdas:

view.setOnClickListener(new DebounceClickListener(v -> this::doSomething));

Here is the copy/paste ready snippet:

public class DebounceClickListener implements View.OnClickListener {

    private static final long DEBOUNCE_INTERVAL_DEFAULT = 500;
    private long debounceInterval;
    private long lastClickTime;
    private View.OnClickListener clickListener;

    public DebounceClickListener(final View.OnClickListener clickListener) {
        this(clickListener, DEBOUNCE_INTERVAL_DEFAULT);
    }

    public DebounceClickListener(final View.OnClickListener clickListener, final long debounceInterval) {
        this.clickListener = clickListener;
        this.debounceInterval = debounceInterval;
    }

    @Override
    public void onClick(final View v) {
        if ((SystemClock.elapsedRealtime() - lastClickTime) < debounceInterval) {
            return;
        }
        lastClickTime = SystemClock.elapsedRealtime();
        clickListener.onClick(v);
    }
}

Enjoy!

Answer 18

Based on @GreyBeardedGeek answer,

• Create debounceClick_last_Timestamp on ids.xml to tag previous click timestamp.

• Add This block of code into BaseActivity

  protected void debounceClick(View clickedView, DebouncedClick callback){
      debounceClick(clickedView,1000,callback);
  }
  
  protected void debounceClick(View clickedView,long minimumInterval, DebouncedClick callback){
      Long previousClickTimestamp = (Long) clickedView.getTag(R.id.debounceClick_last_Timestamp);
      long currentTimestamp = SystemClock.uptimeMillis();
      clickedView.setTag(R.id.debounceClick_last_Timestamp, currentTimestamp);
      if(previousClickTimestamp == null 
            || Math.abs(currentTimestamp - previousClickTimestamp) > minimumInterval) {
          callback.onClick(clickedView);
      }
  }
  
  public interface DebouncedClick{
      void onClick(View view);
  }
  

• Usage:

  view.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
          debounceClick(v, 3000, new DebouncedClick() {
              @Override
              public void onClick(View view) {
                  doStuff(view); // Put your's click logic on doStuff function
              }
          });
      }
  });
  

• Using lambda

  view.setOnClickListener(v -> debounceClick(v, 3000, this::doStuff));
  

Answer 19

Put a little example here

view.safeClick { doSomething() }

---

@SuppressLint("CheckResult")
fun View.safeClick(invoke: () -> Unit) {
    RxView
        .clicks(this)
        .throttleFirst(300, TimeUnit.MILLISECONDS)
        .subscribe { invoke() }
}

Answer 20

My solution, need to call removeall when we exit (destroy) from the fragment and activity:

import android.os.Handler
import android.os.Looper
import java.util.concurrent.TimeUnit

    //single click handler
    object ClickHandler {

        //used to post messages and runnable objects
        private val mHandler = Handler(Looper.getMainLooper())

        //default delay is 250 millis
        @Synchronized
        fun handle(runnable: Runnable, delay: Long = TimeUnit.MILLISECONDS.toMillis(250)) {
            removeAll()//remove all before placing event so that only one event will execute at a time
            mHandler.postDelayed(runnable, delay)
        }

        @Synchronized
        fun removeAll() {
            mHandler.removeCallbacksAndMessages(null)
        }
    }

Answer 21

I would say the easiest way is to use a "loading" library like KProgressHUD.

https://github.com/Kaopiz/KProgressHUD

The first thing at the onClick method would be to call the loading animation which instantly blocks all UI until the dev decides to free it.

So you would have this for the onClick action (this uses Butterknife but it obviously works with any kind of approach):

Also, don't forget to disable the button after the click.

@OnClick(R.id.button)
void didClickOnButton() {
    startHUDSpinner();
    button.setEnabled(false);
    doAction();
}

Then:

public void startHUDSpinner() {
    stopHUDSpinner();
    currentHUDSpinner = KProgressHUD.create(this)
            .setStyle(KProgressHUD.Style.SPIN_INDETERMINATE)
            .setLabel(getString(R.string.loading_message_text))
            .setCancellable(false)
            .setAnimationSpeed(3)
            .setDimAmount(0.5f)
            .show();
}

public void stopHUDSpinner() {
    if (currentHUDSpinner != null && currentHUDSpinner.isShowing()) {
        currentHUDSpinner.dismiss();
    }
    currentHUDSpinner = null;
}

And you can use the stopHUDSpinner method in the doAction() method if you so desire:

private void doAction(){ 
   // some action
   stopHUDSpinner()
}

Re-enable the button according to your app logic: button.setEnabled(true);

Answer 22

in case anyone is looking for a solution in jetpack compose

class OnThrottledClickHandler(
    private val minClickInterval: Long = DEFAULT_CLICK_INTERVAL,
    private val onClick: () -> Unit,
) {
    private var lastClickTime: Long = 0

    fun processClick() {
        val currentClickTime: Long = System.currentTimeMillis()
        val elapsedTime = currentClickTime - lastClickTime
        lastClickTime = currentClickTime
        if (elapsedTime > minClickInterval) {
            onClick.invoke()
        }
    }

    companion object {
        const val DEFAULT_CLICK_INTERVAL: Long = 600
    }
}

@Composable
fun throttledClickListener(delay: Long = 600L, onClick: () -> Unit): ReadOnlyProperty<Any?, () -> Unit> =
    object : ReadOnlyProperty<Any?, () -> Unit> {
        val onThrottledClickHandler = remember { OnThrottledClickHandler(delay, onClick) }
        override fun getValue(thisRef: Any?, property: KProperty<*>): () -> Unit = onThrottledClickHandler::processClick
    }

how to use:

val onThrottledClick by throttledClickListener(delay = 1200L) {
                onSubmitButtonClicked.invoke()
            }
Button(onClick = onThrottledClick) // pass to your component

Answer 23

// A modern way to debounce multiple rapid clicks using coroutines

// 1) Create a kotlin util class or file to hold your debounce logic

private var debounceJob: Job? = null

fun debounce(
    scope: CoroutineScope,
    debounceFunction: () -> Unit,
    delayMs: Long = 200L
) {
    
        if (debounceJob == null) {
            debounceJob = scope.launch(Dispatchers.Main) {
                try {
                    debounceFunction()
                    delay(delayMs)
                    debounceJob?.cancel()
                    debounceJob = null
                } catch (e: Exception) {
                    Log.e("YourClass", "Caught $e while trying to debounce")
                }
            }
        }
    }
    

// 2. To use it for your view
findViewById<View>(R.id.yourView)?.setOnClickListener {
            debounce(GlobalScope, { showScoreDetails(scoreInfo) }, BOTTOM_SHEET_DEBOUNCE_MILLIS)
        }

Answer 24

You don't have to create a separate Interface or Class for this use case. You can achieve the same by adding this Extension function on the View class.

This function is going to throttle the click event when spammed within 500ms.

fun View.setOnThrottledClickListener(clickListener: View.OnClickListener) {

    var lastClickTime: Long = 0

    setOnClickListener {
        val clickedTime = System.currentTimeMillis()
        if (clickedTime - lastClickTime < 500L) { // 500 ms
            return@setOnClickListener
        }
        clickListener.onClick(it)
        lastClickTime = clickedTime
    }
}

And use it like this

actionButton.setOnThrottledClickListener {
    // Doing some action here
}