Android - Circular Reveal doesn't fill the entire space

Question

In my Android app I'm using a CircularReveal to show a previously invisible grey RelativeLayout, which takes up the entire screen, when a button is clicked. The problem is that the button is placed on the right-bottom corner, and the animation, starting from there, only smoothly reveals a small part of the RelativeLayout. The rest becomes visible without any animation.

My code is as follows:

layout/activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:fab="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <RelativeLayout android:id="@+id/cover_rl"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/fab_material_blue_grey_500"
        android:alpha="0.7"
        android:elevation="2dp"
        android:layout_below="@id/tool_bar"
        android:visibility="invisible" />

    <com.software.shell.fab.ActionButton
        android:id="@+id/fab_speeddial_action1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:stateListAnimator="@drawable/fab_animator"
        android:layout_gravity="center_vertical"
        android:elevation="6dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="24dp"
        android:layout_marginBottom="24dp"
        android:layout_above="@id/fab_speeddial_action2"
        fab:type="MINI"
        fab:button_color="@color/colorAccent"
        fab:button_colorPressed="@color/fab_color_pressed"
        fab:image="@drawable/ic_done_24px"
        fab:shadow_color="#BF360C"
        fab:shadow_radius="1.0dp"
        fab:shadow_xOffset="0.5dp"
        fab:shadow_yOffset="1.0dp"
        fab:show_animation="@anim/fab_roll_from_down" />

</RelativeLayout>

MainActivity.java

    public class MainActivity extends AppCompatActivity {
        private boolean wasFABPressed;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            RelativeLayout coverRl = (RelativeLayout) findViewById(R.id.cover_rl);
            ActionButton actionButton = (ActionButton) findViewById(R.id.fab_speeddial_action1);

            actionButton.setOnClickListener(new View.OnClickListener() {
    if(wasFABPressed) {
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //El centro de la animación de revelar es el botón
            float x = actionButton.getX();
            float y = actionButton.getY();

            int cx = (int) (x + (x + actionButton.getWidth())) / 2;
            int cy = (int) (y + (y - actionButton.getHeight())) / 2;

            int finalRadius = Math.max(coverRl.getWidth(), coverRl.getHeight()) / 2;

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

            anim.addListener(new AnimatorListenerAdapter() {
                @Override
                public void onAnimationEnd(Animator animation) {
                    super.onAnimationEnd(animation);
                    coverRl.setVisibility(View.INVISIBLE);
                }
            });
            anim.start();
        }
    }else{
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            //El centro de la animación de revelar es el botón
            float x = actionButton.getX();
            float y = actionButton.getY();

            int cx = (int) (x + (x + actionButton.getWidth())) / 2;
            int cy = (int) (y + (y - actionButton.getHeight())) / 2;

            int finalRadius = Math.max(coverRl.getWidth(), coverRl.getHeight()) / 2;

            Animator anim = ViewAnimationUtils.createCircularReveal(coverRl, cx, cy, 0, finalRadius);
            anim.setInterpolator(new AccelerateDecelerateInterpolator());
            coverRl.setVisibility(View.VISIBLE);
            anim.start();
        }
    }

    wasFABPressed = !wasFABPressed;
});

Answer 1

RevealAnimator Kotlin ext -

fun View.circularReveal() {
    clearAnimation()
    val cx: Int = width / 2
    val cy: Int = height / 2
    val finalRadius: Int =
        width.coerceAtLeast(height)
    val anim: Animator = ViewAnimationUtils.createCircularReveal(
        this,
        cx,
        cy,
        0f,
        finalRadius.toFloat()
    )
    anim.interpolator = AccelerateDecelerateInterpolator()
    anim.duration = 400
    isVisible = true
    anim.start()
    anim.doOnEnd {
        isVisible = false
    }
}

Answer 2

You are using :

int finalRadius = Math.max(coverRl.getWidth(), coverRl.getHeight()) / 2;

This is basically the half of the radius of the final view you wanna show. So the circular reveal will work for half of the view and then the other half of the view will just appear without any animation. So you need to use this :

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

For the finalRadius. When you are using circular reveal from the center of the view then only you need to devide it by 2. You can also use :

int finalRadius = Math.hypot(coverRl.getWidth(), coverRl.getHeight());

As if the button is in the rightmost corner. Math.hypot returns hypotenuse .