title: Ripple effect on top of Image - Android
body: <p>I've been experimenting with the ripple animation in my latest side project. I'm having some trouble finding an "elegant" solution to using it in certain situations for touch events. Namely with images, especially in list, grid, and recycle views. The animation almost always seems to animate behind the view, not the on top of it. This is a none issue in Buttons and TextViews but if you have a GridView of images, the ripple appears behind or below the actual image. Obviously this is not what I want, and while there are solutions that I consider to be a work around, I'm hoping there is something simpler i'm just unaware of. </p>
  
  <p>I use the following code to achieve a custom grid view with images. I'll give full code <a href="http://pastebin.com/0M62jder">CLICK HERE</a> so you can follow along if you choose.</p>
  
  <p>Now just the important stuff. In order to get my image to animate on touch I need this </p>
  
  <p><strong>button_ripple.xml</strong></p>
  
  <pre><code>&lt;ripple
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:color="@color/cream_background"&gt;
      &lt;item&gt;
          &lt;selector xmlns:android="http://schemas.android.com/apk/res/android"&gt;
              &lt;!-- Pressed --&gt;
              &lt;item
                  android:drawable="@color/button_selected"
                  android:state_pressed="true"/&gt;
              &lt;!-- Selected --&gt;
              &lt;item
                  android:drawable="@color/button_selected"
                  android:state_selected="true"/&gt;
              &lt;!-- Focus --&gt;
              &lt;item
                  android:drawable="@color/button_selected"
                  android:state_focused="true"/&gt;
              &lt;!-- Default --&gt;
              &lt;item android:drawable="@color/transparent"/&gt;
          &lt;/selector&gt;
      &lt;/item&gt;
  &lt;/ripple&gt;
  </code></pre>
  
  <p><strong>custom_grid.xml</strong></p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:orientation="horizontal"&gt;
  
      &lt;ImageView
          android:id="@+id/sceneGridItem"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:background="@drawable/button_ripple"
          android:gravity="center_horizontal"/&gt;
  
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p><strong>activity_main.xml</strong></p>
  
  <pre><code>&lt;GridView
      android:id="@+id/sceneGrid"
      android:layout_marginTop="15dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:verticalSpacing="15dp"
      android:numColumns="5" /&gt;
  </code></pre>
  
  <p>The line where all magic and problems occur is when I set the background. While this does in fact give me a ripple animation on my imageview, it animates <em>behind</em> the imageview. I want the animation to appear <em>on top</em> of the image. So I tried a few different things like</p>
  
  <p><strong>Setting the entire grid background to button_ripple.</strong> </p>
  
  <pre><code>&lt;GridView
      android:id="@+id/sceneGrid"
      android:layout_marginTop="15dp"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:verticalSpacing="15dp"
      android:background="@drawable/button_ripple"
      android:numColumns="5" /&gt;
  </code></pre>
  
  <p>It does exactly what you'd think, now the entire grid has a semi transparent background and no matter what image i press the entire grid animates from the center of the grid. While this is kind of cool, its not what I want. </p>
  
  <p><strong>Setting the root/parent background to button_ripple.</strong> </p>
  
  <pre><code>&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center_horizontal"
                    android:background="@drawable/button_ripple"
                    android:orientation="horizontal"&gt;
  </code></pre>
  
  <p>The area is now larger and fills the entire cell of the grid (not just the image), however it doesn't bring it to the front.</p>
  
  <p><strong>Changing custom_grid.xml to a RelativeLayout and putting two ImageViews on top of each other</strong></p>
  
  <p><strong>custom_grid.xml</strong></p>
  
  <pre><code>&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"&gt;
  
      &lt;ImageView
          android:id="@+id/gridItem"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentTop="true"
          android:layout_alignParentLeft="true" /&gt;
  
      &lt;ImageView
          android:id="@+id/gridItemOverlay"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentTop="true"
          android:layout_alignParentLeft="true"
          android:background="@drawable/button_ripple" /&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p><strong>CustomGridAdapter.java</strong></p>
  
  <pre><code>....
  gridItemOverLay = (ImageView) findViewById(R.id.gridItemOverlay);
  gridItemOverlay.bringToFront();
  </code></pre>
  
  <p>This works. Now the bottom ImageView contains my image, and the top animates, giving the illusion of a ripple animation <em>on top</em> of my image. Honestly though this is a work around. I feel like this is not how it was intended. So I ask you fine people, is there a better way or even a different way?  </p>