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.

Answer 2

An alternative solution:

Render the image onto a SurfaceTexture. Use that SurfaceTexture as an OpenGL "GL_OES_EGL_image_external" texture input into an OpenGL fragment shader. Draw a full-screen quad using this fragment shader onto a secondary SurfaceTexture. Render the secondary SurfaceTexture into a TextureView.

Getting this first part working is the difficult part. Once you've got that working, you will be able to apply different shaders to images, but not switch between them as shown in the picture. To add smooth swapping between images, render two different fragment shaders onto the secondary SurfaceTexture, using GL_SCISSOR to slice the screen in half depending on an offset value.

The main advantage of this method is that it will use significantly less memory. The bitmap can be loaded once, and after being rendered onto the SurfaceTexture once, may be discarded.

A secondary advantage of this method is that more complicated filters can be applied, and that with a little bit of extra work, you will be able to render videos as well.

If you're interested in seeing an implementation of this technique (which includes video filtering as well), check out the Kfilter library for photo and video filtering/processing.