How we can work with Image Effects in Android

Ashwani Yadav

25 March 2021

In this article, we will read How we can work with Image Effects in Android. Android provides bitmap classes for handling images.

bitmap

a bitmap is an object, which is an instance of the Bitmap class and this class represents 2D coordinate. Everything that is drawn in android is a bitmap.

        Bitmap bitmap = Bitmap.createBitmap(100, 100 , Bitmap.Config.ARGB_8888));

1	Bitmap bitmap = Bitmap.createBitmap(100, 100 , Bitmap.Config.ARGB_8888));

The first parameter used for width and the second for height.Third parameter user for types of the pixel. The ARGB_8888 means specify four-channel Alpha, Red, Green, and blue.

You can get pixel from bitmap and process it.

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

for (int i = 0; i<100; i++) {

for (int j = 0; j < 100; j++) {

int p = bmp.getPixel(i , j);

}

And you can set bitmap pixel from the setPixel method.

                bitmap.setPixel(i , j , Color.argb(Color.alpha(p) + 100 , Color.red(p) + 100 , Color.green(p) + 100 , Color.blue(p) + 100));

1	bitmap.setPixel(i , j , Color.argb(Color.alpha(p) + 100 , Color.red(p) + 100 , Color.green(p) + 100 , Color.blue(p) + 100));

Let us start code for it.

MainActivity

package com.example.imageeffect;

import android.graphics.Bitmap;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private ImageView imageView;
    private Bitmap bmp;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView) findViewById(R.id.imageView);
        BitmapDrawable bmd = (BitmapDrawable) imageView.getDrawable();
        bmp = bmd.getBitmap();
    }

    public void original(View view) {
        Bitmap bitmap = 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);
                bitmap.setPixel(i , j , Color.argb(Color.alpha(p) , Color.red(p) , Color.green(p) , Color.blue(p)));
            }
        }
        imageView.setImageBitmap(bitmap);
    }

    public void bright(View view) {
        Bitmap bitmap = 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);
                bitmap.setPixel(i , j , Color.argb(Color.alpha(p) + 100 , Color.red(p) + 100 , Color.green(p) + 100 , Color.blue(p) + 100));
            }
        }
        imageView.setImageBitmap(bitmap);
    }

    public void dark(View view) {
        Bitmap bitmap = 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);
                bitmap.setPixel(i , j , Color.argb(Color.alpha(p) , Color.red(p) - 50 , Color.green(p) - 50 , Color.blue(p) - 50));
            }
        }
        imageView.setImageBitmap(bitmap);
    }

    public void red(View view) {
        Bitmap bitmap = 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);
                bitmap.setPixel(i , j , Color.argb(Color.alpha(p) , Color.red(p) + 250 , 0 , 0));
            }
        }
        imageView.setImageBitmap(bitmap);
    }

    public void green(View view) {
        Bitmap bitmap = 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);
                bitmap.setPixel(i , j , Color.argb(Color.alpha(p) , 0 , Color.green(p) + 250 , 0));
            }
        }
        imageView.setImageBitmap(bitmap);
    }

    public void blue(View view) {
        Bitmap bitmap = 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);
                bitmap.setPixel(i , j , Color.argb(Color.alpha(p) , 0 , 0 , Color.blue(p) + 250));
            }
        }
        imageView.setImageBitmap(bitmap);
    }

}

package com.example.imageeffect;

import android.graphics.Bitmap;

import android.graphics.Color;

import android.graphics.drawable.BitmapDrawable;

import android.os.Bundle;

import android.util.Log;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

private ImageView imageView;

private Bitmap bmp;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView = (ImageView) findViewById(R.id.imageView);

BitmapDrawable bmd = (BitmapDrawable) imageView.getDrawable();

bmp = bmd.getBitmap();

}

public void original(View view) {

Bitmap bitmap = 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);

bitmap.setPixel(i , j , Color.argb(Color.alpha(p) , Color.red(p) , Color.green(p) , Color.blue(p)));

}

imageView.setImageBitmap(bitmap);

}

public void bright(View view) {

Bitmap bitmap = 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);

bitmap.setPixel(i , j , Color.argb(Color.alpha(p) + 100 , Color.red(p) + 100 , Color.green(p) + 100 , Color.blue(p) + 100));

}

imageView.setImageBitmap(bitmap);

}

public void dark(View view) {

Bitmap bitmap = 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);

bitmap.setPixel(i , j , Color.argb(Color.alpha(p) , Color.red(p) - 50 , Color.green(p) - 50 , Color.blue(p) - 50));

}

imageView.setImageBitmap(bitmap);

}

public void red(View view) {

Bitmap bitmap = 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);

bitmap.setPixel(i , j , Color.argb(Color.alpha(p) , Color.red(p) + 250 , 0 , 0));

}

imageView.setImageBitmap(bitmap);

}

public void green(View view) {

Bitmap bitmap = 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);

bitmap.setPixel(i , j , Color.argb(Color.alpha(p) , 0 , Color.green(p) + 250 , 0));

}

imageView.setImageBitmap(bitmap);

}

public void blue(View view) {

Bitmap bitmap = 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);

bitmap.setPixel(i , j , Color.argb(Color.alpha(p) , 0 , 0 , Color.blue(p) + 250));

}

imageView.setImageBitmap(bitmap);

}

We create an ImageView and taken some buttons. while clicking on the button we change the color of the pixels.

activity_main

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

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Image Effects"
        android:textSize="30dp" />


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textView"
        android:layout_centerHorizontal="true"
        android:src="@drawable/ashwani" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="97dp"
        android:onClick="original"
        android:text="original" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/button1"
        android:layout_centerHorizontal="true"
        android:onClick="dark"
        android:text="dark" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/button2"
        android:layout_alignParentEnd="true"
        android:onClick="bright"
        android:text="Bright" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button2"
        android:layout_alignParentStart="true"
        android:onClick="red"
        android:text="Red" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button2"
        android:layout_centerHorizontal="true"
        android:onClick="green"
        android:text="Green" />

    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button2"
        android:layout_alignParentEnd="true"
        android:onClick="blue"
        android:text="blue" />


</RelativeLayout>

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

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

tools:context=".MainActivity">

<TextView

android:id="@+id/textView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:text="Image Effects"

android:textSize="30dp" />

<ImageView

android:id="@+id/imageView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/textView"

android:layout_centerHorizontal="true"

android:src="@drawable/ashwani" />

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentStart="true"

android:layout_alignParentBottom="true"

android:layout_marginBottom="97dp"

android:onClick="original"

android:text="original" />

<Button

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignBottom="@+id/button1"

android:layout_centerHorizontal="true"

android:onClick="dark"

android:text="dark" />

<Button

android:id="@+id/button3"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignTop="@+id/button2"

android:layout_alignParentEnd="true"

android:onClick="bright"

android:text="Bright" />

<Button

android:id="@+id/button4"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/button2"

android:layout_alignParentStart="true"

android:onClick="red"

android:text="Red" />

<Button

android:id="@+id/button5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/button2"

android:layout_centerHorizontal="true"

android:onClick="green"

android:text="Green" />

<Button

android:id="@+id/button6"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/button2"

android:layout_alignParentEnd="true"

android:onClick="blue"

android:text="blue" />

</RelativeLayout>

please check the below images. I have taken an image and click on blue its effect has changed.

In the below image, we have changed it to green color and you can check its effect changed to green.

In the below image, we have changed it to red color and you can check its effect changed to red.

So here we discussed How we can work with Image Effects in Android. Thanks for reading this blog and You can get other blogs from here