Monday, November 24, 2014

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>






Wednesday, November 12, 2014

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>






Check out this may be help you

Related Posts Plugin for WordPress, Blogger...