unknown os platform
Android drag and drop bitmap image example with finger on screen | Whats-online.info
whats-online-info

Android drag and drop bitmap image example with finger on screen


Android
2016/12/10 / Science and Tutorials

Android tutorial. Drag and drop a bitmap image on canvas using touch event example. Hold down the image with your finger and move it around on screen.






Download this example at the end of this tutorial.

You love gaming, yeah? And you are an Android developer, Yeah? Excellent this tutorial is for guys like you. I know you would like to know the simplest techniques used to build a simple game. Well, right site for you.

For this Android tutorial, I will teach you how to drag and drop a bitmap image on canvas using your finger as shown below. Hold down the image on the screen and drag it using your finger from one location to another.



First and foremost, I will create three classes which I will explain the work for each in deep details as we progress with the tutorial.

Classes
1.Ballview 
2.MainActivity
3.MyThread

The above classes perform a smooth drag and drop activity on Android programming. 

How they work
On surfaceCreated, we need to start our thread.
When the thread is running, We can draw our canvas, that is, move the bitmap image on the screen.
onSurfaceDestroyed, stop our thread.

BallView Class

BallView.Java

package com.whatsonline.dragobject; import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Color; import android.view.MotionEvent; import android.view.SurfaceHolder; import android.view.SurfaceView; public class BallView extends SurfaceView implements SurfaceHolder.Callback {     private Bitmap bitmap;     private MyThread thread;     private int x=25,y=25;     int width,height;     public BallView(Context context, Bitmap bmp, int w,int h) {         super(context);         width=w;         height=h;         bitmap=bmp;         thread=new MyThread(getHolder(),this);         getHolder().addCallback(this);         setFocusable(true);     }     @Override     public void onDraw(Canvas canvas) {         super.onDraw(canvas);        // bitmap = BitmapFactory.decodeResource(getResources(), bmp);         canvas.drawColor(Color.BLUE);//To make background         canvas.drawBitmap(bitmap, x-(bitmap.getWidth()/2),y-(bitmap.getHeight()/2), null);     }     @Override     public boolean onTouchEvent(MotionEvent event) {         x=(int)event.getX();         y=(int)event.getY();         if(x<25)             x=25;         if(x> width)             x=width;         if(y <25)             y=25;         if(y > height)             y=height;         return true;     }     @Override     public void surfaceChanged(SurfaceHolder holder, int format, int width,int height) {         // TODO Auto-generated method stub     }     @Override     public void surfaceCreated(SurfaceHolder holder) {         thread.startrun(true);         thread.start();     }     @Override     public void surfaceDestroyed(SurfaceHolder holder) {         thread.startrun(false);         thread.stop();     } }

BallView class Inherits the surfaceView class and contains five functions for which three of them are surfaceView libraries.
Also, has a constructor with four parameters  to initialize the following:

1st parameter gets and sets the current context
2nd parameter gets and sets the bitmap image to move around on touch event
3rd parameter gets and sets the width of the android screen device
4th parameter gets and sets the height of the android screen device

Besides, instantiate our MainThread, add Callback for our surface and set it Focusable

Our Constructor

public BallView(Context context, Bitmap bmp, int w,int h) {         super(context);         width=w;         height=h;         bitmap=bmp;         thread=new MyThread(getHolder(),this);         getHolder().addCallback(this);         setFocusable(true);     }

onDraw() contains the Canvas class that defines methods for drawing the bitmap image as shown below.

 @Override     public void onDraw(Canvas canvas) {         super.onDraw(canvas);        // bitmap = BitmapFactory.decodeResource(getResources(), bmp);         canvas.drawColor(Color.BLUE);//To make background         canvas.drawBitmap(bitmap, x-(bitmap.getWidth()/2),y-(bitmap.getHeight()/2), null);     }

onTouchEvent() function gets the positions of the Bitmap image on-screen touch as shown below.

 @Override     public boolean onTouchEvent(MotionEvent event) {         x=(int)event.getX();         y=(int)event.getY();         if(x<25)             x=25;         if(x> width)             x=width;         if(y <25)             y=25;         if(y > height)             y=height;         return true;     }

surfaceChanged(SurfaceHolder holder, int format, int width, int height) This is called immediately after any structural changes (format or size) have been made to the surface.

 @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width,int height) {         // TODO Auto-generated method stub     }

surfaceCreated(SurfaceHolder holder) This is called immediately after the surface is first created.

 @Override     public void surfaceCreated(SurfaceHolder holder) {         thread.startrun(true);         thread.start();     }

surfaceDestroyed(SurfaceHolder holder) This is called immediately before a surface is being destroyed.

 @Override     public void surfaceDestroyed(SurfaceHolder holder) {         thread.startrun(false);         thread.stop();  }


MainThread class

Contains the thread which is a thread of execution in a program, that is, allows several processes to execute.
This class calls the onDraw()  method from the BallView class while the threading is running or has began.

package com.whatsonline.dragobject; import android.graphics.Canvas; import android.view.SurfaceHolder; public class MyThread extends Thread {     private SurfaceHolder msurfaceHolder;     private BallView mballView;     private boolean mrun =false;     public MyThread(SurfaceHolder holder, BallView ballView) {         msurfaceHolder = holder;         mballView=ballView;     }     public void startrun(boolean run) {         mrun=run;     }     @Override     public void run() {         super.run();         Canvas canvas;         while (mrun) {             canvas=null;             try {                 canvas = msurfaceHolder.lockCanvas(null);                 synchronized (msurfaceHolder) {                     mballView.onDraw(canvas);                 }             } finally {                 if (canvas != null) {                     msurfaceHolder.unlockCanvasAndPost(canvas);                 }             }         }     } }



MainActivity Class
On this class, We will instantiate our BallView class and setContentView to our Ballview class as shown below.

package com.whatsonline.dragobject; import android.app.Activity; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.os.Bundle; public class MainActivity extends Activity {     private Bitmap bitmap;     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         int w=getWindowManager().getDefaultDisplay().getWidth()-25;         int h=getWindowManager().getDefaultDisplay().getHeight()-25;         bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.p1);         BallView ballView=new BallView(this, bitmap, w, h);         setContentView(ballView);     } }

If this tutorial has helped you, please like us on our social media links below or subscribe to new updates.












You may also like:


Leave a comment












Subscribe to get replies direct to your mailbox

Submit comment