Convert bitmap from color to GrayScale using ColorMatrixColorFilter

Last article "Convert bitmap from color to GrayScale" by calculation. It's another approach using ColorMatrixColorFilter.

ColorMatrix is a 5x4 matrix for transforming the color+alpha components of a Bitmap. The method setSaturation() set the matrix to affect the saturation of colors. A value of 0 maps the color to gray-scale.

ColorMatrixColorFilter create a colorfilter that transforms colors through a 4x5 color matrix.

In the sample code below, getGrayscale_ColorMatrixColorFilter() method use ColorMatrixColorFilter with ColorMatrix of Saturation 0, to convert color bitmap to gray scale.

We can also create our own matrix for ColorMatrixColorFilter to convert transform bitmap color+alpha, as shown in getGrayscale_custom_matrix() method.

package com.AndroidBitmapProcessing;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.os.Bundle;
import android.widget.ImageView;

public class AndroidBitmapProcessingActivity extends Activity {
 
 ImageView imageView_Source, imageView_Gray, imageView_Gray2;
 Bitmap bitmap_Source, bitmap_Dest;
 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        imageView_Source = (ImageView)findViewById(R.id.source);
        imageView_Gray = (ImageView)findViewById(R.id.imageGray);
        imageView_Gray2 = (ImageView)findViewById(R.id.imageGray2);
        
        bitmap_Source = BitmapFactory.decodeResource(getResources(), R.drawable.testpicture);
        imageView_Gray.setImageBitmap(getGrayscale_ColorMatrixColorFilter(bitmap_Source));
        imageView_Gray2.setImageBitmap(getGrayscale_custom_matrix(bitmap_Source));
    }
    
    private Bitmap getGrayscale_ColorMatrixColorFilter(Bitmap src){
     int width = src.getWidth();
     int height = src.getHeight();

     Bitmap dest = Bitmap.createBitmap(width, height,
       Bitmap.Config.RGB_565);
     
     Canvas canvas = new Canvas(dest);
     Paint paint = new Paint();
     ColorMatrix colorMatrix = new ColorMatrix();
     colorMatrix.setSaturation(0); //value of 0 maps the color to gray-scale
     ColorMatrixColorFilter filter = new ColorMatrixColorFilter(colorMatrix);
     paint.setColorFilter(filter); 
     canvas.drawBitmap(src, 0, 0, paint);
     
     return dest;
    }
    
    private Bitmap getGrayscale_custom_matrix(Bitmap src){
     int width = src.getWidth();
     int height = src.getHeight();
     
     //Custom color matrix
     float[] matrix = new float[]{
       0.3f, 0.59f, 0.11f, 0, 0, 
                0.3f, 0.59f, 0.11f, 0, 0, 
                0.3f, 0.59f, 0.11f, 0, 0, 
                0, 0, 0, 1, 0,};

     Bitmap dest = Bitmap.createBitmap(width, height,
       Bitmap.Config.RGB_565);
     
     Canvas canvas = new Canvas(dest);
     Paint paint = new Paint();
     ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix);
     paint.setColorFilter(filter); 
     canvas.drawBitmap(src, 0, 0, paint);
          
     return dest;
    }

}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />
    <ScrollView 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <LinearLayout 
            android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:orientation="vertical" >
         <TextView
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="Original" />
      <ImageView
          android:id="@+id/source" 
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" 
          android:src="@drawable/testpicture"/>
      <TextView
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="Convert to Gray Scale using ColorMatrixColorFilter with colorMatrix.setSaturation(0)" />
      <ImageView
          android:id="@+id/imageGray" 
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />
      <TextView
             android:layout_width="fill_parent"
             android:layout_height="wrap_content"
             android:text="Convert to Gray Scale using ColorMatrixColorFilter with custom matrix" />
      <ImageView
          android:id="@+id/imageGray2" 
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" />
     </LinearLayout>
 </ScrollView>
</LinearLayout>

Tweet