Transparent Color Effect Over the Image Bitmap in Android

Question

I am working on an Image editor android app like : BeFunkey I have achieved many effects like this android app but still some effects are been headache for me. Like PopArt Effect. Please see below images. One is original and second is popart colored effect :

Original ::

PopArt ::

I have used RGB Color Matrix To get color effect on bitmap. But When i use it worked like one color in whole image but here in this effect there are multiple colors on the image. If anybody here who can guide me please tell me how can i achieve this color effect. Thank you for your time.

Following Code I am using for color Effects ::

    public static final float[] float_color_matrix = new float[] { 2.6f, 0, 0.1f, 0, 0, 0.1f, 1.2f, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0 };

    ColorMatrix cm = new ColorMatrix();
    cm.postConcat(new ColorMatrix(float_color_matrix));
    ColorFilter colorFilter = new ColorMatrixColorFilter(cm);

    imageView.setColorFilter(colorFilter);

Answer 1

This code should do the trick. I came pretty close to the result you're looking for. If it's not exactly the same you can just play around with the colors in the colors array. I use this nifty tool to find hex color codes.

/**
 * 
 * @param context
 * @param yourDrawableResource (ex R.drawable.ic_drawable)
 * @return the image bitmap with the correct overlay
 */
public static Bitmap setPopArtGradient(Context context, int yourDrawableResource) {
    int[] colors = new int[]{Color.parseColor("#FFD900"),Color.parseColor("#FF5300"),
                             Color.parseColor("#FF0D00"),Color.parseColor("#AD009F"),
                             Color.parseColor("#1924B1")};
    float[] colorPositions = new float[]{0.2f,0.4f,0.6f,0.8f,1.0f};

    final Resources res = context.getResources();
    Drawable drawable = res.getDrawable(yourDrawableResource);

    Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap); 
    drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
    drawable.draw(canvas);

    /* Create your gradient. */
    LinearGradient grad = new LinearGradient(0, 0, 0, canvas.getHeight(), colors, colorPositions, TileMode.CLAMP);

    /* Draw your gradient to the top of your bitmap. */
    Paint p = new Paint();
    p.setStyle(Style.FILL);
    p.setAlpha(110); //adjust alpha for overlay intensity
    p.setShader(grad);
    canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), p);

    return bitmap;
}

Then you just implement it by doing this

imageView.setImageBitmap(setPopArtGradient(yourContext, R.drawable.your_drawable));

If you want to pass a bitmap you can do this.

/**
 * 
 * @param context
 * @param bmp (your bitmap)
 * @return the image bitmap with the correct overlay
 */
public static Bitmap setPopArtGradientFromBitmap(Context context, Bitmap bmp) {
    int[] co = new int[]{Color.parseColor("#FFD900"),Color.parseColor("#FF5300"),Color.parseColor("#FF0D00"),Color.parseColor("#AD009F"),Color.parseColor("#1924B1")};
    float[] coP = new float[]{0.2f,0.4f,0.6f,0.8f,1.0f};

    Bitmap bitmap = bmp.copy(Bitmap.Config.ARGB_8888, true);
    Canvas canvas = new Canvas(bitmap);

    /* Create your gradient. */
    LinearGradient grad = new LinearGradient(0, 0, 0, canvas.getHeight(), co, coP, TileMode.CLAMP);

    /* Draw your gradient to the top of your bitmap. */
    Paint p = new Paint();
    p.setStyle(Style.FILL);
    p.setAlpha(110);
    p.setShader(grad);
    canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), p);

    return bitmap;
}

I applied it to one of my Photos I took and this was the result

Hope it helps you.