How can I get a translucent and colorized image in Android like the new Google Play Newsstand header?

Question

I'm trying to get a translucent and colorized image like the new Google Play Newsstand app, but everything which I tried until this moment doesn't work perfectly. What I mean is more specified by the images below.

The Google Play Newsstand header looks like this:

But my code make up a header to me which looks like this:

and it's awful!

My code is:

ImageUtils.getImageFiltered(this, R.drawable.disaster, R.color.transparent_teal)

In "ImageUtils" class, the method getImageFiltered(...) is:

public static Drawable getImageFiltered(Context context, int res, int color) {
    Drawable drawable = createContrast(context, res, 50);
    color = context.getResources().getColor(color);
    ColorFilter filter = new PorterDuffColorFilter(color, PorterDuff.Mode.DARKEN);
    drawable.setColorFilter(filter);
    return drawable;
}

The method createContrast(context, res, 50); just change the image to black and white.

So, anyone knows how to get a image like the Google's app?

Thanks very much and I'm sorry for my English, I'm just learning yet.

Answer 1

I think the problem is in the createContrast() function, which is over-brightening the lighter shades of grey. You could try fixing that to return a desaturated greyscale image without any contrast adjustment applied, using a ColorMatrix with setSaturation(0) applied. Then apply PorterDuff.

Alternatively you could create the effect using a ColorMatrixColorFilter, created by concatenating a ColorMatrix to convert to greyscale and another to modulate by the color, like this:

public static Drawable getImageFiltered(Context context, int res, int color) {
    // load image:
    Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), res);
    BitmapDrawable drawable = new BitmapDrawable(context.getResources(), bitmap);

    // create matrix to convert to greyscale:
    ColorMatrix greyscaleMatrix = new ColorMatrix();
    greyscaleMatrix.setSaturation(0);

    // create matrix to colorize and apply transluceny:
    ColorMatrix colorizeMatrix = new ColorMatrix();
    color = context.getResources().getColor(color);
    colorizeMatrix.setScale(Color.red(color) / 255.0f,
            Color.green(color) / 255.0f,
            Color.blue(color) / 255.0f,
            Color.alpha(color) / 255.0f); // <- try setting this to 1.0f for no translucency

    // concatenate the two matrices and create a ColorMatrixColorFilter from the result:
    greyscaleMatrix.postConcat(colorizeMatrix);
    ColorMatrixColorFilter filter = new ColorMatrixColorFilter(greyscaleMatrix);

    // apply the filter:
    drawable.setColorFilter(filter);
    return drawable;
}

Also it is necessary to make the image translucent? There doesn't seem to be anything showing through from behind it other than a black background.