Adding Effects to Image in Android Using Android Studio

Chhavi Goel
Jul 12, 2013
52.2k
0
0
Article

Introduction

You must have seen the various effects we can add on 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 ir:

<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:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin"

tools:context=".MainActivity"

android:orientation="vertical">

<Button

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Select a photo"

android:id="@+id/gallery"/>

<ImageView

android:layout_height="300dp"

android:layout_width="fill_parent"

android:id="@+id/original_image"

android:layout_marginTop="20dp"/>

<Button

android:text="Add Effects"

android:id="@+id/effects_btn"

android:layout_height="wrap_content"

android:layout_width="wrap_content"

android:paddingLeft="10dp"

android:paddingRight="10dp"

android:layout_marginTop="10dp"/>

</LinearLayout>

The layout looks like:

Step 2:

Make a new layout file to display the list of effects that can be added on an image.

In the Layout select "New" -> "Layout resource file". Name it "list_of_effects" and add the following code to it:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:padding="10dp"

android:textSize="20sp"

android:background="#cd6959">

</TextView>

Step 3:

Make a new layout file to display the 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:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:id="@+id/view"

android:layout_marginLeft="20dp"

android:layout_marginRight="20dp"

android:layout_marginTop="20dp"

android:layout_marginBottom="20dp"

</LinearLayout>

Step 4:

Open "MainActivity" and add the following code to it:

package com.chhavi.imageeffectfinal;

import android.content.Intent;

import android.database.Cursor;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.net.Uri;

import android.os.Bundle;

import android.app.Activity;

import android.provider.MediaStore;

import android.util.Log;

import android.view.Menu;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

public class MainActivity extends Activity {

Button gallery;

Bitmap image;

ImageView original;

Button effects;

String picturePath;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

original=(ImageView)findViewById(R.id.original_image);

effects=(Button)findViewById(R.id.effects_btn);

gallery=(Button)findViewById(R.id.gallery);

gallery.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Intent intent = new Intent(Intent.ACTION_PICK,android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

startActivityForResult(intent, 1);

}

});

effects.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Intent i=new Intent(MainActivity.this,ListOfEffects.class);

i.putExtra("image thumbnail path",picturePath);

startActivity(i);

}

});

}

@Override

protected void onActivityResult(int requestCode, int resultCode, Intent data) {

super.onActivityResult(requestCode, resultCode, data);

if(resultCode==RESULT_OK)

{

Uri selectedImage = data.getData();

String[] filePath = { MediaStore.Images.Media.DATA };

Cursor c = getContentResolver().query(selectedImage,filePath, null, null, null);

c.moveToFirst();

int columnIndex = c.getColumnIndex(filePath[0]);

picturePath = c.getString(columnIndex);

c.close();

image = (BitmapFactory.decodeFile(picturePath));

Log.i("path of image from gallery...............", picturePath + "");

original.setImageBitmap(image);

}

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

}

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:

package com.chhavi.imageeffectfinal;

import android.app.Activity;

import android.app.ListActivity;

import android.content.Intent;

import android.os.Bundle;

import android.util.Log;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ArrayAdapter;

import android.widget.ListView;

import java.util.ArrayList;

public class ListOfEffects extends ListActivity

{

ArrayList<String> effects= new ArrayList<String>();

String path;

String effect_choosen;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

Intent i=getIntent();

path=i.getStringExtra("image thumbnail path");

Log.i("path of file in list of effects......", path);

effects.add("Effect 1");

effects.add("Effect 2");

effects.add("Effect 3");

effects.add("Effect 4");

effects.add("Effect 5");

setListAdapter(new ArrayAdapter<String>(this, R.layout.list_of_effects,effects));

ListView listView = getListView();

listView.setTextFilterEnabled(true);

listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

//applyEffects(path);

effect_choosen=effects.get(position);

Log.i("Effect choosen................",effect_choosen);

applyEffects();

}

});

}

void applyEffects()

{

Intent i=new Intent(ListOfEffects.this, EffectAdded.class);

i.putExtra("path",path);

i.putExtra("effect",effect_choosen);

startActivity(i);

}

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:

package com.chhavi.imageeffectfinal;

import android.app.Activity;

import android.content.Intent;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.BlurMaskFilter;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.PorterDuff;

import android.os.Bundle;

import android.util.Log;

import android.widget.ImageView;

public class EffectAdded extends Activity {

String path;

String effect_choosen;

ImageView changed;

Bitmap out;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.final_view);

Intent i=getIntent();

path=i.getStringExtra("path");

effect_choosen=i.getStringExtra("effect");

changed=(ImageView)findViewById(R.id.view);

Log.i("path of file in effects added.....................", path);

Log.i("effect chosen in effects added.....................", effect_choosen);

Bitmap thumbnail = (BitmapFactory.decodeFile(path));

if(effect_choosen.equalsIgnoreCase("Effect 1"))

{

out=addEffect(thumbnail,5,5.0,6.0,0.0); //red,blue,no green

}

else if(effect_choosen.equalsIgnoreCase("Effect 2"))

{

out=addEffect(thumbnail,5,5.0,0.0,10.0); //red,green,no blue

}

else if(effect_choosen.equalsIgnoreCase("Effect 3"))

{

out=addEffect(thumbnail,5,0.0,10.0,0.0); //only green

}

else if(effect_choosen.equalsIgnoreCase("Effect 4"))

{

out=addEffect(thumbnail,15,5.0,0.0,10.0); //red,green,no blue, depth increased

}

else if(effect_choosen.equalsIgnoreCase("Effect 5"))

{

out=addEffect(thumbnail,5,10.0,0.0,0.0); //only red

}

changed.setImageBitmap(out);

}

public static Bitmap addEffect(Bitmap src, int depth, double red, double green, double blue) {

int width = src.getWidth();

int height = src.getHeight();

Bitmap finalBitmap = Bitmap.createBitmap(width, height, src.getConfig());

final double grayScale_Red = 0.3;

final double grayScale_Green = 0.59;

final double grayScale_Blue = 0.11;

int channel_aplha, channel_red, channel_green, channel_blue;

int pixel;

for(int x = 0; x < width; ++x) {

for(int y = 0; y < height; ++y) {

pixel = src.getPixel(x, y);

channel_aplha = Color.alpha(pixel);

channel_red = Color.red(pixel);

channel_green = Color.green(pixel);

channel_blue = Color.blue(pixel);

channel_blue = channel_green = channel_red = (int)(grayScale_Red * channel_red + grayScale_Green * channel_green + grayScale_Blue * channel_blue);

channel_red += (depth * red);

if(channel_red > 255)

{

channel_red = 255;

}

channel_green += (depth * green);

if(channel_green > 255)

{

channel_green = 255;

}

channel_blue += (depth * blue);

if(channel_blue > 255)

{

channel_blue = 255;

}

finalBitmap.setPixel(x, y, Color.argb(channel_aplha, channel_red, channel_green, channel_blue));

}

return finalBitmap;

}

In the code above, the "getWidth" and "getHeight" functions return the height and width of 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 return a color-int from the alpha, red, green, blue components.

Finnaly the changed bitmap is added to the image view.

Step 7:

Add the following changes to "AndroidManifest":

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.chhavi.imageeffectfinal"

android:versionCode="1"

android:versionName="1.0" >

<uses-sdk

android:minSdkVersion="7"

android:targetSdkVersion="16" />

<application

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/AppTheme" >

<activity

android:name="com.chhavi.imageeffectfinal.MainActivity"

android:label="@string/app_name" >

<intent-filter>

</intent-filter>

</activity>

<activity android:name=".ListOfEffects"

android:label="Choose Effect"/>

<activity android:name=".EffectAdded"

android:label="Final Image"/>

</application>

</manifest>

Output snapshots:

Clicking on "Select a Photo" will open the gallery:

Selecting a photo from the gallery:

Clicking on "Add Effects":

Effect 1:

Effect 2:

Effect 3:

Effect 4:

Effect 5:

Summary

In this article you learned to add various effects on an image in 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...