ripples with probe

today, i was having a discussion with Mostafa Gazar about android animations and his Widgets library, and Lucas Rocha’s probe project came to mind.

i decided to experiment and see if i could use probe to automatically add a ripple effect to a set of views without having to touch existing code. turns out it’s fairly easy to do! i did two separate implementations.

the first image is using Markus Hi’s android-ui library. the second image is using Mostafa’s Widgets.

the code using Mostafa’s Widgets is a lot simpler (due to RippleView doing most of the heavy lifting) - you can see it here. the code for wrapping android-ui is a bit more complicated (and mimics what Mostafa does in RippleView) and can be found here.

the general idea for both probe implementations is the same - we take any given view, and replace it with a FrameLayout containing the view, and an underlying “ripple view.”

now to apply either of these methods, we can do something like this:

public class RippleActivity extends Activity {

  protected void onCreate(Bundle savedInstanceState) {
    Probe.deploy(this, new RevealInterceptor(this),
        new Filter.ParentId(;
    // can also use RippleInterceptor instead
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android=""

    <View android:id="@+id/button"
        android:layout_gravity="center" />

    <View android:layout_gravity="bottom"
        android:background="#aaff" />


one interesting point - if you remove the filter and just let probe work on any view (both interceptors enforce non-ViewGroups only), the ripple effect ends up working on all views, including views in the ActionBar as well (which is really neat!)

comments powered by Disqus