title: Android - How to color whole area of an image on user's tap and center it on the sceen?
body: <p>I'm working on a little project where the user can color whole areas of an white image by tapping on the touch-screen. </p>
  
  <p>This is an example of image:</p>
  
  <p><img src="https://i.stack.imgur.com/urw1q.png" alt="enter image description here"></p>
  
  <p>And this is not difficult, infact I use the flood fill algorithm to color the same-color areas separated by the black lines.
  My problem is to center the image which I modify, in the screen. </p>
  
  <p>I use the following code:</p>
  
  <p>JAVA:</p>
  
  <pre><code>import java.util.LinkedList;
  import java.util.Queue;
  import android.app.Activity;
  import android.app.ProgressDialog;
  import android.content.Context;
  import android.graphics.Bitmap;
  import android.graphics.BitmapFactory;
  import android.graphics.Canvas;
  import android.graphics.Color;
  import android.graphics.Paint;
  import android.graphics.Path;
  import android.graphics.Point;
  import android.os.AsyncTask;
  import android.os.Bundle;
  import android.view.MotionEvent;
  import android.view.View;
  import android.widget.Button;
  import android.widget.ImageView;
  import android.widget.RelativeLayout;
  
  public class Main extends Activity {
  
  private RelativeLayout dashBoard;
  private MyView myView;
  public ImageView image;
  
  Button b_red, b_blue, b_green, b_orange, b_clear;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
  
      myView = new MyView(this);
      setContentView(R.layout.activity_main);
      findViewById(R.id.dashBoard);
      findViewById(R.id.myImage);
  
  
      b_red = (Button) findViewById(R.id.b_red);
      b_blue = (Button) findViewById(R.id.b_blue);
      b_green = (Button) findViewById(R.id.b_green);
      b_orange = (Button) findViewById(R.id.b_orange);
  
      b_red.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              myView.changePaintColor(0xFFFF0000);
          }
      });
  
      b_blue.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              myView.changePaintColor(0xFF0000FF);
          }
      });
  
      b_green.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              myView.changePaintColor(0xFF00FF00);
          }
      });
  
      b_orange.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              myView.changePaintColor(0xFFFF9900);
          }
      });
  
      dashBoard = (RelativeLayout) findViewById(R.id.dashBoard);
      image = (ImageView) findViewById(R.id.myImage);
      dashBoard.addView(myView);
  }
  
  public class MyView extends View {
  
      private Paint paint;
      private Path path;
      public Bitmap mBitmap;
      public ProgressDialog pd;
      final Point p1 = new Point();
      public Canvas canvas;
  
      //Bitmap mutableBitmap ;
      public MyView(Context context) {
  
          super(context);
  
          this.paint = new Paint();
          this.paint.setAntiAlias(true);
          pd = new ProgressDialog(context);
          this.paint.setStyle(Paint.Style.STROKE);
          paint.setStrokeJoin(Paint.Join.ROUND);
          paint.setStrokeWidth(5f);
          mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.forme).copy(Bitmap.Config.ARGB_8888, true);
          this.path = new Path();
      }
  
      @Override
      protected void onDraw(Canvas canvas) {
          this.canvas = canvas;
          this.paint.setColor(Color.RED);
  
          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();
      }
  
      public void changePaintColor(int color){
          this.paint.setColor(color);
      }
  
      class TheTask extends AsyncTask&lt;Void, Integer, Void&gt; {
  
          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&lt;Point&gt; queue = new LinkedList&lt;Point&gt;();
              do {
  
                  int x = node.x;
                  int y = node.y;
                  while (x &gt; 0 &amp;&amp; image.getPixel(x - 1, y) == target) {
                      x--;
                  }
  
                  boolean spanUp = false;
                  boolean spanDown = false;
                  while (x &lt; width &amp;&amp; image.getPixel(x, y) == target) {
                      image.setPixel(x, y, replacement);
                      if (!spanUp &amp;&amp; y &gt; 0 &amp;&amp; image.getPixel(x, y - 1) == target) {
                          queue.add(new Point(x, y - 1));
                          spanUp = true;
                      } else if (spanUp &amp;&amp; y &gt; 0 &amp;&amp; image.getPixel(x, y - 1) != target) {
                          spanUp = false;
                      }
                      if (!spanDown &amp;&amp; y &lt; height - 1 &amp;&amp; image.getPixel(x, y + 1) == target) {
                          queue.add(new Point(x, y + 1));
                          spanDown = true;
                      } else if (spanDown &amp;&amp; y &lt; (height - 1) &amp;&amp; image.getPixel(x, y + 1) != target) {
                          spanDown = false;
                      }
                      x++;
                  }
  
              } while ((node = queue.poll()) != null);
          }
      }
  }
  }
  </code></pre>
  
  <p>XML:</p>
  
  <pre><code>&lt;RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/drawingLayout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#969696"
  tools:context=".Main" &gt;
  
  &lt;RelativeLayout
      android:id="@+id/dashBoard"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_above="@+id/b_red"
      android:layout_alignParentLeft="true"
      android:layout_alignParentRight="true"
      android:layout_alignParentTop="true"
      android:layout_marginBottom="10dp"
      android:background="#DDDDDD" &gt;
  
      &lt;ImageView
          android:id="@+id/myImage"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true"
          android:layout_alignParentLeft="true"
          android:layout_alignParentRight="true"
          android:layout_alignParentTop="true" /&gt;
  
  &lt;/RelativeLayout&gt;
  
  &lt;Button
      android:id="@+id/b_red"
      android:layout_width="65dp"
      android:layout_height="40dp"
      android:layout_alignParentBottom="true"
      android:layout_alignParentLeft="true"
      android:background="#FF0000" /&gt;
  
  &lt;Button
      android:id="@+id/b_green"
      android:layout_width="65dp"
      android:layout_height="40dp"
      android:layout_alignParentBottom="true"
      android:layout_toRightOf="@+id/b_red"
      android:background="#00FF00" /&gt;
  
  &lt;Button
      android:id="@+id/b_blue"
      android:layout_width="65dp"
      android:layout_height="40dp"
      android:layout_alignParentBottom="true"
      android:layout_toRightOf="@+id/b_green"
      android:background="#0000FF" /&gt;
  
  &lt;Button
      android:id="@+id/b_orange"
      android:layout_width="65dp"
      android:layout_height="40dp"
      android:layout_alignParentBottom="true"
      android:layout_toRightOf="@+id/b_blue"
      android:background="#FF9900" /&gt;
  
  &lt;Button
      android:id="@+id/button5"
      android:layout_width="60dp"
      android:layout_height="40dp"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:text="Clear" /&gt;
  
  &lt;/RelativeLayout&gt;
  </code></pre>
  
  <p>When I run the project I get:</p>
  
  <p><img src="https://i.stack.imgur.com/lc00T.png" alt="enter image description here"></p>
  
  <p>As you can see the image isn't extended in all the light-grey area! I suppose this problem is cause by the intercation with a general View added to the RelativeLayout which contains the ImageView.</p>
  
  <p>Can you tell how can I exetend the image to all the light-grey area? And how can I intercact with the <strong>ImageVie</strong> component without using the <strong>RelativeLayout</strong> component?</p>
  
  <p>Thank you for your help!</p>