Android Image Effects Tutorial

Advertisements


Android allows you to manipulate images by adding different kinds of effects on the images. You can easily apply image processing techniques to add certain kinds of effects on images. The effects could be brightness,darkness, grayscale conversion e.t.c.

Android provides Bitmap class to handle images. This can be found under android.graphics.bitmap. There are many ways through which you can instantiate bitmap. We are creating a bitmap of image from the imageView.

private Bitmap bmp;
private ImageView img;
img = (ImageView)findViewById(R.id.imageView1);
BitmapDrawable  abmp = (BitmapDrawable)img.getDrawable();

Now we will create bitmap by calling getBitmap() function of BitmapDrawable class. Its syntax is given below:

bmp = abmp.getBitmap();

An image is nothing but a two dimensional matrix. Same way you will handle a bitmap. An image consist of pixels. So you will get pixels from this bitmap and apply processing to it. Its syntax is as follows:

for(int i=0; i<bmp.getWidth(); i++){
   for(int j=0; j<bmp.getHeight(); j++){
      int p = bmp.getPixel(i, j);
   }
}

The getWidth() and getHeight() functions returns the height and width of the matrix. The getPixel() method returns the pixel at the specified index. Once you got the pixel, you can easily manipulate it according to your needs.

Apart from these methods, there are other methods that helps us manipulate images more better.

Sr.NoMethod & description
1copy(Bitmap.Config config, boolean isMutable)
This method copy this bitmap's pixels into the new bitmap
2createBitmap(DisplayMetrics display, int width, int height, Bitmap.Config config)
Returns a mutable bitmap with the specified width and height
3createBitmap(int width, int height, Bitmap.Config config)
Returns a mutable bitmap with the specified width and height
4createBitmap(Bitmap src)
Returns an immutable bitmap from the source bitmap
5extractAlpha()
Returns a new bitmap that captures the alpha values of the original
6getConfig()
This mehtod eturn that config, otherwise return null
7getDensity()
Returns the density for this bitmap
8getRowBytes()
Return the number of bytes between rows in the bitmap's pixels
9setPixel(int x, int y, int color)
Write the specified Color into the bitmap (assuming it is mutable) at the x,y coordinate
10setDensity(int density)
This method specifies the density for this bitmap

Example

The below example demonstrates some of the image effects on the bitmap. It crates a basic application that allows you to convert the picture into grayscale and much more.

To experiment with this example , you need to run this on an actual device.

StepsDescription
1You will use Eclipse IDE to create an Android application and name it as ImageEffects under a package com.example.imageeffects. While creating this project, make sure you Target SDK and Compile With at the latest version of Android SDK to use higher levels of APIs.
2Modify src/MainActivity.java file to add necessary code.
3Modify the res/layout/activity_main to add respective XML components
4Modify the res/values/string.xml to add necessary string components
5Run the application and choose a running android device and install the application on it and verify the results

Following is the content of the modifed main activity file src/com.example.imageeffects/MainActivity.java.

package com.example.imageeffects;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends Activity {

   private ImageView img;
   private Bitmap bmp;
   private Bitmap operation;

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

   img = (ImageView)findViewById(R.id.imageView1);
   BitmapDrawable  abmp = (BitmapDrawable)img.getDrawable();
   bmp = abmp.getBitmap();

   }

   public void gray(View view){
      operation= Bitmap.createBitmap(bmp.getWidth(),
      bmp.getHeight(),bmp.getConfig());

      double red = 0.33;
      double green = 0.59;
      double blue = 0.11;

   for(int i=0; i<bmp.getWidth(); i++){
      for(int j=0; j<bmp.getHeight(); j++){
         int p = bmp.getPixel(i, j);
         int r = Color.red(p);
         int g = Color.green(p);
         int b = Color.blue(p);

         r = (int) red * r;
         g = (int) green * g;
         b = (int) blue * b;

         operation.setPixel(i, j, Color.argb(Color.alpha(p), r, g, b));
         }
      }
      img.setImageBitmap(operation);
   }

   public void bright(View view){
      operation= Bitmap.createBitmap(bmp.getWidth(),
      bmp.getHeight(),bmp.getConfig());


      for(int i=0; i<bmp.getWidth(); i++){
         for(int j=0; j<bmp.getHeight(); j++){
            int p = bmp.getPixel(i, j);
            int r = Color.red(p);
            int g = Color.green(p);
            int b = Color.blue(p);
            int alpha = Color.alpha(p);

            r = 100  +  r;
            g = 100  + g;
            b = 100  + b;
            alpha = 100 + alpha;

            operation.setPixel(i, j, Color.argb(alpha, r, g, b));
         }
      }
      img.setImageBitmap(operation);
   }

   public void dark(View view){
      operation= Bitmap.createBitmap(bmp.getWidth(),
      bmp.getHeight(),bmp.getConfig());


      for(int i=0; i<bmp.getWidth(); i++){
         for(int j=0; j<bmp.getHeight(); j++){
            int p = bmp.getPixel(i, j);
            int r = Color.red(p);
            int g = Color.green(p);
            int b = Color.blue(p);
            int alpha = Color.alpha(p);

            r =  r - 50;
            g =  g - 50;
            b =  b - 50;
            alpha = alpha -50;
            operation.setPixel(i, j, Color.argb(Color.alpha(p), r, g, b));


          }
       }

      img.setImageBitmap(operation);
   }

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.main, menu);
      return true;
   }

}

Following is the modified content of the xml res/layout/activity_main.xml.

<RelativeLayout 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: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=".MainActivity" >

   <Button
      android:id="@+id/button2"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignBaseline="@+id/button1"
      android:layout_alignBottom="@+id/button1"
      android:layout_alignParentRight="true"
      android:layout_marginRight="19dp"
      android:onClick="dark"
      android:text="@string/dark" />

   <Button
      android:id="@+id/button1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_marginBottom="87dp"
      android:layout_marginRight="17dp"
      android:layout_toLeftOf="@+id/button3"
      android:onClick="gray"
      android:text="@string/gray" />

   <Button
      android:id="@+id/button3"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignBaseline="@+id/button2"
      android:layout_alignBottom="@+id/button2"
      android:layout_centerHorizontal="true"
      android:onClick="bright"
      android:text="@string/bright" />

   <ImageView
      android:id="@+id/imageView1"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:layout_centerHorizontal="true"
      android:layout_marginTop="114dp"
      android:src="@drawable/ic_launcher" />

</RelativeLayout>

Following is the content of the res/values/string.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>

   <string name="app_name">ImageEffects</string>
   <string name="action_settings">Settings</string>
   <string name="hello_world">Hello world!</string>
   <string name="gray">Gray</string>
   <string name="bright">bright</string>
   <string name="dark">dark</string>

</resources>

Following is the content of AndroidManifest.xml file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.example.imageeffects"
   android:versionCode="1"
   android:versionName="1.0" >

   <uses-sdk
   android:minSdkVersion="8"
   android:targetSdkVersion="17" />

   <application
      android:allowBackup="true"
      android:icon="@drawable/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      <activity
         android:name="com.example.imageeffects.MainActivity"
         android:label="@string/app_name" >
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
      </activity>
   </application>

</manifest>

Let's try to run our Image Effects application we just modified. I assume you had created your AVD while doing environment setup. To run the app from Eclipse, open one of your project's activity files and click Run Eclipse Run Icon icon from the toolbar. Eclipse installs the app on your AVD and starts it and if everything is fine with your setup and application, it will display following Emulator window:

Anroid Image Effects Tutorial

Now if you will look at your device screen , you will see the an image of android along with three buttons.

Now just select the gray button that will convert your image into grayscale and will update the UI. It is shown below:

Anroid Image Effects Tutorial

Now tap on the bright button, that will add some value to each pixel of the image and thus makes an illusion of brightness. It is shown below:

Anroid Image Effects Tutorial

Now tap on the dark button, that will subtract some value to each pixel of the image and thus makes an illusion of dark. It is shown below:

Anroid Image Effects Tutorial

Advertisements
Advertisements