First of all, keep in mind that the layer-list drawable works like a FrameLayout , it adds up the item as it appears, so if you want your ripple to be in front, just move it down.
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="@color/android_l_dark_gray"/> </shape> </item> <item> <ripple android:color="@color/android_l_light_gray"/> </item> </layer-list>
Produces something like
Now do you notice how it is “clipped” by other buttons? this is actually overwork, it is because of the drawing order, the background of other views is drawn on top, and not that the ripples are actually cropped, so I can come up with several solutions for your specific layout:
a. Get ViewGroup layer-list and use only ripple as the button background, use shape or color as the background of the ViewGroup , creating:
Note that you lost the grid as an effect due to a different background, but look at the other candy pads and you will notice that they don't have grid dividers if you still want them to use your ViewGroup to paint them.
b. Use / draw the ripples as the foreground / overlay / drawableTop background and the other as the background, but I think you might run into a similar problem with the drawing order as before.
with. I had one more in mind, but I just forgot, it can come back as a dream ¯ \ _ (ツ) _ / ¯
Check out the Calculator from AOSP , you can take CalculatorPadLayout for your grid or just find out how they do it :)