Add ripple effect to an ImageView with background
Source: Google+, StackOverflow, Haven't tried this yet but looks good Blundellapps
Question: Add ripple effect to an ImageView
with background.
Answer:
In the xml do this:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="3dp"
card_view:cardElevation="3dp"
card_view:cardUseCompatPadding="true">
<ImageView
android:id="@+id/post_shutta"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/shutta_blue"
android:clickable="true"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="@string/post"
android:textStyle="bold"
android:textColor="#ffffff"
android:textSize="22sp"
android:gravity="center"
android:clickable="false"/>
</android.support.v7.widget.CardView>
Doesn't need the TextView
, it's there just to demonstrate how we can overlay a text above. The key here is the TextView
's clickable
must be set to false
while the ImageView
's clickable
must be set to true
(ImageView
is where the ripple effect apply to).
In Java code do this:
private void setupPostAnimation(){
ImageView postBackground = (ImageView) findViewById(R.id.post_shutta);
Drawable image = getDrawable(R.color.shutta_blue); //this could be any image of your choice
RippleDrawable rippledImage = new RippleDrawable(ColorStateList.valueOf(getColor(R.color.white)), image, null);
postBackground.setImageDrawable(rippledImage);
postBackground.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
@Override
public void run() {
postShutta(); //do your thing here
}
}, 100); //delay 100 milliseconds to see the effect.
}
});
}