Search code examples
javaandroidandroid-animationcircularreveal

Changing the color of the circular reveal animation


I added circular reveal animation to my fab button but instead of changing the fragment color to different color, I want to change the color of the animation because I want my next fragment to be a white background. I tried to change the fragment color to different than white and changing back to white again but it did not work. So is there a way to change the color of the animation, not the fragment? Here is some of my code:

@Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        final View rootView = inflater.inflate(R.layout.fragment_note_add, container, false);


        rootView.addOnLayoutChangeListener(new View.OnLayoutChangeListener(){
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom){
                rootView.removeOnLayoutChangeListener(this);
                rootView.setBackgroundColor(getArguments().getInt("color"));
                int cx = getArguments().getInt("cx");
                int cy = getArguments().getInt("cy");

                int radius = (int) Math.hypot(right, bottom);

                Animator reveal = ViewAnimationUtils.createCircularReveal(v, cx, cy, 0, radius);
                reveal.setInterpolator(new DecelerateInterpolator(2f));
                reveal.start();
            }
        });
        return rootView;
    }

Here I tried to do the background white again.

 @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        //Initialize UI Elements
        FloatingActionButton saveButton = view.findViewById(R.id.fab_add);
        saveButton.setOnClickListener(saveButtonListener);
        editText = view.findViewById(R.id.note_editor);
        view.setBackgroundColor(getResources().getColor(R.color.white));
        super.onViewCreated(view, savedInstanceState);
    }

Solution

  • There is no such thing as "animation color" in this case. Circular Reveal animation, under the hood, applies a circular clip mask to the view and animates the clipping values to visually represent a "reveal". The revealed color you see is the actual view itself.

    If I understood correct, you want a color transition on your view as the reveal is running. If this is the case, here are the steps to follow:

    • Declare a start and end color.
    • Attach an animation listener to the circular reveal animation.
    • On reveal animation update, evaluate between start and end colors using reveal animations current progress with an ARGBevaluator. Set this color value as background of the view.