Archive

Posts Tagged ‘color’

Image Processing – Pixel Color Replacement

September 28, 2011 3 comments

Some buddies has mailed me asking about replacing a pixel color by another.

For sample, of what I’ve done, this is how it looks.

Image - The Original

Image - The Original

The next one replaces all the 0xFFFFFFFF pixel into 0xFF0B0C0D color:

Image - The Replaced

Image - The Replaced

Not so beautiful, well, I’ve just picked random color….lol..

This is what I’ve done for it.

package pete.android.study;

import android.graphics.Bitmap;

public class ImageProcessor {
	Bitmap mImage;
	boolean mIsError = false;

	public ImageProcessor(final Bitmap image) {
		mImage = image.copy(image.getConfig(), image.isMutable());
		if(mImage == null) {
			mIsError = true;
		}
	}

	public boolean isError() {
		return mIsError;
	}

	public void setImage(final Bitmap image) {
		mImage = image.copy(image.getConfig(), image.isMutable());
		if(mImage == null) {
			mIsError = true;
		} else {
			mIsError = false;
		}
	}

	public Bitmap getImage() {
		if(mImage == null){
			return null;
		}
		return mImage.copy(mImage.getConfig(), mImage.isMutable());
	}

	public void free() {
		if(mImage != null && !mImage.isRecycled()) {
			mImage.recycle();
			mImage = null;
		}
	}

	public Bitmap replaceColor(int fromColor, int targetColor) {
		if(mImage == null) {
			return null;
		}

		int width = mImage.getWidth();
		int height = mImage.getHeight();
		int[] pixels = new int[width * height];
		mImage.getPixels(pixels, 0, width, 0, 0, width, height);

		for(int x = 0; x < pixels.length; ++x) {
			pixels[x] = (pixels[x] == fromColor) ? targetColor : pixels[x];
		}

		Bitmap newImage = Bitmap.createBitmap(width, height, mImage.getConfig());
		newImage.setPixels(pixels, 0, width, 0, 0, width, height);

		return newImage;
	}
}

Guess you already knew the basic concepts of image processing in all of my previous articles.
Hope you get something cool from it!

Cheers,
Pete Houston

Advertisements
Categories: Tutorials Tags: , , , ,

Colorizing the Title Bar

September 20, 2011 2 comments

It’s very interesting if we can do some customizing over title bar on screen, like this:

Colorizing Title Bar

Colorizing Title Bar

Here the tricks:

package pete.android.study;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.ViewParent;
import android.widget.TextView;

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // load title bar from Android layout
        TextView titleBar = (TextView)getWindow().findViewById(android.R.id.title);
        if (titleBar != null) {
            // set text color, YELLOW as sample
            titleBar.setTextColor(Color.YELLOW);
            // find parent view
            ViewParent parent = titleBar.getParent();
            if (parent != null && (parent instanceof View)) {
                // set background on parent, BRICK as sample
                View parentView = (View)parent;
                parentView.setBackgroundColor(Color.rgb(0x88, 0x33, 0x33));
            }
        }
    }
}

If you want to do some customization on default Android screen layout by re-construct the framework, then refer to this file: platforms/android-2.3.3/data/res/layout/screen.xml, whereas replace 2.3.3 by your version.

Have fun 😀

 

Cheers,

Pete Houston

Categories: Tricks & Tips Tags: , , ,

Image Processing – Color Boost Up

June 23, 2011 3 comments

Color boost technique is basically based on color filtering, which is to increase the intensity of a single color channel.

From the base image:

Original Image

Original Image

These are some boost effects:

Boost: Red 150%

Boost: Red 150%

Boost: Green 50%

Boost: Green 50%

Boost: Blue 67%

Boost: Blue 67%

Here the implementation:

	public static Bitmap boost(Bitmap src, int type, float percent) {
		int width = src.getWidth();
		int height = src.getHeight();
		Bitmap bmOut = Bitmap.createBitmap(width, height, src.getConfig());

		int A, R, G, B;
		int pixel;

		for(int x = 0; x < width; ++x) {
			for(int y = 0; y < height; ++y) {
				pixel = src.getPixel(x, y);
				A = Color.alpha(pixel);
				R = Color.red(pixel);
				G = Color.green(pixel);
				B = Color.blue(pixel);
				if(type == 1) {
					R = (int)(R * (1 + percent));
					if(R > 255) R = 255;
				}
				else if(type == 2) {
					G = (int)(G * (1 + percent));
					if(G > 255) G = 255;
				}
				else if(type == 3) {
					B = (int)(B * (1 + percent));
					if(B > 255) B = 255;
				}
				bmOut.setPixel(x, y, Color.argb(A, R, G, B));
			}
		}
		return bmOut;
	}

Hope you enjoy iy!

Cheers,
Pete Houston

Categories: Tutorials Tags: , , , ,

Image Processing – Decreasing Color Depth

June 21, 2011 3 comments

Decreasing color depth involves converting to standard values.

For example: if I want to offset 32, then each image color channel will apply the range: 0, 31, 63 …

From the original image:

Original Image

Original Image

Some bit offset taken for this image:

32-bit Offset

32-bit Offset

64-bit Offset

64-bit Offset

128-bit Offset

128-bit Offset

Here the implementation:

	public static Bitmap decreaseColorDepth(Bitmap src, int bitOffset) {
		// get image size
		int width = src.getWidth();
		int height = src.getHeight();
		// create output bitmap
		Bitmap bmOut = Bitmap.createBitmap(width, height, src.getConfig());
		// color information
		int A, R, G, B;
		int pixel;

		// scan through all pixels
		for(int x = 0; x < width; ++x) {
			for(int y = 0; y < height; ++y) {
				// get pixel color
				pixel = src.getPixel(x, y);
				A = Color.alpha(pixel);
				R = Color.red(pixel);
				G = Color.green(pixel);
				B = Color.blue(pixel);

				// round-off color offset
				R = ((R + (bitOffset / 2)) - ((R + (bitOffset / 2)) % bitOffset) - 1);
				if(R < 0) { R = 0; }
				G = ((G + (bitOffset / 2)) - ((G + (bitOffset / 2)) % bitOffset) - 1);
				if(G < 0) { G = 0; }
				B = ((B + (bitOffset / 2)) - ((B + (bitOffset / 2)) % bitOffset) - 1);
				if(B < 0) { B = 0; }

				// set pixel color to output bitmap
				bmOut.setPixel(x, y, Color.argb(A, R, G, B));
			}
		}

		// return final image
		return bmOut;
	}

Hope you like it!

Cheers,
Pete Houston

Image Processing – Filter Color Channels

June 21, 2011 10 comments

Sometimes, you want to filter the color on the image, in which to display image by only one channel or combine the increase on every channel.

Using my original beauty:

Original Image

Original Image

Now, I convert it into every single channel:

Filter Image: Red = 100%

Filter Image: Red = 100%

Filter Image: Green = 100%

Filter Image: Green = 100%

Filter Image: Blue = 100%

Filter Image: Blue = 100%

Those image are filtered by using only one channel. What if I combine all channels?

FIlter Image: Red = Green = Blue = 50%

FIlter Image: Red = Green = Blue = 50%

Image looks a bit darker since the intensity decreases. If I try to increase to some level above normal,

FIlter Image: Red = Green = Blue = 150%

FIlter Image: Red = Green = Blue = 150%

Well, it’s weird in some way, the channels mixed and messed-up!

Anyway, the implementation is rather simpler than you think it would be:

	public static Bitmap doColorFilter(Bitmap src, double red, double green, double blue) {
		// image size
		int width = src.getWidth();
		int height = src.getHeight();
		// create output bitmap
		Bitmap bmOut = Bitmap.createBitmap(width, height, src.getConfig());
		// color information
		int A, R, G, B;
		int pixel;

		// scan through all pixels
		for(int x = 0; x < width; ++x) {
			for(int y = 0; y < height; ++y) {
				// get pixel color
				pixel = src.getPixel(x, y);
				// apply filtering on each channel R, G, B
				A = Color.alpha(pixel);
				R = (int)(Color.red(pixel) * red);
				G = (int)(Color.green(pixel) * green);
				B = (int)(Color.blue(pixel) * blue);
				// set new color pixel to output bitmap
				bmOut.setPixel(x, y, Color.argb(A, R, G, B));
			}
		}

		// return final image
		return bmOut;
	}
}

 

Hope you like it!

 

Cheers,
Pete Houston

Setting button’s colors

June 10, 2011 11 comments

For a button, you can either set its colors by using layout setting xml in resources, or dynamically through coding.

1. Using XML resources

– To set button background color, use: “android:background”

– To set button text color, use: “android:textColor” (note, it’s case-sensitive)

Sample: to create a button with background “WHITE” and text color “BLACK”

	<Button
		android:background="@android:color/white"
		android:textColor="@android:color/black"
	/>

2. Through coding

– To set button background color, use: “Button.setBackgroundColor()”

– To set button text color, use: “Button.setTextColor()”

Sample: to create a button with background “WHITE” and text color “BLACK”

    btnSample.setBackgroundColor(Color.WHITE);
    btnSample.setTextColor(Color.BLACK);

3. Sample Project

This is a small project to demonstrate the usage.

A button with BLACK background and WHITE text color, if it’s clicked the color reverse; if it’s clicked one more time, its colors transforms to the beginning color state.

First State

First State

After clicked

End State

End State

Get the sample project here: FileDropper | FreeFileHosting | FileSave | Mediafire

4. Final Words

– Hope you enjoy it!

Cheers,

Pete Houston

Categories: Tricks & Tips Tags: , , ,