Drag & Drop Part-2: Sample Application

In the previous post, We have gone through a detailed explanation of drag and drop feature and the API provided by the Android to implement it. In this post We will see a demo sample application using this framework.

In this demonstration, I have created an Acticity which hosts a layout over which three ImageView are lying. The upper ImageView is the drag event generator and lower two ImageView are drag event listeners. The upper ImageView is active and have an Image set. The listener ImageView are initially invisible. When you long press the upper ImageView a shadow will appears and as well as the two listeners.

Now you can start dragging the shadow and enter inside a listener view and can exit from that view or drop the shadow there. Once you drop the shadow there the operation will be completed and the listener that accepts the drop will set its image drawable same as the generator view image. The other listener will come into its initial state. 

Observe the color changes of the listener views while operation is going on. Let us have the source code for the same.

Inside the OnLongClickListener custom class, for the shadow you can use DragShadowBuilder object by passing the view object inside its constructor or you can create a custom class extending DragShadowBuilder and override its methods to get desired shape and size and touch point for the shadow like one implemented there.

MianActivity.java

package test.example.draganddrop; import android.app.Activity; import android.content.ClipData; import android.content.ClipData.Item; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Paint.Style; import android.graphics.Point; import android.os.Bundle; import android.util.Log; import android.view.DragEvent; import android.view.View; import android.view.View.DragShadowBuilder; import android.view.View.OnLongClickListener; import android.widget.ImageView; import android.widget.TextView; public class MainActivity extends Activity { private static final String TAG = "Drag Operation"; private ImageView generator, listener1, listener2; private TextView text; OnLongClickListener longClick; MyDragListener dragListener; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); generator = (ImageView) findViewById(R.id.drag_generator); listener1 = (ImageView) findViewById(R.id.drag_listener1); listener2 = (ImageView) findViewById(R.id.drag_listener2); text = (TextView) findViewById(R.id.textView1); longClick = new MyOnLongClickListener(); generator.setOnLongClickListener(longClick); dragListener = new MyDragListener(); listener1.setOnDragListener(dragListener); listener2.setOnDragListener(dragListener); } @Override protected void onResume() { super.onResume(); listener1.setVisibility(View.GONE); listener2.setVisibility(View.GONE); } class MyOnLongClickListener implements View.OnLongClickListener { public boolean onLongClick(View v) { listener1.setVisibility(View.VISIBLE); listener2.setVisibility(View.VISIBLE); ClipData clipData = ClipData.newPlainText("Image", "Picture"); // Default shadow //DragShadowBuilder shadowBuilder = new DragShadowBuilder(v); // Custom Shadow DragShadowBuilder shadowBuilder = new MyDragShadow(v); v.startDrag(clipData, shadowBuilder, v, 0); text.setText("Drag the shadow"); return true; } } class MyDragListener implements View.OnDragListener { private boolean iGot; @SuppressWarnings("deprecation") public boolean onDrag(View v, DragEvent event) { int dragAction = event.getAction(); switch (dragAction) { case DragEvent.ACTION_DRAG_STARTED: v.setBackgroundColor(Color.GREEN); return true; case DragEvent.ACTION_DRAG_ENTERED: v.setBackgroundColor(Color.BLUE); return true; case DragEvent.ACTION_DRAG_LOCATION: Log.i(TAG, "Location: "+event.getX()+":"+event.getY()); return true; case DragEvent.ACTION_DRAG_EXITED: v.setBackgroundColor(Color.YELLOW); return true; case DragEvent.ACTION_DROP: ImageView image = (ImageView)event.getLocalState(); v.setBackgroundDrawable(image.getDrawable()); iGot=true; ClipData clipData= event.getClipData(); Item item = clipData.getItemAt(0); String str= (String) item.getText(); Log.i(TAG,"Item Text :"+str); return true; case DragEvent.ACTION_DRAG_ENDED: if(!iGot) v.setBackgroundColor(Color.WHITE); if(event.getResult()) text.setText("Dropped Successfully"); else text.setText("Drop not Successful"); return true; } return false; } } class MyDragShadow extends View.DragShadowBuilder{ int shadowWidth; int shadowHeight; Paint paint; public MyDragShadow(View v) { super(v); paint=new Paint(Paint.ANTI_ALIAS_FLAG); } @Override public void onProvideShadowMetrics(Point shadowSize, Point shadowTouchPoint) { shadowWidth=getView().getWidth(); shadowHeight=getView().getHeight(); shadowSize.set(shadowWidth, shadowHeight); shadowTouchPoint.set(3*shadowWidth/4, 3*shadowHeight/4); } @Override public void onDrawShadow(Canvas canvas) { paint.setColor(Color.GRAY); paint.setStyle(Style.FILL_AND_STROKE); canvas.drawCircle(shadowWidth/2, shadowHeight/2, shadowHeight/2, paint); } } }

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="test.example.draganddrop.MainActivity" > <ImageView android:id="@+id/drag_generator" android:layout_width="100dp" android:layout_height="100dp" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="82dp" android:src="@drawable/mic_red" /> <ImageView android:id="@+id/drag_listener1" android:layout_width="100dp" android:layout_height="100dp" android:layout_alignParentRight="true" android:layout_alignTop="@+id/drag_listener2" android:layout_marginRight="34dp" android:background="#ff0000" /> <ImageView android:id="@+id/drag_listener2" android:layout_width="100dp" android:layout_height="100dp" android:layout_alignParentBottom="true" android:layout_marginBottom="32dp" android:background="#ff0000" android:layout_toLeftOf="@+id/drag_generator" /> <TextView android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignLeft="@+id/drag_listener2" android:layout_alignParentTop="true" android:layout_marginTop="17dp" android:text="Long Press Below Image" android:textAppearance="?android:attr/textAppearanceMedium" /> </RelativeLayout>