Thursday 28 July 2011

How to Draw a Line In Android Using On Touch?

Here is the Way in which we can draw line in OnTouch In Android.


public class LineDrawActivity extends Activity implements OnTouchListener {
/** Called when the activity is first created. */
float x1 = 0, y1 = 0, x2 = 0, y2 = 0;
public static boolean action=false;
private Bitmap mBitmap;
private Canvas mCanvas;
private Paint mBitmapPaint;
Drawer mDrawer;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
LinearLayout mLinearLayout = (LinearLayout) findViewById(R.id.linear);
mLinearLayout.setOnTouchListener((OnTouchListener) this);
mLinearLayout.addView(new Drawer(this));

}

@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
x1 = event.getX();
y1 = event.getY();
action=false;
//v.invalidate();
return true;
case MotionEvent.ACTION_MOVE:
x2 = event.getX();
y2 = event.getY();
v.invalidate();
return true;
case MotionEvent.ACTION_UP:
x2 = event.getX();
y2 = event.getY();
v.invalidate();
action=true;
return true;

}
return false;
}

public class Drawer extends View
{

public Drawer(Context context)
{
super(context);
mBitmap = Bitmap.createBitmap(400, 800, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
mBitmapPaint = new Paint(Paint.DITHER_FLAG);
mBitmapPaint.setColor(Color.MAGENTA);
invalidate();
}

protected void onDraw(Canvas canvas)
{
Paint p = new Paint();
// Canvas mCanvas1=new Canvas(mBitmap);
p.setColor(Color.parseColor("#7CFC00"));
canvas.drawBitmap(mBitmap, 0, 0, p);
// canvas.drawLine(x1, y1, x2 , y2, p);
p.setColor(Color.RED);
// mCanvas1.drawLine(x1, y1, x2, y2,p);
mCanvas.drawLine(x1, y1, x2, y2, mBitmapPaint);
if(action)
{
x1=0;x2=0;y2=0;y1=0;
}// invalidate();
//invalidate();
}

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
MenuInflater inflater=getMenuInflater();
inflater.inflate(R.menu.my_manu, menu);
return super.onCreateOptionsMenu(menu);
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch(item.getItemId()){
case R.id.clear:
try{
mBitmap.eraseColor(android.graphics.Color.BLACK);
mDrawer=new Drawer(this);
action=true;

}catch(IllegalStateException ie){
ie.printStackTrace();
}
}
return super.onOptionsItemSelected(item);
}

}


Here is my XMl Files
Main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/linear"
    >
</LinearLayout>

res/menu

<?xml version="1.0" encoding="utf-8"?>
<menu
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item  android:id="@+id/clear"
    android:title="Clear"
    android:icon="@android:drawable/menuitem_background"
    />
</menu>

Here is output in my  emulator:
If Any one can do more using this than you can share your idea by comments here in blog .

Here is link where you can Download Demo App
https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0B-8An4Rd1nmKZjAxZDkzYzYtNTkyNS00Mjc4LWEzMGItYWJjMTQ3NmI4NTAx&hl=en_US

9 comments:

  1. thanks for posting this very useful

    ReplyDelete
  2. Good work brother....Continue to work like this

    ReplyDelete
  3. @Girish Hey It's Just Some Spent time work ,you are always welcome .Thanks For Comment.

    ReplyDelete
  4. Thanks for posting... the ontouch structure totally helped me with creating and tracking a path, instead of mCanvas.drawLine(x1, y1, x2, y2, mBitmapPaint);, I used mCanvas.drawPath(path, mBitmapPaint);

    public boolean onTouch(View view, MotionEvent event) {
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
    x1 = event.getX();
    y1 = event.getY();
    path.moveTo(event.getX(), event.getY());
    path.addCircle(event.getX(), event.getY(), 1, Path.Direction.CW);
    action=false;
    //v.invalidate();
    return true;
    case MotionEvent.ACTION_MOVE:
    x2 = event.getX();
    y2 = event.getY();
    path.lineTo(event.getX(), event.getY());
    //path.addCircle(event.getX(), event.getY(), 5, Path.Direction.CW);
    view.invalidate();
    return true;
    case MotionEvent.ACTION_UP:
    x2 = event.getX();
    y2 = event.getY();
    path.lineTo(event.getX(), event.getY());
    path.addCircle(event.getX(), event.getY(), 2, Path.Direction.CCW);
    view.invalidate();
    action=true;
    return true;
    }
    return false;
    }
    }

    ReplyDelete
  5. could you post your whole project file instead please? It will be much easier to extract and understand the codes.

    ReplyDelete
  6. good and special thanks

    ReplyDelete