Why does the ripple effect remove my original background?

Question

So I'm trying to create a ripple effect with a cusotm color, and kind of succeeds, except the ripple effect removes the original background and thus creates a semi-transparent ripple effect which is not what I want.

Layout:

    <Button
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:text="Clicky"
        android:colorControlHighlight="@android:color/holo_blue_light"
        android:background="@drawable/selector">
    </Button>

drawable/selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/ripple"/>
    <item android:drawable="@color/normal"/>
</selector>

drawable/ripple.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="#7f7">
</ripple>

color.xml

<resources>
    <color name="normal">#070</color>
</resources>

What do I have to do to keep the green (#070) background while the ripple effect is overlayed? I believe that's the intention, right?

Edit

I have now introduced a shape as suggested by AcademicDuck:

drawable/red_shape.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle">
    <solid android:color="@color/normal" />
</shape>

This shape is referenced by the now modified ripple:

drawable/ripple.xml:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:drawaleb="@drawable/red_shape">
</ripple>

What changes now is that when I press the background is a solid red color instead of transparent. Still no ripple though.

score 1 · Answer 1 · edited May 23 '17 at 11:43

In order to use your custom drawable, you need to specify it in the ripple drawable like this (RippleDrawable):

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/yourRippleColor">
    <item android:drawable="@drawable/yourDrawable" />
</ripple>

Also, it worth to check the following questions too: Android L's Ripple Effect - Touch Feedback for Buttons - Using XML and android ripple button with background

score 0 · Answer 2 · answered Feb 17 '15 at 22:05

0

Android Ripple effects draw over the top of the current background if no child is set on the ripple tag. Inside the ripple tag, specify an <item android:drawable = "@drawble/yourBackground">. And make 'yourBackground' a rectangular drawable resource with the same background colour as the button - #070.

answered Feb 17 '15 at 22:05

AcademicDuck

5
1
2

I can't get it to work - see the updated question (below "edit"). Am I doing the shape wrong? – Nilzor Feb 19 '15 at 08:47
The issue is in the ripple drawable. You need to specify the the colour of the ripple in the ripple tag. Then you specify the drawable to be drawn over in an item tag. Use you original ripple: And add an tag in the middle so it looks like this: – AcademicDuck Feb 19 '15 at 11:14

Why does the ripple effect remove my original background?

2 Answers2