Adding Effects to Image in Android Using Android Studio

Introduction

 
You must have seen the various effects we can add to an image, like adding toning effects. These effects make the image look more beautiful.
 
For this, you basically need to change the alpha value of the image, the depth and composition of red, blue and green colors in the image.
 
This article shows how to add these tone effects. I will be using my phone gallery to select the image and add five effects on it.
 
Step 1
 
Open "activity_main" and add the following code to it:
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:paddingLeft="@dimen/activity_horizontal_margin"  
  6.     android:paddingRight="@dimen/activity_horizontal_margin"  
  7.     android:paddingTop="@dimen/activity_vertical_margin"  
  8.     android:paddingBottom="@dimen/activity_vertical_margin"  
  9.     tools:context=".MainActivity"  
  10.     android:orientation="vertical">  
  11.     <Button  
  12.         android:layout_width="fill_parent"  
  13.         android:layout_height="wrap_content"  
  14.         android:text="Select a photo"  
  15.         android:id="@+id/gallery"/>  
  16.     <ImageView  
  17.         android:layout_height="300dp"  
  18.         android:layout_width="fill_parent"  
  19.         android:id="@+id/original_image"  
  20.         android:layout_marginTop="20dp"/>  
  21.     <Button  
  22.         android:text="Add Effects"  
  23.         android:id="@+id/effects_btn"  
  24.         android:layout_height="wrap_content"  
  25.         android:layout_width="wrap_content"  
  26.         android:paddingLeft="10dp"  
  27.         android:paddingRight="10dp"  
  28.         android:layout_marginTop="10dp"/>  
  29. </LinearLayout>  
The layout looks like:
 
im1f.jpg
 
Step 2
 
Make a new layout file to display the list of effects that can be added to an image.
 
In the Layout select "New" -> "Layout resource file". Name it "list_of_effects" and add the following code to it:
  1. <TextView xmlns:android="http://schemas.android.com/apk/res/android"  
  2.           android:layout_width="fill_parent"  
  3.           android:layout_height="fill_parent"  
  4.           android:padding="10dp"  
  5.           android:textSize="20sp"  
  6.           android:background="#cd6959">  
  7. </TextView> 
Step 3
 
Make a new layout file to display the image with effects added on it.
 
In the Layout select "New" -> "Layout resource file". Name it "final_view" and add the following code to it:
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.               android:orientation="vertical"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent">  
  5.     <ImageView  
  6.         android:layout_width="fill_parent"  
  7.         android:layout_height="fill_parent"  
  8.         android:id="@+id/view"  
  9.         android:layout_marginLeft="20dp"  
  10.         android:layout_marginRight="20dp"  
  11.         android:layout_marginTop="20dp"  
  12.         android:layout_marginBottom="20dp"  
  13.         />  
  14. </LinearLayout>  
Step 4
 
Open "MainActivity" and add the following code to it:
  1. package com.chhavi.imageeffectfinal;  
  2.    
  3. import android.content.Intent;  
  4. import android.database.Cursor;  
  5. import android.graphics.Bitmap;  
  6. import android.graphics.BitmapFactory;  
  7. import android.net.Uri;  
  8. import android.os.Bundle;  
  9. import android.app.Activity;  
  10. import android.provider.MediaStore;  
  11. import android.util.Log;  
  12. import android.view.Menu;  
  13. import android.view.View;  
  14. import android.widget.Button;  
  15. import android.widget.ImageView;  
  16.    
  17. public class MainActivity extends Activity {  
  18.    
  19.     Button gallery;  
  20.     Bitmap image;  
  21.     ImageView original;  
  22.     Button effects;  
  23.     String picturePath;  
  24.    
  25.     @Override  
  26.     protected void onCreate(Bundle savedInstanceState) {  
  27.         super.onCreate(savedInstanceState);  
  28.         setContentView(R.layout.activity_main);  
  29.    
  30.         original=(ImageView)findViewById(R.id.original_image);  
  31.         effects=(Button)findViewById(R.id.effects_btn);  
  32.    
  33.         gallery=(Button)findViewById(R.id.gallery);  
  34.         gallery.setOnClickListener(new View.OnClickListener() {  
  35.             @Override  
  36.             public void onClick(View v) {  
  37.    
  38.                 Intent intent = new   Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);  
  39.                 startActivityForResult(intent, 1);  
  40.             }  
  41.         });  
  42.    
  43.         effects.setOnClickListener(new View.OnClickListener() {  
  44.             @Override  
  45.             public void onClick(View v) {  
  46.    
  47.                 Intent i=new Intent(MainActivity.this,ListOfEffects.class);  
  48.                 i.putExtra("image thumbnail path",picturePath);  
  49.                 startActivity(i);  
  50.             }  
  51.         });  
  52.     }  
  53.     @Override  
  54.     protected void onActivityResult(int requestCode, int resultCode, Intent data) {  
  55.         super.onActivityResult(requestCode, resultCode, data);  
  56.    
  57.         if(resultCode==RESULT_OK)  
  58.         {  
  59.             Uri selectedImage = data.getData();  
  60.             String[] filePath = { MediaStore.Images.Media.DATA };  
  61.             Cursor c = getContentResolver().query(selectedImage,filePath, nullnullnull);  
  62.             c.moveToFirst();  
  63.             int columnIndex = c.getColumnIndex(filePath[0]);  
  64.              picturePath = c.getString(columnIndex);  
  65.             c.close();  
  66.             image = (BitmapFactory.decodeFile(picturePath));  
  67.             Log.i("path of image from gallery...............", picturePath + "");  
  68.             original.setImageBitmap(image);  
  69.         }  
  70.     }  
  71.    
  72.     @Override  
  73.     public boolean onCreateOptionsMenu(Menu menu) {  
  74.         // Inflate the menu; this adds items to the action bar if it is present.  
  75.         getMenuInflater().inflate(R.menu.main, menu);  
  76.         return true;  
  77.     }     
  78. }
In the code above, we are opening the gallery of an Android phone. Users can select any image they want to. On the click of the button "Add Effects," a new activity will be loaded that will display the list of effects possible.
 
Step 5
 
Create a new class in the same package. Name it "ListOfEffects" and add the following code to it:
  1. package com.chhavi.imageeffectfinal;  
  2.    
  3. import android.app.Activity;  
  4. import android.app.ListActivity;  
  5. import android.content.Intent;  
  6. import android.os.Bundle;  
  7. import android.util.Log;  
  8. import android.view.View;  
  9. import android.widget.AdapterView;  
  10. import android.widget.ArrayAdapter;  
  11. import android.widget.ListView;  
  12. import java.util.ArrayList;  
  13.    
  14. public class ListOfEffects extends ListActivity  
  15. {  
  16.     ArrayList<String> effects= new ArrayList<String>();  
  17.     String path;  
  18.     String effect_choosen;  
  19.     @Override  
  20.     protected void onCreate(Bundle savedInstanceState) {  
  21.         super.onCreate(savedInstanceState);  
  22.    
  23.         Intent i=getIntent();  
  24.         path=i.getStringExtra("image thumbnail path");  
  25.         Log.i("path of file in list of effects......", path);  
  26.    
  27.         effects.add("Effect 1");  
  28.         effects.add("Effect 2");  
  29.         effects.add("Effect 3");  
  30.         effects.add("Effect 4");  
  31.         effects.add("Effect 5");  
  32.    
  33.         setListAdapter(new ArrayAdapter<String>(this, R.layout.list_of_effects,effects));  
  34.    
  35.         ListView listView = getListView();  
  36.         listView.setTextFilterEnabled(true);  
  37.    
  38.         listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {  
  39.             @Override  
  40.             public void onItemClick(AdapterView<?> parent, View view, int position, long id) {  
  41.                     //applyEffects(path);  
  42.                 effect_choosen=effects.get(position);  
  43.                 Log.i("Effect choosen................",effect_choosen);  
  44.                 applyEffects();  
  45.             }  
  46.         });  
  47.     }  
  48.     void applyEffects()  
  49.     {  
  50.         Intent i=new Intent(ListOfEffects.this, EffectAdded.class);  
  51.         i.putExtra("path",path);  
  52.         i.putExtra("effect",effect_choosen);  
  53.         startActivity(i);  
  54.     }  
  55. }  
This class displays the list of effects that can be added and loads another activity on item click.
 
Step 6
 
Create yet another class. Name it "EffectsAdded" and add the following code to it:
  1. package com.chhavi.imageeffectfinal;  
  2.    
  3. import android.app.Activity;  
  4. import android.content.Intent;  
  5. import android.graphics.Bitmap;  
  6. import android.graphics.BitmapFactory;  
  7. import android.graphics.BlurMaskFilter;  
  8. import android.graphics.Canvas;  
  9. import android.graphics.Color;  
  10. import android.graphics.Paint;  
  11. import android.graphics.PorterDuff;  
  12. import android.os.Bundle;  
  13. import android.util.Log;  
  14. import android.widget.ImageView;  
  15.    
  16. public class EffectAdded extends Activity {  
  17.     String path;  
  18.     String effect_choosen;  
  19.     ImageView changed;  
  20.     Bitmap out;  
  21.    
  22.     @Override  
  23.     protected void onCreate(Bundle savedInstanceState) {  
  24.         super.onCreate(savedInstanceState);  
  25.         setContentView(R.layout.final_view);  
  26.    
  27.         Intent i=getIntent();  
  28.         path=i.getStringExtra("path");  
  29.         effect_choosen=i.getStringExtra("effect");  
  30.    
  31.         changed=(ImageView)findViewById(R.id.view);  
  32.    
  33.         Log.i("path of file in effects added.....................", path);  
  34.         Log.i("effect chosen in effects added.....................", effect_choosen);  
  35.    
  36.         Bitmap thumbnail = (BitmapFactory.decodeFile(path));  
  37.    
  38.         if(effect_choosen.equalsIgnoreCase("Effect 1"))  
  39.         {  
  40.            out=addEffect(thumbnail,5,5.0,6.0,0.0);  //red,blue,no green  
  41.         }  
  42.         else if(effect_choosen.equalsIgnoreCase("Effect 2"))  
  43.         {  
  44.             out=addEffect(thumbnail,5,5.0,0.0,10.0);  //red,green,no blue  
  45.         }  
  46.         else if(effect_choosen.equalsIgnoreCase("Effect 3"))  
  47.         {  
  48.             out=addEffect(thumbnail,5,0.0,10.0,0.0);  //only green  
  49.         }  
  50.         else if(effect_choosen.equalsIgnoreCase("Effect 4"))  
  51.         {  
  52.             out=addEffect(thumbnail,15,5.0,0.0,10.0);  //red,green,no blue, depth increased  
  53.         }  
  54.         else if(effect_choosen.equalsIgnoreCase("Effect 5"))  
  55.         {  
  56.             out=addEffect(thumbnail,5,10.0,0.0,0.0);  //only red  
  57.         }  
  58.    
  59.         changed.setImageBitmap(out);  
  60.     }  
  61.    
  62.     public static Bitmap addEffect(Bitmap src, int depth, double red, double green, double blue) {  
  63.        
  64.         int width = src.getWidth();  
  65.         int height = src.getHeight();  
  66.        
  67.         Bitmap finalBitmap = Bitmap.createBitmap(width, height, src.getConfig());  
  68.        
  69.         final double grayScale_Red = 0.3;  
  70.         final double grayScale_Green = 0.59;  
  71.         final double grayScale_Blue = 0.11;  
  72.      
  73.         int channel_aplha, channel_red, channel_green, channel_blue;  
  74.         int pixel;  
  75.         
  76.         for(int x = 0; x < width; ++x) {  
  77.             for(int y = 0; y < height; ++y) {  
  78.                 
  79.                 pixel = src.getPixel(x, y);                 
  80.                 channel_aplha = Color.alpha(pixel);  
  81.                 channel_red = Color.red(pixel);  
  82.                 channel_green = Color.green(pixel);  
  83.                 channel_blue = Color.blue(pixel);  
  84.                 
  85.                 channel_blue = channel_green = channel_red = (int)(grayScale_Red * channel_red + grayScale_Green * channel_green + grayScale_Blue * channel_blue);  
  86.    
  87.                 channel_red += (depth * red);  
  88.                 if(channel_red > 255)  
  89.                 {  
  90.                     channel_red = 255;  
  91.                 }  
  92.                 channel_green += (depth * green);  
  93.                 if(channel_green > 255)  
  94.                 {  
  95.                     channel_green = 255;  
  96.                 }  
  97.                 channel_blue += (depth * blue);  
  98.                 if(channel_blue > 255)  
  99.                 {  
  100.                     channel_blue = 255;  
  101.                 }  
  102.                  
  103.                 finalBitmap.setPixel(x, y, Color.argb(channel_aplha, channel_red, channel_green, channel_blue));  
  104.             }  
  105.         }       
  106.         return finalBitmap;  
  107.     }  
  108. }  
In the code above, the "getWidth" and "getHeight" functions return the height and width of the current bitmap. We will need to add the effect we want to each and every pixel of the image. Nested "for" loops have been added to extract every pixel of the image.
 
The Color class defines methods for creating and converting color ints. Colors are represented as packed ints, made up of 4 bytes: alpha, red, green, blue. Each component is in the range 0-255 with 0 meaning no contribution for that component, and 255 meaning 100% contribution. "alpha", "red", "blue", "green" methods of Color class return the alpha component, red component, blue component and green component of a color int.
 
The "Color.argb" method returns a color-int from the alpha, red, green, blue components.
 
Finally, the changed bitmap is added to the image view.
 
Step 7
 
Add the following changes to "AndroidManifest":
  1. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     package="com.chhavi.imageeffectfinal"  
  3.     android:versionCode="1"  
  4.     android:versionName="1.0" >  
  5.    
  6.     <uses-sdk  
  7.         android:minSdkVersion="7"  
  8.         android:targetSdkVersion="16" />  
  9.    
  10.     <application  
  11.         android:allowBackup="true"  
  12.         android:icon="@drawable/ic_launcher"  
  13.         android:label="@string/app_name"  
  14.         android:theme="@style/AppTheme" >  
  15.         <activity  
  16.             android:name="com.chhavi.imageeffectfinal.MainActivity"  
  17.             android:label="@string/app_name" >  
  18.             <intent-filter>  
  19.                 <action android:name="android.intent.action.MAIN" />  
  20.    
  21.                 <category android:name="android.intent.category.LAUNCHER" />  
  22.             </intent-filter>  
  23.         </activity>  
  24.        
  25.         <activity android:name=".ListOfEffects"  
  26.                   android:label="Choose Effect"/>  
  27.    
  28.         <activity android:name=".EffectAdded"  
  29.                   android:label="Final Image"/>  
  30.     </application>  
  31.    
  32. </manifest>  
Output snapshots:
 
im2.jpg
 
Clicking on "Select a Photo" will open the gallery:
 
im3.jpg
 
Selecting a photo from the gallery:
 
im4.jpg
 
Clicking on "Add Effects":
 
im5.jpg
 
Effect 1:
 
im6.jpg
 
Effect 2:
 
im7.jpg
 
Effect 3:
 
im8.jpg
 
Effect 4:
 
im9.jpg
 
Effect 5:
 
im10.jpg
 

Summary

 
In this article, you learned to add various effects to an image in the gallery. You can further make more effects by changing the values of alpha, depth and red, green and blue components of the color int. 
 
Thank you...


Similar Articles