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.
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;
}
};
{
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 {
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:
Initial video:
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;
}
};
{
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
ReplyDeleteUse Gyroscope component
DeleteYou Can Download Everything For Free Download Free Games Free Android Apps .
ReplyDeleteYou Can Earn $500 per Month by Your Mobile and Computer at Home Simple Click Here and Join Now
-------------------------------------
(Ad Tracking ID: 2842)
Thanks
ReplyDeleteIts 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 !
ReplyDeleteCould you please make a get location place picker using google map?
ReplyDeleteRequest GPS location manager or fake GPS
ReplyDeleteHow to upload and download and read pdf file from firebase in sketchwaer app?
ReplyDeletecan 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
ReplyDeletePls sir I would love to contact you privately......I have a project at hand and would be glad to mentored by you
ReplyDeleteHi sir
ReplyDeleteI'm am working a HTML website application by I need a help
How to employment drag and drop methods like sketchware.
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
ReplyDeleteHi
ReplyDeleteHave 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