Gaussian Blur the image(Bitmap) in ImageView (Android)

Before Gaussian Blur

After Gaussian Blur

Create new Android Project

Project Name: PlayingwithBitmaps

Build Target: Android 2.3.3   //or greater than that

Application Name: PlayingwithBitmaps

Package Name: com.hamad.playingwithbitmaps

Create Activity: Main

Min SDK: 10 // or greater than that

  1.create main layout:

• One image view to display the image.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    android:id="@+id/rlMain" >

    <ImageView
        android:id="@+id/imViewAndroid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/beautiful" />

</RelativeLayout>

 2. code of main activity:

package com.shaikhhamadali.blogspot.playingwithbitmaps;

import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.widget.ImageView;

public class Main extends Activity {
 ImageView imViewAndroid;
 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  imViewAndroid = (ImageView) findViewById(R.id.imViewAndroid);
  imViewAndroid.setImageBitmap(applyGaussianBlur(BitmapFactory.decodeResource(getResources(), R.drawable.beautiful)));
 }
 public static Bitmap applyGaussianBlur(Bitmap src) {
  //set gaussian blur configuration
  double[][] GaussianBlurConfig = new double[][] {
    { 1, 2, 1 },
    { 2, 4, 2 },
    { 1, 2, 1 }
  };
  // create instance of Convolution matrix
  ConvolutionMatrix convMatrix = new ConvolutionMatrix(3);
  // Apply Configuration
  convMatrix.applyConfig(GaussianBlurConfig);
  convMatrix.Factor = 16;
  convMatrix.Offset = 0;
  //return out put bitmap
  return ConvolutionMatrix.computeConvolution3x3(src, convMatrix);
 }
}

- code of ConvolutionMatrix Class:

package com.shaikhhamadali.blogspot.playingwithbitmaps;

import android.graphics.Bitmap;
import android.graphics.Color;

public class ConvolutionMatrix {
  public static final int SIZE = 3;
  
     public double[][] Matrix;
     public double Factor = 1;
     public double Offset = 1;
  
    //Constructor with argument of size
     public ConvolutionMatrix(int size) {
         Matrix = new double[size][size];
     }
  
     public void setAll(double value) {
         for (int x = 0; x < SIZE; ++x) {
             for (int y = 0; y < SIZE; ++y) {
                 Matrix[x][y] = value;
             }
         }
     }
  
     public void applyConfig(double[][] config) {
         for(int x = 0; x < SIZE; ++x) {
             for(int y = 0; y < SIZE; ++y) {
                 Matrix[x][y] = config[x][y];
             }
         }
     }
  
     public static Bitmap computeConvolution3x3(Bitmap src, ConvolutionMatrix matrix) {
         int width = src.getWidth();
         int height = src.getHeight();
         Bitmap result = Bitmap.createBitmap(width, height, src.getConfig());
  
         int A, R, G, B;
         int sumR, sumG, sumB;
         int[][] pixels = new int[SIZE][SIZE];
  
         for(int y = 0; y < height - 2; ++y) {
             for(int x = 0; x < width - 2; ++x) {
  
                 // get pixel matrix
                 for(int i = 0; i < SIZE; ++i) {
                     for(int j = 0; j < SIZE; ++j) {
                         pixels[i][j] = src.getPixel(x + i, y + j);
                     }
                 }
  
                 // get alpha of center pixel
                 A = Color.alpha(pixels[1][1]);
  
                 // init color sum
                 sumR = sumG = sumB = 0;
  
                 // get sum of RGB on matrix
                 for(int i = 0; i < SIZE; ++i) {
                     for(int j = 0; j < SIZE; ++j) {
                         sumR += (Color.red(pixels[i][j]) * matrix.Matrix[i][j]);
                         sumG += (Color.green(pixels[i][j]) * matrix.Matrix[i][j]);
                         sumB += (Color.blue(pixels[i][j]) * matrix.Matrix[i][j]);
                     }
                 }
  
                 // get final Red
                 R = (int)(sumR / matrix.Factor + matrix.Offset);
                 if(R < 0) { R = 0; }
                 else if(R > 255) { R = 255; }
  
                 // get final Green
                 G = (int)(sumG / matrix.Factor + matrix.Offset);
                 if(G < 0) { G = 0; }
                 else if(G > 255) { G = 255; }
  
                 // get final Blue
                 B = (int)(sumB / matrix.Factor + matrix.Offset);
                 if(B < 0) { B = 0; }
                 else if(B > 255) { B = 255; }
  
                 // apply new pixel
                 result.setPixel(x + 1, y + 1, Color.argb(A, R, G, B));
             }
         }
  
         // final image
         return result;
     }
 }

  3. note that:

• You can find more references about blurry effect over Internet. I won’t talk about them here!
• With the help of this,applyGaussianBlur() method you can apply blurry effect to the image on click,on action_down,on the fly etc.

  4. conclusion:

• Some deep information about Gaussian Blur.
• Know how to apply Gaussian Blur to an image bitmap from drawables.

  5. About the post:

 “Gaussian Blur” is very famous algorithm for blurry effect.
It uses the concepts of Convolution Filtering.
You might need to refer to my previous article on Convolution Matrix.
The matrix used in Gaussian Blur is
[ 1 - 2 - 1][ 2 - 4 - 2][ 1 - 2 - 1]The factor is 16 and with offset 0.

•  The code seems to explain itself due to comments, and is very easy to understand.
•  Don’t mind to write a comment whatever you like to ask, to know,to suggest or recommend.
•  Hope you enjoy it!

6. Source Code:

        you can download the source code here

Cheers,

Hamad Ali Shaikh