Android: How to fill color to the specific part of the Image only?
I have Image Like this:
Now, i want to fill the color to the Specific part of that image. as like If i select color blue and if i touch on Cap then the cap should be fill with the color Blue. Same thing should be also happen with the other part like nose, Mouth, Eyes etc
So, How it is possible using android ?
Can any budy help me please.
Updated
I have try with the implementation of the FloodFill algorithm in my app. See Here
But after doing that i got exception like:
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): java.lang.IllegalStateException
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at android.graphics.Bitmap.setPixel(Bitmap.java:847)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at com.project.fingerpaint.FinderPaintDemo.FloodFill(FinderPaintDemo.java:284)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at com.project.fingerpaint.FinderPaintDemo.access$3(FinderPaintDemo.java:272)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at com.project.fingerpaint.FinderPaintDemo$MyView.onTouchEvent(FinderPaintDemo.java:187)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at android.view.View.dispatchTouchEvent(View.java:3766)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:863)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:863)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:863)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:863)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at android.view.ViewGroup.dispatchTouchEvent(ViewGroup.java:863)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at com.android.internal.policy.impl.PhoneWindow$DecorView.superDispatchTouchEvent(PhoneWindow.java:1671)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at com.android.internal.policy.impl.PhoneWindow.superDispatchTouchEvent(PhoneWindow.java:1107)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at android.app.Activity.dispatchTouchEvent(Activity.java:2086)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at com.android.internal.policy.impl.PhoneWindow$DecorView.dispatchTouchEvent(PhoneWindow.java:1655)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at android.view.ViewRoot.handleMessage(ViewRoot.java:1785)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at android.os.Handler.dispatchMessage(Handler.java:99)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at android.os.Looper.loop(Looper.java:123)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at android.app.ActivityThread.main(ActivityThread.java:4627)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at java.lang.reflect.Method.invokeNative(Native Method)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at java.lang.reflect.Method.invoke(Method.java:521)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:868)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:626)
03-09 17:45:16.260: ERROR/AndroidRuntime(2558): at dalvik.system.NativeStart.main(Native Method)
Now, What wrong in my code ??
Please help me in that condition.
Thanks.
Answer
This is the complete code of filling color into image below :
Image for filling: http://i.stack.imgur.com/7rita.jpg
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center_horizontal"
android:orientation="vertical" >
<RelativeLayout
android:id="@+id/relative_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_weight="1" >
<ImageView
android:id="@+id/coringImage"
android:layout_width="300dp"
android:layout_height="300dp" />
</RelativeLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="@+id/btn_red"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="red" />
<Button
android:id="@+id/btn_yellow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="yellow" />
<Button
android:id="@+id/btn_blue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="blue" />
</LinearLayout>
</LinearLayout>
Activity Class
public class FillColorActivity extends Activity implements OnTouchListener {
private RelativeLayout drawingLayout;
private MyView myView;
Button red, blue, yellow;
Paint paint;
/** Called when the activity is first created. */
/*
*
* private ImageView imageView; private Canvas cv; private Bitmap mask,
* original, colored; private int r,g,b; private int sG, sR, sB;
*/
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
myView = new MyView(this);
drawingLayout = (RelativeLayout) findViewById(R.id.relative_layout);
drawingLayout.addView(myView);
red = (Button) findViewById(R.id.btn_red);
blue = (Button) findViewById(R.id.btn_blue);
yellow = (Button) findViewById(R.id.btn_yellow);
red.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
paint.setColor(Color.RED);
}
});
yellow.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
paint.setColor(Color.YELLOW);
}
});
blue.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
paint.setColor(Color.BLUE);
}
});
}
public class MyView extends View {
private Path path;
Bitmap mBitmap;
ProgressDialog pd;
final Point p1 = new Point();
Canvas canvas;
// Bitmap mutableBitmap ;
public MyView(Context context) {
super(context);
paint = new Paint();
paint.setAntiAlias(true);
pd = new ProgressDialog(context);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeWidth(5f);
mBitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.cartoon).copy(Bitmap.Config.ARGB_8888, true);
this.path = new Path();
}
@Override
protected void onDraw(Canvas canvas) {
this.canvas = canvas;
paint.setColor(Color.GREEN);
canvas.drawBitmap(mBitmap, 0, 0, paint);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
p1.x = (int) x;
p1.y = (int) y;
final int sourceColor = mBitmap.getPixel((int) x, (int) y);
final int targetColor = paint.getColor();
new TheTask(mBitmap, p1, sourceColor, targetColor).execute();
invalidate();
}
return true;
}
public void clear() {
path.reset();
invalidate();
}
public int getCurrentPaintColor() {
return paint.getColor();
}
class TheTask extends AsyncTask<Void, Integer, Void> {
Bitmap bmp;
Point pt;
int replacementColor, targetColor;
public TheTask(Bitmap bm, Point p, int sc, int tc) {
this.bmp = bm;
this.pt = p;
this.replacementColor = tc;
this.targetColor = sc;
pd.setMessage("Filling....");
pd.show();
}
@Override
protected void onPreExecute() {
pd.show();
}
@Override
protected void onProgressUpdate(Integer... values) {
}
@Override
protected Void doInBackground(Void... params) {
FloodFill f = new FloodFill();
f.floodFill(bmp, pt, targetColor, replacementColor);
return null;
}
@Override
protected void onPostExecute(Void result) {
pd.dismiss();
invalidate();
}
}
}
// flood fill
public class FloodFill {
public void floodFill(Bitmap image, Point node, int targetColor,
int replacementColor) {
int width = image.getWidth();
int height = image.getHeight();
int target = targetColor;
int replacement = replacementColor;
if (target != replacement) {
Queue<Point> queue = new LinkedList<Point>();
do {
int x = node.x;
int y = node.y;
while (x > 0 && image.getPixel(x - 1, y) == target) {
x--;
}
boolean spanUp = false;
boolean spanDown = false;
while (x < width && image.getPixel(x, y) == target) {
image.setPixel(x, y, replacement);
if (!spanUp && y > 0
&& image.getPixel(x, y - 1) == target) {
queue.add(new Point(x, y - 1));
spanUp = true;
} else if (spanUp && y > 0
&& image.getPixel(x, y - 1) != target) {
spanUp = false;
}
if (!spanDown && y < height - 1
&& image.getPixel(x, y + 1) == target) {
queue.add(new Point(x, y + 1));
spanDown = true;
} else if (spanDown && y < height - 1
&& image.getPixel(x, y + 1) != target) {
spanDown = false;
}
x++;
}
} while ((node = queue.poll()) != null);
}
}
}
@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
return false;
}
}