Develop Reference

Ripple effect on a ImageButton does not work

I set an ImageButton in a RelativeLayout and i want to show a Ripple effect when the button get clicked. As far as i know it have to be enabled by default but for some reason it doesn't show even if i set ?attr/selectableItemBackgroundBorderless or ?attr/selectableItemBackground as foreground or background (i used ?android:attr instead of ?attr too).
I tried everything, i made a custom Ripple effect drawable and setted it as foreground/background and it stills not working.
The app is API 21 > targeting 31, i don't know if it have anything to do with it but i using Material3.dark as main theme.
Anyone have an idea of what could be wrong here?
ImageButon:
<ImageButton
android:id="#+id/tb_music"
style="#style/top_bar_button"
android:layout_marginLeft="8dp"
android:src="#drawable/note" />
Style top_bar_button:
<style name="top_bar_button">
<item name="android:layout_width">64dp</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">#00000000</item>
<item name="android:foreground">#drawable/ripple_effect</item>
<item name="android:clickable">true</item>
</style>
ripple_effect.xml:
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#FFFFFF">
<item android:id="#android:id/mask"
android:drawable="#android:color/white">
<shape android:shape="rectangle"> </shape>
</item>
</ripple>
How the button looks

don't use background attribute with ImageButton or Button. These widgets have 9-patch set as background, so when you overwrite it you basically lose default Androids button style and padding. Now you bascially may have in here ImageView or even TextView with drawable set to left/right
for coloring button (image or common, or even other Views) use android:tint attribute, but this will work with API23+ (so you may look for some compat/androidX version if you need API21, note it implements TintableBackgroundView, so we may assume that tint attribute will work, with custom not-android prefix)
also in question you should show your ripple effect drawable file, but even assuming that is is properly written - you have set transparent background, thus ripple effect won't be visible, as it works only in bounds of background - you transparent color removed default "shape" of this View. Just like elevation and translationZ params, these are adding some shadow under View, but only for not transparent, you've also lost this visual effect in here
so in short: remove background attribute leaving default one (or set it as non-transparent-at-all 6-hash solid color, but this will become just colored rectangle) and get familiar with tint and tintMode
aaand if you need a ripple effect on transparent rectange View then afaik thats possible also, but with mask param in drawables XML. and you don't need ImageButton, any View is clickable in Android, especially when set View.OnClickListener using Java/Kotlin. so ImageView will be sufficiet

I don't know why ripple does not work in your app but when I tested it, It is working properly. I think you didn't give padding to your ImageButton. You can see my XML code that how my code shows the Ripple effect.
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
app:srcCompat="#drawable/note"
tools:ignore="ContentDescription" />
<!-- Make sure that you have added padding to show ripple effect. Otherwise ripple effect not show-->
Let me know if your problem is not solved yet.

state_pressed not working in color selector for tint for an imageview

Code of the view I'm using it in:
<ImageView
android:layout_width="20dp"
android:layout_height="25dp"
android:background="#drawable/ic_bookmark_border_black_24dp"
android:layout_below="#+id/author"
android:layout_alignRight="#+id/dots"
android:tint="#color/bookmark_color_selector"
android:id="#+id/bookmark"/>
The code of the color selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#android:color/black" android:state_pressed="true"/>
<item android:color="#android:color/white"/>
</selector>
More information: I'm using this view inside a cardView which is then used in a recyclerView. The tint of the icon remains white. Does not change(like i want it to) to black on touching it.

Add this lines as well in selector
android:background="#color/white"
android:state_focused="true"

You will have to make a number of changes. First, remove these two lines from your <ImageView> tag:
android:background="#drawable/ic_bookmark_border_black_24dp"
android:tint="#color/bookmark_color_selector"
And add this line:
android:clickable="true"
Then, in your Java code, wherever you inflate this ImageView (probably in your activity's onCreate() method), add this code:
ImageView bookmark = (ImageView) findViewById(R.id.bookmark);
Drawable icon = ContextCompat.getDrawable(this, R.drawable. ic_bookmark_border_black_24dp);
ColorStateList tint = ContextCompat.getColorStateList(this, R.color.bookmark_color_selector);
DrawableCompat.setTintList(icon, tint);
bookmark.setImageDrawable(icon);
What's going on here?
Basically, ImageViews don't support tinting based on a selector before API 21, so you have to use support library methods to make it work. The ContextCompat methods allow you to access your image and your color selector, and then the DrawableCompat method actually applies the tint to the image. Finally, you have to make your ImageView "clickable" or else it will never be in the pressed state.
Edit
I just noticed that you said you were using this inside a RecyclerView. So my Java code posted above will have to be either in onCreateViewHolder() or onBindViewHolder(). As such, this isn't a valid reference to a Context instance for the ContextCompat methods; instead use itemView.getContext().

Android Ripple button with curved background for Pre-Lollipop devices

I need ripple effect for buttons. Currently I'm using ripple background for buttons in lollipop and upward devices using an xml in v21 directory and it is working fine, but I also need a ripple effect for pre-lollipop devices.
Here are my buttons.
I used some custom libraries for acquiring ripple effect for pre lollipop devices. For example I used com.balysv:material-ripple:1.0.2 library by following how to create ripple effect for pre-lollipop. In there they use this library which uses a custom view to wrap the button.
So when I use that for my curved, shaped buttons in pre lollipop, the result would be like this...
As you can see, the ripple effect goes out side of the button stroke boundaries. Is there is a way to resolve this?
Also, is there a way to acquire ripple effect using android's default support libraries instead of using custom 3rd party libraries for pre lollipop devices?

No. You don't have the option for ripple on pre-lollipop using support library. You may use this library - easy to use. Perform a check on OS and then implement the ripple if you have to like this.
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// set layout background as ripple_drawable
} else {
// Implement the 3rd party library
}

use https://github.com/ozodrukh/RippleDrawable.
ripple.xml
<ripple xmlns:android="htp://schemas.android.com/apk/res/android"
android:color="yourRippleColor">
<!-- style for ripple -->
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="yourButtonCornerRadius"/>
<solid android:color="#FF00FF"/>
</shape>
</item>
<!-- background -->
<item android:drawable="yourBackgroundForButton" />
</ripple>
Activity.java
Button bu=...;
bu.setBackground(LollipopDrawablesCompat.getDrawable(getResources(),R.drawable.ripple,getTheme());
bu.setOnTouchListener(new DrawableHotspotTouch((LollipopDrawable)bu.getBackground()));
tested on Samsung Galaxy Advance Duos, android 4.4.2(api 19,KitKat)

Styling a AppCompatButton in v21 to have no shadow and corner radius of zero

I have a AppCompatButton defined in a XML layout, and I have set a theme for it like this:
android:theme="#style/CustomAccentOverlay"
And I have set:
android:stateListAnimator="#null"
to remove the shadow. I have two problems with this.
The height of the button is deducted the height of the shadow, even though the shadow is not shown. Should I remove the shadow in some other way, or how do I fix this?
The button has rounded corners, and I want the corners to be sharp. I can not set a background on the button, because I want to keep the standard ripple effect and that goes away if I set a background (at least I don't know how to keep it if I set a background). I have tried setting
<item name="android:bottomLeftRadius">0dp</item>
and all the other corners to the CustomAccentOverlay theme and also its corresponding style, but it does not work. How can I set the corner radius to zero on my button?
Thank you
Søren

Use the following code for the Button.
<android.support.v7.widget.AppCompatButton
android:layout_width="200dp"
android:layout_height="200dp"
android:text="Button"
android:stateListAnimator="#null"
android:elevation="0dp"
android:background="#android:color/darker_gray"
android:foreground="?attr/selectableItemBackground"
/>
I will explain the attributes.
android:elevation="0dp" and android:stateListAnimator="#null". No shadow for the button.
android:background . Set the desired color as background. It removes the rounded corners.
android:foreground="?attr/selectableItemBackground" . It gives the ripple effect when the button is pressed.
Update 1:
It seems like android:foreground attribute for View works from API 23. For below APIs, create a drawable with ripple in drawable-v21 folder and set it as background to the button,
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:ignore="NewApi"
android:color="#color/ripple_color">
<item android:drawable="#color/normal_state_button_background_color"/>
</ripple>
For pre Lollipop versions, create a drawable with selector in drawable folder with the same name.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed_color"
android:state_pressed="true" />
<item android:drawable="#drawable/focused_color"
android:state_focused="true" />
<item android:drawable="#drawable/normal_color" />
</selector>

First question:How to remove shadow of a button?
Here is the answer:
Just add this attribute to your button
android:stateListAnimator="#null"
Second question: How to make the corner of button sharp without losing the standard ripple effect.
Here is the answer: But first you have to make two drawble file with same name but one for below api 21 and one for api > 21 because the ripple is only available only api > 21.So now I am showing how to create that.Read the following text carefully
Right click on the drawble folder and choose new and "Drawble resource file" and hit next then name the drawble whatever you like and press ok.Then again right click on the drawble folder and choose new and "Drawble resource file" and hit next and name the drawble exactly what you named the previous drawble folder but this time at the bottom you can see a section called "available qualifiers".Go to this section and at the very bottom you can see "Version",click it and then you can see a arrow icon at the right,click it then in the "Platform api level" add 21 and then press ok.And now if you expand drawble folder you can see two file of your created drawble file.Once for api that is below 21 and once for upper 21.Open drawble file that you have created and make sure you open that have "(v21)" at the last.Now delete everything from there and add the following code
<?xml version="1.0" encoding="utf-8"?>
<ripple android:color="?attr/colorControlHighlight" xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<corners android:radius="0dp"/>
<solid android:color="#D6D7D7"/>
</shape>
</item>
</ripple>
And add this attribute to your button
android:background="#drawable/youdrawblefilethatyouhavecreated"
And now if you run your application you can see that there is no shadow and your button has sharp corner and if you click the ripple shows up.
Lastly,your button look something like this
<android.support.v7.widget.AppCompatButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button 1"
android:background="#drawable/yourcreatddrawblefile"
android:stateListAnimator="#null"/>
Hope this help!

It really sounds like you want to use a clickable TextView rather than a Button. TextView by default will not have shadow and has sharp corners and you can attach a click listener to it. Remember, Button is just a fancy TextView with a lot of visual add-ons to it, and it sounds like you want to remove a lot of it.
If you want to keep the ripple on the TextView and define your own background, set android:foreground="?attr/selectableItemBackground"
EDIT: Even though the other answer was marked accepted, I would still argue that the OP should use a TextView with a click listener and applying the ripple effects to that than using a Button. Clickable TextViews in this manner are exactly how the Google I/O app implements all of their flat buttons that meet Material Design spec.

Use this code
<android.support.v7.widget.AppCompatButton
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorAccent"
android:text="#string/button" />

Fixed: "Android: Detecting focus/pressed color"

I'm trying to detect the focus/pressed color for button and other elements.
This is needed because I'm developing new components and it's important that those look as part of platform.
Those colors are ORANGE on android sdk and GREEN on HTC SenseUI.
If I could detect that color my component will look as part of platform on both version.
Does anyone knows how to do this?
It's possible to create "selector" which uses custom image for default state and platform default for focus/selection.
To do this follow the steps:
1) create xml file with selector in "res/drawable" (e.g. "red_button.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="#android:drawable/btn_default" >
</item>
<item android:state_focused="true"
android:drawable="#android:drawable/btn_default" >
</item>
<item
android:drawable="#drawable/btn_default_red" >
</item>
</selector>
2) from folder ".../android-sdk-mac/platforms/android-1.5/data/res/drawable/" take picture "btn_default_pressed.9.png" and change color as you like (I needed to change it to red and for this GIMP is enough).
3) place altered picture in "res/drawable" (e.g. with name "btn_default_red.9.png")
4) define button:
<Button
android:id="#+id/info_button"
android:layout_width="wrap_content"
android:layout_height="37dip"
android:layout_marginTop="1dip"
android:background="#drawable/red_button"
android:text="[Info]" />
That's all.
This is result:
alt text http://img200.imageshack.us/img200/1349/custombutton.png

I had this problem too. As already stated, the problem is that the backgrounds aren't simple colors, they're Drawables that could take on all kinds of appearances. However, I found a work-around that may help. If your custom component looks something like an existing one, e.g. a Button or ListView entry, you can just steal their background/selector and set that as the background for your custom component. E.g., in your custom component constructor:
setBackgroundDrawable(new Button(context).getBackground());
or for a background more suitable for list-like components:
setBackgroundDrawable(new ListView(context).getSelector());
You may want to optimise that code somewhat, but you get the idea.

Those aren't colors. They are a few nine-patch images out of a StateListDrawable. I am skeptical that there will be a reliable way for you to determine what the color is, one that will work across all devices and all versions of Android.

This is pretty much a duplicate of: Android ListView Selector Color
Also, why do you need to detect the colours? Just do nothing and your widgets will fit in to the platform's existing look & feel.
Or if you're writing a custom theme, just make yours inherit from android:Theme.