Drag and drop in Sketchware

Here is an example of implementation of a simple drag and drop operation in Sketchware. Follow the steps given below.

1. Create a new project in Sketchware.

2. In main.xml, add a LinearH linear1 with width and height match_parent. Inside linear1 and a LinearV linear2 and a LinearH linear3.

For linear3 set background colour as grey.

Inside linear2 add three ImageViews with width and height 50, and scale type FIT_CENTER.

2. Add three Images and set them as images of ImageViews in linear2.

3. Add a Vibrator component vib.

4. Create two More Blocks:
i. setLongClickListener to ImageView:imageview
ii. drag_listener
Note that setLongClickListener block contains an ImageView variable imageview.

5. Define more block setLongClickListener by using following codes:
_imageview.setOnLongClickListener(new View.OnLongClickListener() {
public boolean onLongClick(View v) {
ClipData.Item item = new ClipData.Item(v.getTag().toString());
ClipData dragData = new ClipData(v.getTag().toString(), new String[]{
ClipDescription.MIMETYPE_TEXT_PLAIN }, item);
DragShadowBuilder myShadow = new View.DragShadowBuilder(_imageview);
if (Build.VERSION.SDK_INT >= 24){v.startDragAndDrop(dragData, myShadow, _imageview, 0); } else {
v.startDrag(dragData, myShadow, _imageview, 0); }
return true;
}
});

Note that _imageview used in above code is equivalent to the variable imageview added in the More Block. If suppose you set name of ImageView variable to myimage, then you have to replace _imageview with _myimage.

6. In more block drag_listener, put following codes:
}
protected class myDragEventListener implements View.OnDragListener {
public boolean onDrag(View v, DragEvent event) {
final int action = event.getAction();
switch(action) {
case DragEvent.ACTION_DRAG_STARTED:
if (event.getClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)) {
vib.vibrate((long)100);
v.invalidate();
return true;
}
return false;
case DragEvent.ACTION_DRAG_ENTERED:
v.invalidate();
return true;
case DragEvent.ACTION_DRAG_LOCATION:
return true;
case DragEvent.ACTION_DRAG_EXITED:
v.invalidate();
return true;
case DragEvent.ACTION_DROP:
ImageView view = (ImageView) event.getLocalState();
ImageView myimageview = new ImageView(MainActivity.this);
myimageview.setImageDrawable(view.getDrawable());
LinearLayout container = (LinearLayout) v;
container.addView(myimageview);
v.invalidate();
return true;
case DragEvent.ACTION_DRAG_ENDED:
v.invalidate();
if (event.getResult()) {
vib.vibrate((long)100);
showMessage("The drop was handled.");} else {
showMessage("The drop didn't work.");
}
return true;
default:
showMessage("Unknown action type received by OnDragListener.");
break;
}
return false;
}
};
{

7. In onCreate event,
a. Use an add source directly block and put following codes:
imageview1.setTag("a");
imageview2.setTag("b");
imageview3.setTag("c");

b. Use setLongClickListener more block for the three ImageViews, as shown in image below.
c. Create new myDragEventListener and set it as OnDragListener for linear3 (the target for dropping images). To do this use following codes in an add source directly block:
myDragEventListener dragListen = new myDragEventListener();
linear3.setOnDragListener(dragListen);

8. Save and run the project.

Initial video:

Updated video:
The code for drag listener used in updated video:
}
protected class myDragEventListener implements View.OnDragListener {
public boolean onDrag(View v, DragEvent event) {
final int action = event.getAction();
switch(action) {
case DragEvent.ACTION_DRAG_STARTED:
if (event.getClipDescription().hasMimeType(ClipDescription.MIMETYPE_TEXT_PLAIN)) {
vib.vibrate((long)100);
v.invalidate();
return true;
}
return false;
case DragEvent.ACTION_DRAG_ENTERED:
v.invalidate();
return true;
case DragEvent.ACTION_DRAG_LOCATION:
return true;
case DragEvent.ACTION_DRAG_EXITED:
v.invalidate();
return true;
case DragEvent.ACTION_DROP:
ImageView view = (ImageView) event.getLocalState();
((ImageView)v).setImageDrawable(view.getDrawable());
v.invalidate();
return true;
case DragEvent.ACTION_DRAG_ENDED:
v.invalidate();
if (event.getResult()) {
vib.vibrate((long)100);
showMessage("The drop was handled.");} else {
showMessage("The drop didn't work.");
}
return true;
default:
showMessage("Unknown action type received by OnDragListener.");
break;
}
return false;
}
};

{

Comments

  1. How do I make it that when I shake my phone it generates a yes or no like a magic ball app but you don't press a button but shake the phone

    ReplyDelete
  2. You Can Download Everything For Free Download Free Games Free Android Apps .

    You Can Earn $500 per Month by Your Mobile and Computer at Home Simple Click Here and Join Now

    -------------------------------------

    (Ad Tracking ID: 2842)

    ReplyDelete
  3. Its good you still updating this blog and sharing knowledge. I am Sketchware user since 2018 and just stop using it for a while. Then I remember ur blog. Dont stop sharing knowledge bro !

    ReplyDelete
  4. Could you please make a get location place picker using google map?

    ReplyDelete
  5. Request GPS location manager or fake GPS

    ReplyDelete
  6. How to upload and download and read pdf file from firebase in sketchwaer app?

    ReplyDelete
  7. can help me with a problem i modify the code a little to create layouts just like sketchware but i'm having an error it is creating a lot of widgets and i can't fix it can help me my Whatsapp +5597991501528

    ReplyDelete
  8. Pls sir I would love to contact you privately......I have a project at hand and would be glad to mentored by you

    ReplyDelete
  9. Hi sir

    I'm am working a HTML website application by I need a help
    How to employment drag and drop methods like sketchware.

    ReplyDelete
  10. This is very educational content and written well for a change. It's nice to see that some people still understand how to write a quality post.! drag drop builder

    ReplyDelete
  11. Hi
    Have a problem, the problem is -----
    4. ERROR in /storage/emulated/0/.sketchware/mysc/717/app/src/main/java/com/my/newproject4/MainActivity.java (at line 232)
    protected class myDragEventListener implements View.OnDragListener {
    ^^^^^^^^^^^^^^^^^^^
    Duplicate nested type myDragEventListener

    ReplyDelete

Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Creating a Drawing View in Sketchware

Enable Fullscreen for Youtube videos in WebView

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware