Replacing a color in image

To select a color in an image and replace it with a new color, follow the steps given below.

1. In main.xml, add two Buttons button_pick and button_replace, add an ImageView imageview1, add two LinearLayout linear_getcolor and linear_setcolor, add an EditText edittext1, and add a ProgressBar progressbar1.

2. Create a FilePicker imagepicker: image/* for picking image.

3. Create a String variable path and five number variables width, height, w, h, and n.

4. In onCreate, use blocks to make ProgressBar Gone, and setOnTouchListener for imageview1.

The code used is
imageview1.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
int eid = event.getAction();
switch (eid) {
case MotionEvent.ACTION_MOVE:
int x = (int)event.getX();
int y = (int)event.getY();
if (bitmap != null){
if (x<width && x>0 && y<height && y>0){
colorint = bitmap.getPixel(x, y);
case MotionEvent.ACTION_DOWN :
case MotionEvent.ACTION_UP : break;
default : break;} return true;} });

5. In event button_pick onClick, use FilePicker pick files block.

6. In onFilesPicked event, set image of imageview1 add convert the image to a mutable Bitmap.

The code used is
immutable_bitmap = ((;

bitmap = immutable_bitmap.copy(Bitmap.Config.ARGB_8888, true);

width = bitmap.getWidth();
height = bitmap.getHeight();

7. In event EditText edittext1 onTextChanged event, set int setcolor to the color entered in edittext1.

The code used is
try {
setcolor = Color.parseColor(_charSeq);
} catch (IllegalArgumentException e) {
showMessage("This color string is not valid");

8. In the event button_replace onClick, execute AsyncTask BackgroundTask.

if (bitmap != null){
(new BackgroundTask()).execute();

9. Create a more block extra. Here declare Bitmap variables and int variables, and define BackgroundTask.
Code used

Bitmap immutable_bitmap = null;
Bitmap bitmap = null;
int colorint = -1;
int setcolor = -1;

private class BackgroundTask extends AsyncTask<Void, Void, Void> {
protected void onPreExecute() {
//Progressbar1 set visible VISIBLE
protected Void doInBackground(Void... path) {
// Use Blocks as shown in image above.
// The code used is
if (colorint==bitmap.getPixel((int)w, (int)h)){
if (bitmap.isMutable()){
bitmap.setPixel((int)w, (int)h, setcolor);
} else {n = 6;}

//Other events in BackgroundTask:
return null;
protected void onProgressUpdate(Void... values) {
protected void onPostExecute(Void param){
// Make progress bar GONE
// Set image of imageview1
if (n== 6){
showMessage("Image is not mutable");

10. Run the project.

11. To save the image, add a Button button_save.

12. Add two String variables filename and extension.

13. In the event button_save onClick, use blocks as shown in image below.
The code used is pictureFile = new;

try { fos = new; bitmap.compress(Bitmap.CompressFormat.PNG, 100, fos);
showMessage("Image Saved");
} catch ( e) {
showMessage(e.getMessage()); } catch ( e) {


  1. Thats perfectšŸ‘ Any chance you make a tutorial for a speedometer using "add source directly"?

  2. Really Great!
    Please, what codes are required to enable a sound/voice record option in a website in sketchware app?
    e.g. The website has a sound/voice record option but this does not work when webview is embedded in sketchware app. Please help out.


Post a Comment

Popular posts from this blog

Create Music Player app in Sketchware

A Flash Light App in Sketchware

Firebase auth in Sketchware for Login Activity

Simple car racing android game in Sketchware

In Sketchware: How to create a calculator for any simple formula?