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 {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    Probe.deploy(this, new RevealInterceptor(this),
        new Filter.ParentId(R.id.ripple_main));
    // can also use RippleInterceptor instead
    super.onCreate(savedInstanceState);
    setContentView(R.layout.ripples);
  }
}

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ripple_main"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View android:id="@+id/button"
        android:layout_width="128dp"
        android:layout_height="128dp"
        android:background="#aa00aaff"
        android:layout_gravity="center" />

    <View android:layout_gravity="bottom"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="#aaff" />

</FrameLayout>

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!)