Extension ColorFilter image. Complementary color. Grayscale. Source code. Transparent color. FloodFill

I've been making an extension to convert one image to another with its complementary colors.

When I finished it I realized that @Gordon_Lu had already done a great and complete extension on the subject.

Anyway, I'm sharing here my extension and its source code in case anyone might be interested.

com.KIO4_ColorFilter.aix (12.1 KB)

p132_FiltroColor.aia (517.9 KB)

Source code

Source code: KIO4_ColorFilter.java
package com.KIO4_ColorFilter;

import com.google.appinventor.components.annotations.DesignerComponent;
import com.google.appinventor.components.annotations.SimpleFunction;
import com.google.appinventor.components.annotations.SimpleObject;
import com.google.appinventor.components.common.ComponentCategory;
import com.google.appinventor.components.runtime.*;
import android.content.Context;

import android.graphics.Bitmap;
import android.net.Uri;
import android.graphics.Matrix;
import android.graphics.ColorMatrix;
import android.graphics.ColorMatrixColorFilter;
import android.graphics.Paint;
import android.graphics.BitmapFactory;
import android.widget.ImageView;
import android.view.View;
import android.graphics.Canvas;

import java.io.IOException;
import android.os.Environment;

import java.io.File;
import java.io.FileOutputStream;

@DesignerComponent(version = 1,
    description = "Color filter. Change the color of an image.",
    category = ComponentCategory.EXTENSION,
    nonVisible = true,
	helpUrl  = "https://developer.android.com/reference/android/graphics/ColorMatrix",
    iconName ="") 
@SimpleObject(external = true)

public class KIO4_ColorFilter extends AndroidNonvisibleComponent implements Component {
    public static final int VERSION = 1;
    private ComponentContainer container;
	private Context context;
	private ImageView mi_imagen = null;
	private String colores ="";

    public KIO4_ColorFilter(ComponentContainer container) {
        this.container = container;
		context = (Context) container.$context();
////////////////////// FUNCIONES ////////////////////////////////////////////////////////////////////// //.
@SimpleFunction(description = "Get outFile in ASD. colorMatrix is a string, example: -1,0,0,0,255,0,-1,0,0,255,0,0,-1,0,255,0,0,0,1,0")
   public void ChangeColorMatrix(String pathImage,  String outFile, int density, String colorsMatrix) {
    // mi_imagen =  (ImageView) imagen.getView();
	pathImage = pathImage.replace("file://", "");
	Uri imgUri = Uri.parse(pathImage);
	colores = colorsMatrix;

    try {
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inSampleSize = 1; // 1 - means max size. 4 - means maxsize/4 size.
        options.inTargetDensity = density; // 100
        Bitmap bitmap = BitmapFactory.decodeFile(imgUri.getPath(), options);
		String asd = context.getExternalFilesDir(null).toString();
		File myDir = new File(asd);
		File file = new File(myDir, outFile);
		FileOutputStream out = new FileOutputStream(file);
        bitmap = FilterColor(bitmap);
		bitmap.compress(Bitmap.CompressFormat.PNG, 100, out);
    } catch (Exception e) {
    //    Log.e(TAG, e.getMessage());

public Bitmap FilterColor(Bitmap bmpOriginal){        
    int height = bmpOriginal.getHeight();
    int width = bmpOriginal.getWidth();    

    Bitmap bmpFilter = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    Canvas c = new Canvas(bmpFilter);
    String[] parts = colores.split(",");
    float[] matrix = new float[parts.length];
    for (int i = 0; i < parts.length; ++i) {
        float number = Float.parseFloat(parts[i]);
        matrix[i] = number;

    Paint paint = new Paint();
	paint.setColorFilter(new ColorMatrixColorFilter(matrix));
    c.drawBitmap(bmpOriginal, 0, 0, paint);
    return bmpFilter;

}	// ==> FIN

But what matrix should I put to get an image with complementary colors?

We are going to ask our new friend GPT-2, we will ask him the question in Spanish to check if he knows languages.

This: -1, 0, 0, 0, 255, 0, -1, 0, 0, 255,0, 0, -1, 0, 255,0, 0, 0, 1, 0

More info:

1 Like

2.- Color of an image to transparent.

p132_FiltroColor_v2.aia (535.1 KB)

Touch a color. Convert to Transparent this color. Show new Image.


3.- Change color fromRGB to RGBAlpha.

Here we saw an extension to perform a FloodFill, "Change Color":

We are going to make color changes using ChangeColor:

p132_FiltroColor_v4.aia (535.8 KB)

Touch a Bar color.
Touch a Ball color.
Click in Change color touch Bar to color Ball.
Show new Image.

4.- Change color fromColor toColor.

p132_FiltroColor_v5.aia (535.3 KB)

  • This block (ChangeColor2) is similar to the previous one, in this case we feed the block with the color number.

5.- Flood Fill Block. Fill area of an image with a color.

p132_FiltroColor_v6.aia (717.0 KB)

This is similar to:

  • Fill an area of ​​an image with a color.

1 Like