CODEWITHSUNDEEP
androidmaterial-design
Nilzor
Nilzor

Reputation: 18593

Why does the ripple effect remove my original background?

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.

Upvotes: 8

Views: 2304

Answers (2)

GregoryK
GregoryK

Reputation: 3091

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

Upvotes: 1

AcademicDuck
AcademicDuck

Reputation: 5

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.

Upvotes: 0

Related Questions