Android and Java solution: Android Image Effects Tutorial

By: Unknown 0 comments

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

Steps	Description
1	You 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.
2	Modify src/MainActivity.java file to add necessary code.
3	Modify the res/layout/activity_main to add respective XML components
4	Modify the res/values/string.xml to add necessary string components
5	Run 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 filesrc/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 AVDwhile 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: