Sunday, February 24, 2013

Convert ImageView to black and white image using ColorFilter

The exercise "Example to apply ColorFilter on ImageView" demonstrate the basic operation of ColorFilter. By apply a suitable ColorMatrix, it's easy to convert a color image to black and white.

Convert ImageView to black and white image using ColorFilter

It's assumed that all red, green and blue have the same level, and equal to the average of the original red, green and blue. And user can adjust the brightness by varying the fifth element of each color in the ColorMatrix.

package com.example.androidcolorfilter;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.ColorFilter;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.PorterDuff;
import android.widget.ImageView;
import android.widget.SeekBar;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.widget.TextView;

public class MainActivity extends Activity {

ImageView imageView;
SeekBar brightnessBar;
TextView brightnessInfo;

PorterDuff.Mode[] optMode = PorterDuff.Mode.values();

String[] optModeName;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

imageView = (ImageView)findViewById(R.id.iv);
brightnessBar = (SeekBar)findViewById(R.id.bar_brightness);
brightnessInfo = (TextView)findViewById(R.id.brightness_info);

brightnessBar.setOnSeekBarChangeListener(brightnessBarChangeListener);

setBlackAndWhite(imageView);


}

OnSeekBarChangeListener brightnessBarChangeListener
= new OnSeekBarChangeListener(){

@Override
public void onProgressChanged(SeekBar arg0, int arg1, boolean arg2) {
setBlackAndWhite(imageView);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {
// TODO Auto-generated method stub

}
};


private void setBlackAndWhite(ImageView iv){

float brightness = (float)(brightnessBar.getProgress() - 255);

float[] colorMatrix = {
0.33f, 0.33f, 0.33f, 0, brightness, //red
0.33f, 0.33f, 0.33f, 0, brightness, //green
0.33f, 0.33f, 0.33f, 0, brightness, //blue
0, 0, 0, 1, 0 //alpha
};

ColorFilter colorFilter = new ColorMatrixColorFilter(colorMatrix);
iv.setColorFilter(colorFilter);

brightnessInfo.setText(String.valueOf(brightness));
}

}


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Brightness"/>

<SeekBar
android:id="@+id/bar_brightness"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="512"
android:progress="255"/>

<TextView
android:id="@+id/brightness_info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Brightness"/>

</LinearLayout>


download filesDownload the files.