Android - Remove Background from Circular Reveal (Lollipop)

Question

I'm in the process of converting my application to the new Material Design Pattern and I've noticed a minor annoyance. When I use the Reveal Effect there is a white background behind the view before it transitions between visible and invisible.

Currently it looks like this when it animates

Start

Middle

Finish

XML

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <include layout="@layout/actionbar_visualizer" />

    <LinearLayout
        android:id="@+id/visualizerProductContainer"
        android:layout_width="280dp"
        android:layout_height="match_parent"
        android:layout_below="@id/visualizerActionBar"
        android:background="@color/black"
        android:gravity="left"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/gridHeader"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/fifty_transparent_black"
            android:gravity="center"
            android:padding="10dp"
            android:text="@string/products"
            android:textColor="@color/white" />

        <GridView
            android:id="@+id/productGrid"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:columnWidth="75dp"
            android:numColumns="auto_fit"
            android:paddingTop="10dp"
            android:stretchMode="columnWidth" />
    </LinearLayout>

    ...

</RelativeLayout>

Animation

...
mProductContainer = (LinearLayout)findViewById(R.id.visualizerProductContainer);
...

private void showHideProducts() {
    if (mProductContainer.getVisibility() == View.VISIBLE) {
        int cx = (mProductContainer.getLeft() + mProductContainer.getRight()) / 8;
        int cy = (mProductContainer.getTop() + mProductContainer.getBottom()) / 8;

        int initialRadius = mProductContainer.getWidth();

        Animator anim = ViewAnimationUtils.createCircularReveal(mProductContainer, cx, cy, initialRadius, 0);

        anim.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mProductContainer.setVisibility(View.GONE);
            }
        });

        anim.start();
    } else {
        int cx = (mProductContainer.getLeft() + mProductContainer.getRight()) / 8;
        int cy = (mProductContainer.getTop() + mProductContainer.getBottom()) / 8;

        int finalRadius = Math.max(mProductContainer.getWidth(), mProductContainer.getHeight());

        Animator anim = ViewAnimationUtils.createCircularReveal(mProductContainer, cx, cy, 0, finalRadius);

        mProductContainer.setVisibility(View.VISIBLE);
        anim.start();
    }
}

So does anyone know a way of removing the background/making it transparent between animations?

Answer 1

ViewAnimationUtils.createCircularReveal works by clipping the given View during the animation. As your black background is part of your view, it is also being clipped. Instead, your black background should either be set on your Activity's theme (via android:background) or on a View that encapsulates the view you are animating (such as your RelativeLayout).