[go: up one dir, main page]

Showing posts with label ColorMatrix. Show all posts
Showing posts with label ColorMatrix. Show all posts

Tuesday, November 17, 2015

Convert bitmap to grayscale using matrix and ColorMatrixColorFilter


This example show how to convert bitmap to grayscale using matrix and ColorMatrixColorFilter. Once photo loaded, touch on the ImageView will show the original photo, touch release to show the grayscale photo.


MainActivity.java
package com.blogspot.android_er.androidimage;

import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

import java.io.FileNotFoundException;

public class MainActivity extends AppCompatActivity {

    private static final int RQS_OPEN = 1;
    Button buttonOpen;
    ImageView imageView;

    Bitmap bmNormal, bmGrayScale;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        buttonOpen = (Button) findViewById(R.id.opendocument);
        buttonOpen.setOnClickListener(buttonOpenOnClickListener);

        imageView = (ImageView)findViewById(R.id.image);
        imageView.setOnTouchListener(imageViewOnTouchListener);
    }

    View.OnTouchListener imageViewOnTouchListener = new View.OnTouchListener(){
        @Override
        public boolean onTouch(View v, MotionEvent event) {

            if(event.getAction() == MotionEvent.ACTION_DOWN){
                //user touch on ImageView
                if(bmNormal != null){
                    imageView.setImageBitmap(bmNormal);
                }
            }else if(event.getAction() == MotionEvent.ACTION_UP){
                //user release touch on ImageView
                if(bmGrayScale != null){
                    imageView.setImageBitmap(bmGrayScale);
                }
            }
            return true;
        }
    };

    View.OnClickListener buttonOpenOnClickListener =
            new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Intent intent = new Intent();
                    intent.setAction(Intent.ACTION_OPEN_DOCUMENT);
                    intent.addCategory(Intent.CATEGORY_OPENABLE);
                    intent.setType("image/*");
                    startActivityForResult(intent, RQS_OPEN);
                }
            };

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (resultCode == RESULT_OK && requestCode == RQS_OPEN) {
            Uri dataUri = data.getData();
            int w = imageView.getWidth();
            int h = imageView.getHeight();
            Toast.makeText(MainActivity.this,
                    dataUri.toString() + "\n" +
                    w + " : " + h,
                    Toast.LENGTH_LONG).show();

            try {
                bmNormal = bmGrayScale = null;
                bmNormal = loadScaledBitmap(dataUri, w, h);
                bmGrayScale = getGrayscale(bmNormal);
                imageView.setImageBitmap(bmGrayScale);
                Toast.makeText(MainActivity.this,
                        bmGrayScale.getWidth() + " x " + bmGrayScale.getHeight(),
                        Toast.LENGTH_SHORT).show();
            } catch (FileNotFoundException e) {
                e.printStackTrace();
                Toast.makeText(MainActivity.this, e.getMessage(), Toast.LENGTH_LONG).show();
            }
        }
    }

    private Bitmap getGrayscale(Bitmap src){

        //Custom color matrix to convert to GrayScale
        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(
                src.getWidth(),
                src.getHeight(),
                src.getConfig());

        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;
    }

    /*
    reference:
    Load scaled bitmap
    http://android-er.blogspot.com/2013/08/load-scaled-bitmap.html
     */
    private Bitmap loadScaledBitmap(Uri src, int req_w, int req_h) throws FileNotFoundException {

        Bitmap bm = null;

        // First decode with inJustDecodeBounds=true to check dimensions
        final BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeStream(getBaseContext().getContentResolver().openInputStream(src),
                null, options);

        // Calculate inSampleSize
        options.inSampleSize = calculateInSampleSize(options, req_w, req_h);

        // Decode bitmap with inSampleSize set
        options.inJustDecodeBounds = false;
        bm = BitmapFactory.decodeStream(
                getBaseContext().getContentResolver().openInputStream(src), null, options);

        return bm;
    }

    public int calculateInSampleSize(BitmapFactory.Options options,
                                     int reqWidth, int reqHeight) {
        // Raw height and width of image
        final int height = options.outHeight;
        final int width = options.outWidth;
        int inSampleSize = 1;

        if (height > reqHeight || width > reqWidth) {

            // Calculate ratios of height and width to requested height and
            // width
            final int heightRatio = Math.round((float) height
                    / (float) reqHeight);
            final int widthRatio = Math.round((float) width / (float) reqWidth);

            // Choose the smallest ratio as inSampleSize value, this will
            // guarantee
            // a final image with both dimensions larger than or equal to the
            // requested height and width.
            inSampleSize = heightRatio < widthRatio ? heightRatio : widthRatio;
        }

        return inSampleSize;
    }
}


layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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:padding="5dp"
    android:background="@android:color/black"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <Button
        android:id="@+id/opendocument"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Open Document of Image/Video" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

Tuesday, February 24, 2015

Invert bitmap using ColorMatrix

Example to create inverted bitmap using ColorMatrix.


package com.example.androidimageview;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {

 TextView textTitle;
 ImageView image1, image2, image3, image4;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  textTitle = (TextView) findViewById(R.id.title);
  image1 = (ImageView) findViewById(R.id.image1);
  image2 = (ImageView) findViewById(R.id.image2);
  image3 = (ImageView) findViewById(R.id.image3);
  image4 = (ImageView) findViewById(R.id.image4);

  Bitmap bm = BitmapFactory.decodeResource(getResources(),
    R.drawable.ic_launcher);

  image1.setImageBitmap(bm);
  
  //invert
  image2.setImageBitmap(createInvertedBitmap(bm));
  image3.setImageBitmap(
    createInvertedBitmap(bm));
  
  //invert and invert
  image4.setImageBitmap(
    createInvertedBitmap(createInvertedBitmap(bm)));

 }

 private Bitmap createInvertedBitmap(Bitmap src) {
  ColorMatrix colorMatrix_Inverted = 
   new ColorMatrix(new float[] {
     -1,  0,  0,  0, 255,
     0, -1,  0,  0, 255,
     0,  0, -1,  0, 255,
     0,  0,  0,  1,   0});

  ColorFilter ColorFilter_Sepia = new ColorMatrixColorFilter(
    colorMatrix_Inverted);

  Bitmap bitmap = Bitmap.createBitmap(src.getWidth(), src.getHeight(),
    Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);

  Paint paint = new Paint();

  paint.setColorFilter(ColorFilter_Sepia);
  canvas.drawBitmap(src, 0, 0, paint);

  return bitmap;
 }

}

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.androidimageview.MainActivity" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    
    <ImageView
        android:id="@+id/image2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/image3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
    
    <ImageView
        android:id="@+id/image4"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

Monday, February 23, 2015

Create Sepia bitmap using ColorMatrix

Example to create spedia bitmap uwing ColorMatrix.


package com.example.androidimageview;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {

 TextView textTitle;
 ImageView image1, image2, image3;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  textTitle = (TextView) findViewById(R.id.title);
  image1 = (ImageView) findViewById(R.id.image1);
  image2 = (ImageView) findViewById(R.id.image2);
  image3 = (ImageView) findViewById(R.id.image3);

  Bitmap bm = BitmapFactory.decodeResource(getResources(),
    R.drawable.ic_launcher);

  image1.setImageBitmap(bm);
  image2.setImageBitmap(createSepia(bm));
  image3.setImageBitmap(createSepia(bm));

 }

 private Bitmap createSepia(Bitmap src) {
  ColorMatrix colorMatrix_Sepia = new ColorMatrix();
  colorMatrix_Sepia.setSaturation(0);
  
  ColorMatrix colorScale = new ColorMatrix();
  colorScale.setScale(1, 1, 0.8f, 1);
  
  colorMatrix_Sepia.postConcat(colorScale);
  
  ColorFilter ColorFilter_Sepia = new ColorMatrixColorFilter(
    colorMatrix_Sepia);

  Bitmap bitmap = Bitmap.createBitmap(src.getWidth(), src.getHeight(),
    Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);

  Paint paint = new Paint();

  paint.setColorFilter(ColorFilter_Sepia);
  canvas.drawBitmap(src, 0, 0, paint);

  return bitmap;
 }

}

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.androidimageview.MainActivity" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    
    <ImageView
        android:id="@+id/image2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/image3"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Create grayscale bitmap using ColorMatrix

Example to create grayscale bitmap uwing ColorMatrix.


package com.example.androidimageview;

import android.support.v7.app.ActionBarActivity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.os.Bundle;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends ActionBarActivity {

 TextView textTitle;
 ImageView image1, image2, image3;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  textTitle = (TextView) findViewById(R.id.title);
  image1 = (ImageView) findViewById(R.id.image1);
  image2 = (ImageView) findViewById(R.id.image2);
  image3 = (ImageView) findViewById(R.id.image3);

  Bitmap bm = BitmapFactory.decodeResource(getResources(),
    R.drawable.ic_launcher);

  image1.setImageBitmap(bm);
  image2.setImageBitmap(createGrayscale(bm));
  image3.setImageBitmap(createGrayscale(bm));

 }

 private Bitmap createGrayscale(Bitmap src) {
  ColorMatrix colorMatrix_Sat0 = new ColorMatrix();
  colorMatrix_Sat0.setSaturation(0);
  ColorFilter ColorFilter_Grayscale = new ColorMatrixColorFilter(
    colorMatrix_Sat0);

  Bitmap bitmap = Bitmap.createBitmap(src.getWidth(), src.getHeight(),
    Bitmap.Config.ARGB_8888);
  Canvas canvas = new Canvas(bitmap);

  Paint paint = new Paint();

  paint.setColorFilter(ColorFilter_Grayscale);
  canvas.drawBitmap(src, 0, 0, paint);

  return bitmap;
 }

}

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.androidimageview.MainActivity" >

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:autoLink="web"
        android:text="http://android-er.blogspot.com/"
        android:textStyle="bold" />

    <ImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    
    <ImageView
        android:id="@+id/image2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:id="@+id/image3"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>