title: How to change button background with circular reveal animation?
body: <p>I have just explored Vectors for myself, and want now following example animation for a button:
  <img src="https://i.stack.imgur.com/khWpV.gif" alt="1]"></p>
  
  <p>The circles and the tick have a slight easeInOut and the tick becomes a little bigger before moving in his final position.</p>
  
  <p>I have made this animation in after effects and found a really cool tool to export this right into Android as a json file:
  <a href="https://github.com/airbnb/lottie-android" rel="nofollow noreferrer">https://github.com/airbnb/lottie-android</a></p>
  
  <p>But this method will use another plugin in my app, those animation would take up more space than a Vector Drawable would use and a Vector is much more scale-able than the imported animation I think?</p>
  
  <p>So is it possible to do such an animation with vector Drawables? Or am I going fine with the lottie plugin..?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>So I've come up with the following, not very satisfying solution:</p>
  
  <p><a href="https://www.youtube.com/watch?v=DER5OA2S9og" rel="nofollow noreferrer">YouTube Screen Recording</a></p>
  
  <p>I've made it with pngs but it's also adaptable to vectors, but it's really really tinkered. The code:</p>
  
  <p>java:</p>
  
  <pre><code>public class TestActivity extends AppCompatActivity {
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_test);
  
  //The light-green transition between the 2 buttons:
  
      final Button imageView = (Button) findViewById(R.id.imageView); 
  //ImageView won't get over a button in the XML
  
  
  //The green button with tick:
  
      final Button button_ok = (Button) findViewById(R.id.button_ok);
  
  //The yellow button:
  
      final Button button = (Button) findViewById(R.id.button);
  
  
      button.setOnTouchListener(new View.OnTouchListener() {
          @Override
          public boolean onTouch(View view, MotionEvent motionEvent) {
  
              show(button_ok, imageView,button, motionEvent);
              return false;
          }
      });
      button_ok.setOnTouchListener(new View.OnTouchListener() {
          @Override
          public boolean onTouch(View view, MotionEvent motionEvent) {
  
              show(button, null,button_ok, motionEvent);
              return false;
          }
      });
  
  
  }
  
  // To reveal a previously invisible view using this effect:
  private void show(final View view, final View circle, final View tobegone, final MotionEvent me) {
  
      final Button imageView = (Button) findViewById(R.id.imageView);
  
      if (circle==null){
  
  
          // get the final radius for the clipping circle
          int finalRadius = Math.max(view.getWidth(), view.getHeight());
  
          // create the animator for this view (the start radius is zero)
          Animator anim = ViewAnimationUtils.createCircularReveal(view, (int) me.getX(), (int) me.getY(),
                  0, finalRadius);
          anim.setDuration(100);
          anim.setInterpolator(new FastOutSlowInInterpolator());
  
          // make the view invisible when the animation is done
          anim.addListener(new AnimatorListenerAdapter() {
              @Override
              public void onAnimationEnd(Animator animation) {
                  super.onAnimationEnd(animation);
                  imageView.setVisibility(View.INVISIBLE);
                  tobegone.setVisibility(View.INVISIBLE);
              }
          });
  
          // make the view visible and start the animation
          view.setVisibility(View.VISIBLE);
          anim.start();
  
          return;
      }
  
  
      // get the final radius for the clipping circle
      int finalRadiusCircle = Math.max(view.getWidth(), view.getHeight());
  
      // create the animator for this view (the start radius is zero)
      Animator animcircle = ViewAnimationUtils.createCircularReveal(circle, (int) me.getX(), (int) me.getY(),
              0, finalRadiusCircle);
      animcircle.setDuration(500);
      animcircle.setInterpolator(new FastOutSlowInInterpolator());
  
      // make the view visible and start the animation
      circle.setVisibility(View.VISIBLE);
      animcircle.start();
  
  
  
      // get the final radius for the clipping circle
      int finalRadius = Math.max(view.getWidth(), view.getHeight());
  
      // create the animator for this view (the start radius is zero)
      Animator anim = ViewAnimationUtils.createCircularReveal(view, (int) me.getX(), (int) me.getY(),
              0, finalRadius);
      anim.setDuration(1000);
      anim.setInterpolator(new FastOutSlowInInterpolator());
  
      // make the view invisible when the animation is done
      anim.addListener(new AnimatorListenerAdapter() {
          @Override
          public void onAnimationEnd(Animator animation) {
              super.onAnimationEnd(animation);
              tobegone.setVisibility(View.INVISIBLE);
          }
      });
  
      // make the view visible and start the animation
      view.setVisibility(View.VISIBLE);
      anim.start();
  
  
  
      Handler handler = new Handler();
  
      final Runnable r = new Runnable() {
          public void run() {
  
  
          }
      };
  
      handler.postDelayed(r, 200);
  
  }
  }
  </code></pre>
  
  <p>XML:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#39000000"
  tools:layout_editor_absoluteY="81dp"
  tools:layout_editor_absoluteX="0dp"&gt;
  
  &lt;Button
      android:id="@+id/button"
      android:layout_width="300dp"
      android:layout_height="75dp"
      android:background="@mipmap/add_button_v2"
      tools:layout_editor_absoluteX="42dp"
      tools:layout_editor_absoluteY="420dp" /&gt;
  
  &lt;Button
      android:id="@+id/imageView"
      android:layout_width="300dp"
      android:layout_height="75dp"
      android:background="@mipmap/add_button_v2"
      android:backgroundTint="#974caf50"
      android:backgroundTintMode="src_over"
      tools:layout_editor_absoluteX="42dp"
      tools:layout_editor_absoluteY="420dp" /&gt;
  
  &lt;Button
      android:id="@+id/button_ok"
      android:layout_width="300dp"
      android:layout_height="75dp"
      android:background="@mipmap/ok_button"
      tools:layout_editor_absoluteX="42dp"
      tools:layout_editor_absoluteY="420dp" /&gt;
  </code></pre>
  
  <p></p>
  
  <p>could there be a better solution? or can I roll with this?</p>