Thursday, September 27, 2012

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.

3 comments:

Drashti's said...

NOT AT ALL WORKING

Erik said...

hello Drashti Kapadia,

I test it again: Convert ImageView to black and white, and set brightness, using ColorFilter.

Unknown said...

I created a coded based on yours. It worked pretty fine. Thank you very much.