vxh.viet
6/23/2016 - 10:46 AM

Add ripple effect to an ImageView with background

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.
            }
        });
    }