title: How to slowly fill background colour of a circle from the center with Animation in Android
body: <p>I am trying to slowly fill a circle's background starting from the center in Android</p>
  
  <p>Below is an example snippet that I found  <a href="https://stackoverflow.com/questions/40163007/fill-circle-shaped-div-from-center-with-color-on-click">here</a>, I am trying to do the exact same thing like the snippet below but in Android not on a web. I tried to google it but I only get results such as using TransitionDrawable to change from colors to colors which is not what I wanted</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('div').click(function() {
    $(this).toggleClass('selected');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.button {
    height: 27px;
    width: 27px;
    border-radius: 50%;
    background: green;
  }
  
  div.button:after {
    content: '';                 /* needed for rendering */
    position: relative;          
    display: block;              /* so we can set width and height */
    border-radius: 50%;
    height: 0%;
    width: 0%;
    margin: auto;                /* center horizontally */
    background: red;
    top: 50%;                    /* center vertically */
    transform: translateY(-50%); /* center vertically */
    transition: 1s;
  }
  
  div.button.selected:after {
    height: 100%;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="button"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>