title: How do I keep a ripple effect within a view's bounds in a selector?
body: <p>I am trying to figure out why my ripple effect is not conforming to the shape I have placed it in. Below is the code I am using:</p>
  
  <p>This is the multi-purpose button that I am setting to the background of the ImageViews</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  
      &lt;!-- Enabled, Not Clicked --&gt;
      &lt;item
          android:state_enabled="true"
          android:state_pressed="false"
          android:drawable="@drawable/some_drawable_1"
          android:color="@color/Black"
          /&gt;
  
      &lt;!-- Not Enabled, Not Clicked --&gt;
      &lt;item
          android:state_enabled="false"
          android:state_pressed="false"
          android:drawable="@drawable/some_drawable_1"
          android:color="@color/LightGrey"
          /&gt;
  
      &lt;!-- Not Enabled, Clicked --&gt;
      &lt;item
          android:state_enabled="false"
          android:state_pressed="true"
          android:drawable="@drawable/some_drawable_1"
          android:color="@color/LightGrey"
          /&gt;
  
      &lt;!-- Enabled, Clicked --&gt;
      &lt;item
          android:state_enabled="true"
          android:state_pressed="true"
          android:drawable="@drawable/the_drawable_I_am_working_on"
          android:color="@color/White"
          /&gt;
  &lt;/selector&gt;
  </code></pre>
  
  <p>And this is the drawable I am working on:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt;
  &lt;!-- Ripple 1 --&gt;
      &lt;!-- Button --&gt;
      &lt;item&gt;
          &lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
              android:shape="rectangle"&gt;
              &lt;solid
                  android:color="@color/colorPrimary" /&gt;
              &lt;stroke
                  android:width="1dp"
                  android:color="@color/black" /&gt;
              &lt;corners
                  android:bottomLeftRadius="8dp"
                  android:bottomRightRadius="8dp"
                  android:topLeftRadius="8dp"
                  android:topRightRadius="8dp" /&gt;
  
          &lt;/shape&gt;
      &lt;/item&gt;
      &lt;!-- Ripple --&gt;
      &lt;item&gt;
          &lt;ripple xmlns:android="http://schemas.android.com/apk/res/android"
              android:color="@color/colorPrimaryDarkest" /&gt;
      &lt;/item&gt;
  &lt;/layer-list&gt;
  </code></pre>
  
  <p>This code above produces this effect:</p>
  
  <p><a href="https://i.stack.imgur.com/KbWSX.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KbWSX.gif" alt="enter image description here"></a></p>
  
  <p>As you can see, it does two weird things, first, it does not stay within the boundaries of the button when the ripple completes (it ignores the rounded corners, this is the key to what I am trying to fix), and second, the first click never works right for some reason.</p>
  
  <p>After reading up on it, the second attempt came from this link, <a href="https://stackoverflow.com/questions/26686250/material-effect-on-button-with-background-color">Material effect on button with background color</a>, where I changed the drawable to:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Ripple 2 --&gt;
  &lt;ripple xmlns:android="http://schemas.android.com/apk/res/android"
          android:color="@color/colorPrimaryDarkest"&gt;
      &lt;item&gt;
          &lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
              android:shape="rectangle"&gt;
              &lt;solid
                  android:color="@color/colorPrimary" /&gt;
              &lt;stroke
                  android:width="1dp"
                  android:color="@color/black" /&gt;
              &lt;corners
                  android:bottomLeftRadius="8dp"
                  android:bottomRightRadius="8dp"
                  android:topLeftRadius="8dp"
                  android:topRightRadius="8dp" /&gt;
  
          &lt;/shape&gt;
      &lt;/item&gt;
  &lt;/ripple&gt;
  </code></pre>
  
  <p>This code above produces this effect:</p>
  
  <p><a href="https://i.stack.imgur.com/9X5br.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9X5br.gif" alt="enter image description here"></a></p>
  
  <p>As you can see in this version, although it has fixed the issue where it is now within the bounds, it no longer maintains the ripple effect; it mearly slowly converts the background color to the second color rather than producing an actual ripple effect. </p>
  
  <p>Also, just to be clear here, I did also try moving the shape into its own drawable file (named testing2) and then referencing it like this:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;ripple xmlns:android="http://schemas.android.com/apk/res/android"
      android:color="@color/colorPrimaryDarkest"&gt;
      &lt;item android:drawable="@drawable/testing2"/&gt;
  &lt;/ripple&gt;
  </code></pre>
  
  <p>and it does the same thing.</p>
  
  <p>Lastly, I have tried using the mask with this code:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!-- Ripple 2 --&gt;
  &lt;ripple
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:color="@color/colorPrimaryDarkest"&gt;
      &lt;item
          android:id="@android:id/mask"
          android:drawable="@drawable/testing2" /&gt;
  &lt;/ripple&gt;
  </code></pre>
  
  <p>And the result is not at all what is desired as can be seen in this image:</p>
  
  <p><a href="https://i.stack.imgur.com/1zlHI.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1zlHI.gif" alt="enter image description here"></a></p>
  
  <p>It not only is not a ripple effect, it is a totally different color now (likely a blend of the two)</p>
  
  <p>I have also tried the tips on the following other StackOverflow questions:</p>
  
  <p>1) <a href="https://stackoverflow.com/questions/42483072/how-to-add-a-ripple-effect-on-a-layout-with-rounded-corners">How to add a ripple effect on a layout with rounded corners?</a></p>
  
  <p>2) <a href="https://stackoverflow.com/questions/27006288/how-to-create-ripple-effect-in-simple-layout">How to create ripple effect in simple layout</a></p>
  
  <p>3) <a href="https://stackoverflow.com/questions/9884202/custom-circle-button/9884428">Custom circle button</a></p>
  
  <p>My question is, <strong>what am I missing in order to make a ripple drawable just like the first image, but one that works within the bounds of the shape?</strong></p>
  
  <p>Thanks all.</p>