Android: specify circular reveal animation starting position?

Question

I currently have a circular reveal animation that starts from the very right of the toolbar. I want the initial circle center to start from the "search" icon which had me struggle to find an answer. I tried altering the cx and xy values and am unsuccessful. Any help is appreciated.

final Toolbar search_bar = (Toolbar) findViewById(R.id.search_toolbar);

                if (android.os.Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
                    int cx = search_bar.getWidth();
                    int cy = search_bar.getHeight()/2;

                    float finalRadius = (float) Math.hypot(cx, cy);

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

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

Answer 1

try this :

public void startCircularReveal() {
    final View view = findViewById(R.id.linearLayout);
    final View startView = findViewById(R.id.button_container);
    int cx = (startView.getLeft() + startView.getRight()) / 2;
    int cy = (startView.getTop() + startView.getBottom()) / 2;
    view.setBackgroundColor(Color.parseColor("#6FA6FF"));
    int finalRadius = Math.max(cy , view.getHeight() - cy);
    Animator anim = ViewAnimationUtils.createCircularReveal(view, cx, cy, 0, finalRadius);
    anim.addListener(new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {

        }

        @Override
        public void onAnimationEnd(Animator animation) {

        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    });
    anim.setDuration(200);
    view.setVisibility(View.VISIBLE);
    anim.start();
}

Change the view to the view that you want to do reveal on top of it ( usually root view ), and startView to your "search" icon view, and onAnimationEnd do whatever you want after the reveal is finished.

UPDATE

If the reveal is not on top of your views, there is a little trick to fix it by adding this view to the bottom of your layout

            <LinearLayout
                android:id="@+id/linearLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/custom_theme_color"
                android:orientation="vertical"
                android:visibility="invisible">
            </LinearLayout>

make sure that the view "view" set to the id of that layout

final View view = findViewById(R.id.linearLayout);

Basically what I did is adding a LinearLayout and set its width and height to match match_parent, so this view is on top of everything and this view is where the reveal will be on top of, and to make sure that view doesn't effect your layout I set visibility to invisible, and set it to visible right at the beginning of the reveal:

view.setVisibility(View.VISIBLE);

I hope it helps.

Answer 2

revealView(listview, RssFragment.this.ll);

public  void revealView(View toBeRevealed, View frame)
{
    if (!ViewCompat.isAttachedToWindow(toBeRevealed))
    {
        return;
    }
    if (VERSION.SDK_INT >= 21)
    {
        Animator anim = ViewAnimationUtils.createCircularReveal(toBeRevealed, (frame.getLeft() + frame.getRight()) / 2, (frame.getTop() + frame.getBottom()) / 2, 0.0f, (float) Math.max(frame.getWidth(), frame.getHeight()));
        toBeRevealed.setVisibility(View.VISIBLE);
        anim.start();
        return;
    }
    toBeRevealed.setVisibility(View.VISIBLE);
}

Answer 3

You can try this:

enter i
nt cx = search_bar.getRight() * 5 / 6;
int cy = (search_bar.getTop() + search_bar.getBottom()) / 2;