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:

<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 to 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 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 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":

<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>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </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 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...