Ripple Effect for Android Textview and Imageview

This post about Ripple effect for button and imageview or anyview.

*Double Ripple Effect

*Rectangle Ripple Effect

*Normal Ripple Effect

ScreenShot

RippleEffect.class

package com.example.sampl2;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Bitmap;

import android.graphics.Canvas;

import android.graphics.Paint;

import android.graphics.PorterDuff;

import android.graphics.PorterDuffXfermode;

import android.graphics.Rect;

import android.os.Handler;

import android.util.AttributeSet;

import android.view.GestureDetector;

import android.view.MotionEvent;

import android.view.View;

import android.view.ViewGroup;

import android.view.animation.Animation;

import android.view.animation.ScaleAnimation;

import android.widget.RelativeLayout;

public class RippleEffect extends RelativeLayout

{

    private int WIDTH;

    private int HEIGHT;

    private int FRAME_RATE = 10;

    private int DURATION = 400;

    private int PAINT_ALPHA = 90;

    private Handler canvasHandler;

    private float radiusMax = 0;

    private boolean animationRunning = false;

    private int timer = 0;

    private int timerEmpty = 0;

    private int durationEmpty = -1;

    private float x = -1;

    private float y = -1;

    private int zoomDuration;

    private float zoomScale;

    private ScaleAnimation scaleAnimation;

    private Boolean hasToZoom;

    private Boolean isCentered;

    private Integer rippleType;

    private Paint paint;

    private Bitmap originBitmap;

    private int rippleColor;

    private View childView;

    private int ripplePadding;

    private GestureDetector gestureDetector;

    private Runnable runnable = new Runnable()

    {

        @Override

        public void run()

        {

            invalidate();

        }

    };

    public RippleEffect(Context context)

    {

        super(context);

    }

    public RippleEffect(Context context, AttributeSet attrs)

    {

        super(context, attrs);

        init(context, attrs);

    }

    public RippleEffect(Context context, AttributeSet attrs, int defStyle)

    {

        super(context, attrs, defStyle);

        init(context, attrs);

    }

    private void init(final Context context, final AttributeSet attrs)

    {

        if (isInEditMode())

            return;

        final TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RippleView);

        rippleColor = typedArray.getColor(R.styleable.RippleView_rv_color, getResources().getColor(R.color.rippelColor));

        rippleType = typedArray.getInt(R.styleable.RippleView_rv_type, 0);

        hasToZoom = typedArray.getBoolean(R.styleable.RippleView_rv_zoom, false);

        isCentered = typedArray.getBoolean(R.styleable.RippleView_rv_centered, false);

        DURATION = typedArray.getInteger(R.styleable.RippleView_rv_rippleDuration, DURATION);

        FRAME_RATE = typedArray.getInteger(R.styleable.RippleView_rv_framerate, FRAME_RATE);

        PAINT_ALPHA = typedArray.getInteger(R.styleable.RippleView_rv_alpha, PAINT_ALPHA);

        ripplePadding = typedArray.getDimensionPixelSize(R.styleable.RippleView_rv_ripplePadding, 0);

        canvasHandler = new Handler();

        zoomScale = typedArray.getFloat(R.styleable.RippleView_rv_zoomScale, 1.03f);

        zoomDuration = typedArray.getInt(R.styleable.RippleView_rv_zoomDuration, 200);

        paint = new Paint();

        paint.setAntiAlias(true);

        paint.setStyle(Paint.Style.FILL);

        paint.setColor(rippleColor);

        paint.setAlpha(PAINT_ALPHA);

        this.setWillNotDraw(false);

        gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGestureListener()

        {

            @Override

            public boolean onSingleTapConfirmed(MotionEvent e)

            {

                return true;

            }

            @Override

            public boolean onSingleTapUp(MotionEvent e)

            {

                return true;

            }

        });

        this.setDrawingCacheEnabled(true);

    }

    @Override

    public void addView(View child, int index, ViewGroup.LayoutParams params)

    {

        childView = child;

        super.addView(child, index, params);

    }

    @Override

    public void draw(Canvas canvas)

    {

        super.draw(canvas);

        if (animationRunning)

        {

            if (DURATION <= timer * FRAME_RATE)

            {

                animationRunning = false;

                timer = 0;

                durationEmpty = -1;

                timerEmpty = 0;

                canvas.restore();

                invalidate();

                return;

            }

            else

                canvasHandler.postDelayed(runnable, FRAME_RATE);

            if (timer == 0)

                canvas.save();

            canvas.drawCircle(x, y, (radiusMax * (((float) timer * FRAME_RATE) / DURATION)), paint);

            paint.setColor(getResources().getColor(android.R.color.holo_red_light));

            if (rippleType == 1 && originBitmap != null && (((float) timer * FRAME_RATE) / DURATION) > 0.4f)

            {

                if (durationEmpty == -1)

                    durationEmpty = DURATION - timer * FRAME_RATE;

                timerEmpty++;

                final Bitmap tmpBitmap = getCircleBitmap((int) ((radiusMax) * (((float) timerEmpty * FRAME_RATE) / (durationEmpty))));

                canvas.drawBitmap(tmpBitmap, 0, 0, paint);

                tmpBitmap.recycle();

            }

            paint.setColor(rippleColor);

            if (rippleType == 1)

            {

                if ((((float) timer * FRAME_RATE) / DURATION) > 0.6f)

                    paint.setAlpha((int) (PAINT_ALPHA - ((PAINT_ALPHA) * (((float) timerEmpty * FRAME_RATE) / (durationEmpty)))));

                else

                    paint.setAlpha(PAINT_ALPHA);

            }

            else

                paint.setAlpha((int) (PAINT_ALPHA - ((PAINT_ALPHA) * (((float) timer * FRAME_RATE) / DURATION))));

            timer++;

        }

    }

    @Override

    protected void onSizeChanged(int w, int h, int oldw, int oldh)

    {

        super.onSizeChanged(w, h, oldw, oldh);

        WIDTH = w;

        HEIGHT = h;

        scaleAnimation = new ScaleAnimation(1.0f, zoomScale, 1.0f, zoomScale, w / 2, h / 2);

        scaleAnimation.setDuration(zoomDuration);

        scaleAnimation.setRepeatMode(Animation.REVERSE);

        scaleAnimation.setRepeatCount(1);

    }

    @Override

    public boolean onTouchEvent(MotionEvent event)

    {

        if (gestureDetector.onTouchEvent(event) && !animationRunning)

        {

            if (hasToZoom)

                this.startAnimation(scaleAnimation);

            radiusMax = Math.max(WIDTH, HEIGHT);

            if (rippleType != 2)

                radiusMax /= 2;

            radiusMax -= ripplePadding;

            if (isCentered || rippleType == 1)

            {

                this.x = getMeasuredWidth() / 2;

                this.y = getMeasuredHeight() / 2;

            }

            else

            {

                this.x = event.getX();

                this.y = event.getY();

            }

            animationRunning = true;

            if (rippleType == 1 && originBitmap == null)

                originBitmap = getDrawingCache(true);

            invalidate();

            this.performClick();

        }

        childView.onTouchEvent(event);

        return true;

    }

    @Override

    public boolean onInterceptTouchEvent(MotionEvent event)

    {

       return true;

    }

    private Bitmap getCircleBitmap(final int radius) {

        final Bitmap output = Bitmap.createBitmap(originBitmap.getWidth(), originBitmap.getHeight(), Bitmap.Config.ARGB_8888);

        final Canvas canvas = new Canvas(output);

        final Paint paint = new Paint();

        final Rect rect = new Rect((int)(x - radius), (int)(y - radius), (int)(x + radius), (int)(y + radius));

        paint.setAntiAlias(true);

        canvas.drawARGB(0, 0, 0, 0);

        canvas.drawCircle(x, y, radius, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

        canvas.drawBitmap(originBitmap, rect, rect, paint);

        return output;

    }

}

activitysample.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:ripple="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    tools:context="${relativePackage}.${activityClass}" >

    <com.example.sampl2.RippleEffect

        android:id="@+id/more2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_margin="5dp"

        ripple:rv_type="rectangle" >

        <Button

            android:layout_width="match_parent"

            android:layout_height="50dip"

            android:layout_gravity="center"

            android:background="@android:color/holo_blue_light"

            android:padding="10dp"

            android:text="Rectangle Ripple effect" />

    </com.example.sampl2.RippleEffect>

    <com.example.sampl2.RippleEffect

        android:id="@+id/more3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_margin="5dp"

        ripple:rv_type="doubleRipple" >

        <Button

            android:layout_width="match_parent"

            android:layout_height="50dip"

            android:layout_gravity="center"

            android:background="@android:color/holo_blue_light"

            android:padding="10dp"

            android:text="Double Ripple  effect" />

    </com.example.sampl2.RippleEffect>

    <com.example.sampl2.RippleEffect

        android:id="@+id/more4"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_margin="5dp"

        ripple:rv_type="rectangle" >

        <Button

            android:layout_width="match_parent"

            android:layout_height="50dip"

            android:layout_gravity="center"

            android:background="@android:color/holo_blue_light"

            android:padding="10dp"

            android:text="SimpleRipple Ripple effect" />

    </com.example.sampl2.RippleEffect>

</LinearLayout>

Download SourceCode Here

Android GoogleCardView with SlidingPanel Example

This post about how to show CardView with Sliding Up Panel.
*SlidingUpPanel
*Card View
*Swipe to Delete
*Sliding UpExpand the CardView

Activity Source Code

GoogleCardsActivity.java

package com.vj.slidinguppanel.demo;

import android.os.Bundle;

import android.util.Log;

import android.view.ViewGroup;

import android.widget.AbsListView.OnScrollListener;

import android.widget.AdapterView;

import android.widget.AdapterView.OnItemClickListener;

import android.widget.AbsListView;

import android.widget.ListView;

import android.app.Activity;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup.LayoutParams;

import android.view.animation.Animation;

import android.view.animation.Transformation;

import android.widget.ImageView;

import android.widget.TextView;

import com.nhaarman.listviewanimations.ArrayAdapter;

import com.nhaarman.listviewanimations.itemmanipulation.swipedismiss.OnDismissCallback;

import com.nhaarman.listviewanimations.itemmanipulation.swipedismiss.SwipeDismissAdapter;

import com.nhaarman.listviewanimations.appearance.simple.SwingBottomInAnimationAdapter;

import com.sothree.slidinguppanel.SlidingUpPanelLayout;

import com.sothree.slidinguppanel.SlidingUpPanelLayout.PanelSlideListener;

public class GoogleCardsActivity extends Activity implements OnDismissCallback {

private static final int INITIAL_DELAY_MILLIS = 100;

private GoogleCardsAdapter mGoogleCardsAdapter;

// private SlidingDrawer drawer;

// private Button handle, clickMe;

private static final String TAG = "GoogleCardsActivity";

private SlidingUpPanelLayout mLayout;

boolean itsOpend = false;

int index = 0;

@Override

protected void onCreate(final Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_googlecards);

ListView listView = (ListView) findViewById(R.id.activity_googlecards_listview);

mGoogleCardsAdapter = new GoogleCardsAdapter(this);

SwingBottomInAnimationAdapter swingBottomInAnimationAdapter = new SwingBottomInAnimationAdapter(

new SwipeDismissAdapter(mGoogleCardsAdapter, this));

swingBottomInAnimationAdapter.setAbsListView(listView);

assert swingBottomInAnimationAdapter.getViewAnimator() != null;

swingBottomInAnimationAdapter.getViewAnimator().setInitialDelayMillis(

INITIAL_DELAY_MILLIS);

listView.setAdapter(swingBottomInAnimationAdapter);

mLayout = (SlidingUpPanelLayout) findViewById(R.id.sliding_layout);

mLayout.setPanelSlideListener(new PanelSlideListener() {

@Override

public void onPanelSlide(View panel, float slideOffset) {

Log.i(TAG, "onPanelSlide, offset " + slideOffset);

}

@Override

public void onPanelExpanded(View panel) {

Log.i(TAG, "onPanelExpanded");

itsOpend = true;

mGoogleCardsAdapter.notifyDataSetChanged();

index = 0;

}

@Override

public void onPanelCollapsed(View panel) {

Log.i(TAG, "onPanelCollapsed");

itsOpend = false;

mGoogleCardsAdapter.notifyDataSetChanged();

index = 0;

}

@Override

public void onPanelAnchored(View panel) {

Log.i(TAG, "onPanelAnchored");

// itsOpend = true;

// mGoogleCardsAdapter.notifyDataSetChanged();

}

@Override

public void onPanelHidden(View panel) {

Log.i(TAG, "onPanelHidden");

}

});

listView.setOnScrollListener(new OnScrollListener() {

@Override

public void onScrollStateChanged(AbsListView view, int scrollState) {

// TODO Auto-generated method stub

Log.e("Log State", "scrollState :: " + scrollState);

index = 0;

}

@Override

public void onScroll(AbsListView view, int firstVisibleItem,

int visibleItemCount, int totalItemCount) {

// TODO Auto-generated method stub

index = -1;

}

});

listView.setOnItemClickListener(new OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view,

int position, long id) {

if (mLayout != null) {

if (!itsOpend) {

// mLayout.setAnchorPoint(0.7f);

mLayout.expandPanel();

} else {

// mLayout.setAnchorPoint(1.0f);

mLayout.collapsePanel();

}

}

}

});

for (int i = 0; i < 25; i++) {

mGoogleCardsAdapter.add(i);

}

}

@Override

public void onDismiss(final ViewGroup listView,

final int[] reverseSortedPositions) {

for (int position : reverseSortedPositions) {

mGoogleCardsAdapter.remove(position);

}

}

public class GoogleCardsAdapter extends ArrayAdapter<Integer> {

private final Context mContext;

private final BitmapCache mMemoryCache;

GoogleCardsAdapter(final Context context) {

mContext = context;

mMemoryCache = new BitmapCache();

}

@Override

public View getView(final int position, final View convertView,

final ViewGroup parent) {

final ViewHolder viewHolder;

View view = convertView;

if (view == null) {

view = LayoutInflater.from(mContext).inflate(

R.layout.activity_googlecards_card, parent, false);

viewHolder = new ViewHolder();

viewHolder.textView = (TextView) view

.findViewById(R.id.activity_googlecards_card_textview);

view.setTag(viewHolder);

viewHolder.imageView = (ImageView) view

.findViewById(R.id.activity_googlecards_card_imageview);

} else {

viewHolder = (ViewHolder) view.getTag();

}

if (itsOpend) {

expand(viewHolder.imageView);

} else {

collapse(viewHolder.imageView);

}

viewHolder.textView.setText(mContext.getString(

R.string.card_number, getItem(position) + 1));

setImageView(viewHolder, position);

return view;

}

private void setImageView(final ViewHolder viewHolder,

final int position) {

int imageResId;

switch (getItem(position) % 5) {

case 0:

imageResId = R.drawable.a1;

break;

case 1:

imageResId = R.drawable.a3;

break;

case 2:

imageResId = R.drawable.a2;

break;

case 3:

imageResId = R.drawable.a1;

break;

default:

imageResId = R.drawable.a3;

}

Bitmap bitmap = getBitmapFromMemCache(imageResId);

if (bitmap == null) {

bitmap = BitmapFactory.decodeResource(mContext.getResources(),

imageResId);

addBitmapToMemoryCache(imageResId, bitmap);

}

viewHolder.imageView.setImageBitmap(bitmap);

}

private void addBitmapToMemoryCache(final int key, final Bitmap bitmap) {

if (getBitmapFromMemCache(key) == null) {

mMemoryCache.put(key, bitmap);

}

}

private Bitmap getBitmapFromMemCache(final int key) {

return mMemoryCache.get(key);

}

@SuppressWarnings({ "PackageVisibleField",

"InstanceVariableNamingConvention" })

private class ViewHolder {

TextView textView;

ImageView imageView;

}

public void expand(final View v) {

v.measure(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);

final int targetHeight = v.getMeasuredHeight();

v.getLayoutParams().height = 0;

v.setVisibility(View.VISIBLE);

Animation a = new Animation() {

@Override

protected void applyTransformation(float interpolatedTime,

Transformation t) {

v.getLayoutParams().height = interpolatedTime == 1 ? LayoutParams.WRAP_CONTENT

: (int) (targetHeight * interpolatedTime);

v.requestLayout();

}

@Override

public boolean willChangeBounds() {

return true;

}

};

// 1dp/ms

a.setDuration((int) (targetHeight / v.getContext().getResources()

.getDisplayMetrics().density));

v.startAnimation(a);

}

public void collapse(final View v) {

final int initialHeight = v.getMeasuredHeight();

Animation a = new Animation() {

@Override

protected void applyTransformation(float interpolatedTime,

Transformation t) {

if (interpolatedTime == 1) {

v.setVisibility(View.GONE);

} else {

v.getLayoutParams().height = initialHeight

- (int) (initialHeight * interpolatedTime);

v.requestLayout();

}

}

@Override

public boolean willChangeBounds() {

return true;

}

};

// 1dp/ms

a.setDuration((int) (initialHeight / v.getContext().getResources()

.getDisplayMetrics().density));

v.startAnimation(a);

}

}

}

Screen Shot 

BitmapCache.java

package com.vj.slidinguppanel.demo;

import android.annotation.SuppressLint;

import android.graphics.Bitmap;

import android.util.LruCache;

@SuppressLint("NewApi")

public class BitmapCache extends LruCache<Integer, Bitmap> {

    private static final int KILO = 1024;

    @SuppressLint("NewApi")

private static final int MEMORY_FACTOR = 2 * KILO;

    public BitmapCache() {

        super((int) (Runtime.getRuntime().maxMemory() / MEMORY_FACTOR));

    }

    @Override

    protected int sizeOf(final Integer key, final Bitmap value) {

        return value.getRowBytes() * value.getHeight() / KILO;

    }

}

XML code

activity_googlecards.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".DemoActivity" >

    <com.sothree.slidinguppanel.SlidingUpPanelLayout

        xmlns:sothree="http://schemas.android.com/apk/res-auto"

        android:id="@+id/sliding_layout"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:gravity="bottom"

        sothree:panelHeight="278dp"

        sothree:shadowHeight="4dp"

        sothree:paralaxOffset="50dp"

        sothree:dragView="@+id/dragView">

        <!-- MAIN CONTENT -->

        <FrameLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:orientation="vertical">

          

            <TextView

                android:id="@+id/main"

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:layout_marginTop="?attr/actionBarSize"

                android:gravity="center"

                android:text="Main Content"

                android:clickable="true"

                android:focusable="false"

                android:focusableInTouchMode="true"

                android:textSize="16sp" />

        </FrameLayout>

        <!-- SLIDING LAYOUT -->

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:background="#eeeeee"

            android:orientation="vertical"

            android:clickable="true"

            android:focusable="false"

            android:id="@+id/dragView">

  <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="68dp"

                android:background="@android:color/transparent"

                android:orientation="horizontal">

            </LinearLayout>

            <ListView

         android:id="@+id/activity_googlecards_listview"

         android:layout_width="match_parent"

         android:layout_height="match_parent"

         android:background="#e2e2e2"

         android:clipToPadding="false"

         android:divider="@null"

         android:focusable="false"

         android:focusableInTouchMode="false"

         android:dividerHeight="8dp"

         android:fadingEdge="none"

         android:fitsSystemWindows="true"

         android:padding="12dp"

         android:scrollbarStyle="outsideOverlay"

        >

     </ListView>

        </LinearLayout>

    </com.sothree.slidinguppanel.SlidingUpPanelLayout>

</RelativeLayout>

Download Source Code Here

Download SlidingUp Library Here