title: Understanding of Android ripple animation
body: <p>I want to create an animation like  material ripple animation, so I decided to look at its source code.</p>
  <ol>
  <li><p>The enter point is :
  <code>android:background=&quot;?android:attr/selectableItemBackground&quot;&gt;</code>
  go to: <strong>Android\Sdk\platforms\android-30\data\res\values\attrs.xml</strong></p>
  <pre><code> &lt;!-- Background drawable for bordered standalone items that need focus/pressed states. --&gt;
   &lt;attr name=&quot;selectableItemBackground&quot; format=&quot;reference&quot; /&gt;
  </code></pre>
  </li>
  <li><p>Next we go into <strong>Android\Sdk\platforms\android-30\data\res\values\themes.xml</strong></p>
  </li>
  </ol>
  <pre><code>    &lt;item name=&quot;selectableItemBackground&quot;&gt;@drawable/item_background&lt;/item&gt;
  </code></pre>
  <p>Nothing special, just another drawable.</p>
  <ol start="3">
  <li>Next in: <strong>Android\Sdk\platforms\android-30\data\res\drawable\item_background.xml</strong></li>
  </ol>
  <pre><code>&lt;selector xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
  
      &lt;item android:state_window_focused=&quot;false&quot; android:drawable=&quot;@color/transparent&quot; /&gt;
  
      &lt;!-- Even though these two point to the same resource, have two states so the drawable will  invalidate itself when coming out of pressed state. --&gt;
      &lt;item android:state_focused=&quot;true&quot;  android:state_enabled=&quot;false&quot; android:state_pressed=&quot;true&quot; android:drawable=&quot;@drawable/list_selector_background_disabled&quot; /&gt;
      &lt;item android:state_focused=&quot;true&quot;  android:state_enabled=&quot;false&quot;                              android:drawable=&quot;@drawable/list_selector_background_disabled&quot; /&gt;
      &lt;item android:state_focused=&quot;true&quot;                                android:state_pressed=&quot;true&quot; android:drawable=&quot;@drawable/list_selector_background_transition&quot; /&gt;
      &lt;item android:state_focused=&quot;false&quot;                               android:state_pressed=&quot;true&quot; android:drawable=&quot;@drawable/list_selector_background_transition&quot; /&gt;
      &lt;item android:state_focused=&quot;true&quot;                                                             android:drawable=&quot;@drawable/list_selector_background_focused&quot; /&gt;
      &lt;item android:drawable=&quot;@color/transparent&quot; /&gt;
  
  &lt;/selector
  
  </code></pre>
  <ol start="4">
  <li>We are close, in this file we saw drawables of different states. Transition file at:
  <strong>Android\Sdk\platforms\android-30\data\res\drawable\list_selector_background_transition.xml</strong> is:</li>
  </ol>
  <pre><code>&lt;transition xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
      &lt;item android:drawable=&quot;@android:drawable/list_selector_background_pressed&quot;  /&gt;
      &lt;item android:drawable=&quot;@android:drawable/list_selector_background_longpress&quot;  /&gt;
  &lt;/transition&gt;
  </code></pre>
  <p>Finaly we have 4 files, in picture below
  <a href="https://i.stack.imgur.com/neH4R.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/neH4R.jpg" alt="enter image description here" /></a></p>
  <p>So the questions is:</p>
  <ol>
  <li>How this 4 squares turns into this circular ripple animation?</li>
  <li>That means this black pointers?</li>
  <li>what the orange fill and green border do ?</li>
  <li>(optional) Where is the magic part?</li>
  </ol>