draw polygon and and make it editable using android …

Question

Actually i am doing image editing in android and using canvas ... but i don't know ....

1. how to work with canvas and UI together..??
2. how use buttons and other widgets with canvas...??
3. how to make polygon editable .. so that if i touch any point then it hould highlight and i can resize the polygon.

There is my code:

public class Crop_Image_Activity1 extends Activity implements OnClickListener
{

    static int count=0,i=0,j=0;
    ImageView img1;
    Button bt1,bt2;
    Path path=new Path();
    Paint mPaint;
    float x_current,y_current;

    float x0,y0;
    float x1,y1;
    float pointx[]=new float[20];
    float pointy[]=new float[20];
    String num;

    MyView view1; 
    ViewGroup.LayoutParams params;


@Override
protected void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_crop__image__activity1);
    img1=(ImageView)findViewById(R.id.imageView1);
    bt1=(Button)findViewById(R.id.button1);
    bt2=(Button)findViewById(R.id.button2);
    //img1.setImageResource(R.drawable.pic1);

    this.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);

    mPaint = new Paint();
    mPaint.setAntiAlias(true);
    mPaint.setDither(true);
    mPaint.setColor(0xFFFF0000);
    mPaint.setStyle(Paint.Style.STROKE);
    mPaint.setStrokeJoin(Paint.Join.ROUND);
    mPaint.setStrokeCap(Paint.Cap.ROUND);
    mPaint.setStrokeWidth(1);





    view1=new MyView(this);
    params =new ViewGroup.LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
    addContentView(view1, params);

   // bt1.setOnClickListener(this);
   // bt2.setOnClickListener(this);



}
public class MyView extends View implements android.view.GestureDetector.OnGestureListener{

    private Bitmap  mBitmap;
    private Canvas  mCanvas;
    private Path    mPath;
    private Paint   mBitmapPaint;
    private GestureDetector gestureScanner;

    public MyView(Context c) 
    {
        super(c);
        mPath = new Path();
        mBitmapPaint = new Paint(Paint.DITHER_FLAG);
        gestureScanner=new GestureDetector(this);

    }

    @Override
   protected void onSizeChanged(int w, int h, int oldw, int oldh) 
   {
        super.onSizeChanged(w, h, oldw, oldh);
        mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
   }

    @SuppressLint("DrawAllocation")
    @Override
    protected void onDraw(Canvas canvas) 
    {

        canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
        canvas.drawPath(mPath, mPaint);

    }





    @Override
    public boolean onTouchEvent(MotionEvent event) 
    {


        return gestureScanner.onTouchEvent(event);


    }

    public boolean onDown(MotionEvent arg0) 
    {

        x1=arg0.getX();
        y1=arg0.getY();


        if(count==-1)
        {
            mPath.reset();
            mPath.moveTo(pointx[j],pointy[j]);
        }

        else if(count==0)////    storing initial points 
        {
           mPath.moveTo(x1, y1);
           mCanvas.drawCircle(x1,y1,10, mPaint);
           x0=x1;
           y0=y1;
           pointx[i]=x1; /// storing all points in array 
           pointy[i]=y1;
        }

        else if(count>0)
        {
            mPath.moveTo(x_current,y_current);
            mCanvas.drawCircle(x_current,y_current,10, mPaint);

        }
        count++;

        invalidate();

        return true;
    }

    @Override
    public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,float arg3) 
    {


         x_current=arg1.getX();
         y_current=arg1.getY();



         i++;
         pointx[i]=x_current;
         pointy[i]=y_current;
         mPath.lineTo(x_current,y_current);
         mCanvas.drawPath(mPath, mPaint);
         invalidate();
        return true;
    }

    public boolean onSingleTapUp(MotionEvent e) 
    {

         mPath.moveTo(x_current,y_current);
         mPath.lineTo(x0,y0);
         mCanvas.drawPath(mPath, mPaint);
         invalidate();

         return true;
    }
    public boolean onDoubleTapUp(MotionEvent e) 
    {

        return false;

    }
    public void onLongPress(MotionEvent e)
    {

        for(j=0;j<=i;j++)
        {
            if((e.getX()>pointx[j]-20 && e.getX()<pointx[j]+20) && (e.getY()>pointy[j]-20 && e.getY()<pointy[j]+20))
            {
                mPaint.setColor(Color.BLUE);
                mCanvas.drawCircle(pointx[j],pointy[j],20, mPaint);
                count=-1;
                invalidate();
                mPaint.setColor(0xFFFF0000);
                break;

            }
        }

    }

    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2,float distanceX, float distanceY) 
    {

        return false;
    }

    @Override
    public void onShowPress(MotionEvent e) 
    {


    }
}

public void onClick(View view)
{
    switch(view.getId())
    {
          case R.id.button1:


                break;
          case R.id.button2:

               // Intent intent1=new Intent();
               // startActivity(intent1);
                break;
    }


}

public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.activity_crop__image__activity1, menu);
    return true;
}

}

Answer 1

If you want both your custom view and components from xml layout to appear on the screen, create a RelativeLayout and set it as activity's view. Then add your cutom view to that layout and inflate the view from your .xml file using relative layout as a parent.

Like this:

RelativeLayout relativeLayout = new RelativeLayout(this);
setContentView(relativeLayout);

layout.addView(myView);

LayoutInflater inflater = LayoutInflater.from(this);
inflater.inflate(R.layout.activity_crop__image__activity1, relativeLayout);

About the last question try sth like this in your onTouch method

public boolean onTouch(View v, MotionEvent event) {
    switch(event.getAction()){
    case MotionEvent.ACTION_DOWN:
    tx = event.getX();  // get coordinates when you touch the screen
    ty = event.getY();
    break;
    case MotionEvent.ACTION_MOVE:
    newX = event.getX();   // get coordinates when you move the finger
    newY = event.getY();

    for(int i = 0; i < pointx.length; i++){ // iterate over points array
        if(((tx - pointx[i])*(tx - pointx[i]) + (ty - pointy[i])*(ty - pointy[i])) < 20){
            // if you touched within 20 pixels of the polygon's vertex
            // ...
            // create Path anew replacing that vertex with coordinates newX and newY
            }
        }
        break;
    }
    return true;
}