Image and video filters like snapchat in android

Question

I am developing an application where I want the filters to be applied the way snapchat does, From what I can understand is that they are using PagerAdapter but I do not know how they are applying filters over the image or videos and it's not another image with filter applied to it. Any idea or code snippet which can do the same is highly appreciated for images and videos both and saving them too. Thanks :D

Answer 1

What I am doing here is overlaying two bitmaps over one another. How much either of the bitmaps should be visible is determined using the touch of the user. I have an enum for which direction the user is scrolling basically LEFT OR RIGHT and NONE. Depending on which direction the user scrolls different bitmap is applied on the current bitmap.

@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
    if (mCurrentScrollDirection.ordinal() == ScrollDirection.NONE.ordinal()) {
        if (distanceX > 0) {
            mCurrentScrollDirection = ScrollDirection.LEFT;
        } else {
            mCurrentScrollDirection = ScrollDirection.RIGHT;
        }
    }
    mTouchX = (int) e2.getX();
    overlayBitmaps(mTouchX);
    return false;
}

private void overlayBitmaps(int coordinateX) {

    switch (mCurrentScrollDirection) {
        case NONE: {
            //do nothing here
            break;
        }
        case LEFT: {
            overlayNextBitmap(coordinateX);
            break;
        }
        case RIGHT: {
            overlayPreviousBitmap(coordinateX);
            break;
        }
    }
}

private void overlayPreviousBitmap(int coordinateX) {
    mImageCanvas.save();

    Bitmap OSBitmap = Bitmap.createBitmap(mCurrentBitmap, coordinateX, 0, mCurrentBitmap.getWidth() - coordinateX, mCurrentBitmap.getHeight());
    mImageCanvas.drawBitmap(OSBitmap, coordinateX, 0, null);

    Bitmap FSBitmap = Bitmap.createBitmap(mPreviousBitmap, 0, 0, coordinateX, mCurrentBitmap.getHeight());
    mImageCanvas.drawBitmap(FSBitmap, 0, 0, null);

    mImageCanvas.restore();

    mCapturedImageView.setImageDrawable(new BitmapDrawable(getResources(), mResultBitmap));
}

private void overlayNextBitmap(int coordinateX) {
    mImageCanvas.save();

    Bitmap OSBitmap = Bitmap.createBitmap(mCurrentBitmap, 0, 0, coordinateX, mCurrentBitmap.getHeight());
    mImageCanvas.drawBitmap(OSBitmap, 0, 0, null);

    Bitmap FSBitmap = Bitmap.createBitmap(mNextBitmap, coordinateX, 0, mCurrentBitmap.getWidth() - coordinateX, mCurrentBitmap.getHeight());
    mImageCanvas.drawBitmap(FSBitmap, coordinateX, 0, null);

    mImageCanvas.restore();

    mCapturedImageView.setImageDrawable(new BitmapDrawable(getResources(), mResultBitmap));
}

This works quite well, I just haven't tested on low memory devices considering I could not find many :)

For complete code reference check this link out. It's my own library where you can capture images apply filters and get a callback to the calling activity. It's still work in progress.