Introduction

Somewhere we played a game of dragging objects to an appropriate location. We will develop something like this with the same functionality. I have created a mockup of our application.
DragAndroid1.jpg
So let's start with our new application. You know very well how to create a new project and which type of parameter you need to pass. If not then visit http://www.c-sharpcorner.com/UploadFile/88b6e5/first-application-in-android-studio/.
Note: This project requires a minimum SDK version of 12 or greater.
Step 1:
Open your "values/strings.xml" file. We need to create some string resources inside it.
Strings.xml
  1. <string name="intro">Place following persons in Appropriate Position.</string>
  3. <string name="option_1">Mahesh Chand</string>
  4. <string name="option_2">Praveen Kumar</string>
  6. <string name="choice_1">Founder and Editor-in-Chief</string>
  7. <string name="choice_2">Editorial Director, Product Manager</string>
Step 2:
To provide a background color effect, we need to create a custom shape and will pass this to option views. So use the following procedure.
Click on "Project" then open the "res" directory then right-click and select "New" -> "Android Resource File".
Then enter the name "option.xml" and select "drawable" from the drop-down list.
Option.xml
  1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:dither="true" >
  3. <solid android:color="#ffffaa77" />
  4. <corners android:radius="2dp" />
  5. <stroke
  6. android:width="2dp"
  7. android:color="#ffffaa77" />
  8. <padding
  9. android:bottom="5dp"
  10. android:left="10dp"
  11. android:right="10dp"
  12. android:top="5dp" />
  13. </shape>
Step 3:
To provide a background color effect, we need to create a custom shape and pass it to choice views. So use the following procedure.
Click on "Project" then open the "res" directory then right-click and select "New" -> "Android Resource File".
Then enter the name "choice.xml" and select "drawable" from the drop-down list.
choice.xml
  1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:dither="true" >
  3. <solid android:color="#ffffff99" />
  4. <corners android:radius="2dp" />
  5. <stroke
  6. android:dashGap="4dp"
  7. android:dashWidth="2dp"
  8. android:width="2dp"
  9. android:color="#ffffff00" />
  10. <padding
  11. android:bottom="5dp"
  12. android:left="5dp"
  13. android:right="5dp"
  14. android:top="5dp" />
  15. </shape>
Step 4:
Now, open your layout file and paste in the following code.
Activity_drag_drop.xml
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="fill_parent"
  3. android:layout_height="wrap_content"
  4. android:orientation="vertical"
  5. android:padding="10dp"
  6. android:paddingLeft="50dp"
  7. android:paddingRight="50dp" >
  9. <TextView
  10. android:id="@+id/option_1"
  11. android:layout_width="fill_parent"
  12. android:layout_height="wrap_content"
  13. android:layout_margin="5dp"
  14. android:background="@drawable/option"
  15. android:gravity="center"
  16. android:text="@string/option_1"
  17. android:textSize="18sp"
  18. android:textStyle="bold" />
  19. <TextView
  20. android:id="@+id/option_2"
  21. android:layout_width="fill_parent"
  22. android:layout_height="wrap_content"
  23. android:layout_margin="5dp"
  24. android:background="@drawable/option"
  25. android:gravity="center"
  26. android:text="@string/option_2"
  27. android:textSize="18sp"
  28. android:textStyle="bold" />
  30. <TextView
  31. android:id="@+id/choice_1"
  32. android:layout_width="fill_parent"
  33. android:layout_height="wrap_content"
  34. android:layout_margin="5dp"
  35. android:background="@drawable/choice"
  36. android:gravity="center"
  37. android:textSize="18sp"
  38. android:text="@string/choice_1" />
  39. <TextView
  40. android:id="@+id/choice_2"
  41. android:layout_width="fill_parent"
  42. android:layout_height="wrap_content"
  43. android:layout_margin="5dp"
  44. android:background="@drawable/choice"
  45. android:gravity="center"
  46. android:textSize="18sp"
  47. android:text="@string/choice_2" />
  48. </LinearLayout>
The following will be the output of your layout:
DragAndroid2.jpg
Step 5:
Open your "Activity" class. First, we use a resource id and reference it to the views.
First, we define:
  1. private TextView option1, option2, choice1, choice2;
  2. Inside onCreate(), write following code.
  3. //views to drag
  4. option1 = (TextView)findViewById(R.id.option_1);
  5. option2 = (TextView)findViewById(R.id.option_2);
  7. //views to drop onto
  8. choice1 = (TextView)findViewById(R.id.choice_1);
  9. choice2 = (TextView)findViewById(R.id.choice_2);
Your project structure will look like:
DragAndroid3.jpg
Step 6:
The references to layout ids are now done. We will add "TouchListener" to our activity.
  1. private final class ChoiceTouchListener implements View.OnTouchListener {
  2. @Override
  3. public boolean onTouch(View view, MotionEvent motionEvent) {
  4. if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
  5. //setup drag
  6. return true;
  7. }
  8. else {
  9. return false;
  10. }
  11. }
  12. }
We are only interested in cases where the user has touched the View to drag it, so inside the if statement we will set up the drag operation before the "return true" statement.
  1. //setup drag
  2. ClipData data = ClipData.newPlainText("", "");
  3. View.DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
  5. //start dragging the item touched
  6. view.startDrag(data, shadowBuilder, view, 0);
Step 7:
We have created a class that will handle the Touch Event and if the Touch Event is "Down" then we have written the code for starting the dragging of the particular view on the touch that is to be performed.
We now need to write some shortcode to handle the Drag event. So write the following code.
  1. private class ChoiceDragListener implements View.OnDragListener {
  2. @Override
  3. public boolean onDrag(View v, DragEvent dragEvent) {
  4. switch (dragEvent.getAction()) {
  5. case DragEvent.ACTION_DRAG_STARTED:
  6. //no action necessary
  7. break;
  8. case DragEvent.ACTION_DRAG_ENTERED:
  9. //no action necessary
  10. break;
  11. case DragEvent.ACTION_DRAG_EXITED:
  12. //no action necessary
  13. break;
  14. case DragEvent.ACTION_DROP:
  15. //handle the dragged view being dropped over a drop view
  16. View view = (View) dragEvent.getLocalState();
  17. //stop displaying the view where it was before it was dragged
  18. view.setVisibility(View.INVISIBLE);
  19. //view dragged item is being dropped on
  20. TextView dropTarget = (TextView) v;
  21. //view being dragged and dropped
  22. TextView dropped = (TextView) view;
  23. //update the text in the target view to reflect the data being dropped
  24. dropTarget.setText(dropped.getText());
  25. //make it bold to highlight the fact that an item has been dropped
  26. dropTarget.setTypeface(Typeface.DEFAULT_BOLD);
  27. //if an item has already been dropped here, there will be a tag
  28. Object tag = dropTarget.getTag();
  29. //if there is already an item here, set it back visible in its original place
  30. if(tag!=null)
  31. {
  32. //the tag is the view id already dropped here
  33. int existingID = (Integer)tag;
  34. //set the original view visible again
  35. findViewById(existingID).setVisibility(View.VISIBLE);
  36. }
  37. //set the tag in the target view being dropped on - to the ID of the view being dropped
  38. dropTarget.setTag(dropped.getId());
  40. break;
  41. case DragEvent.ACTION_DRAG_ENDED:
  42. //no action necessary
  43. break;
  44. default:
  45. break;
  46. }
  47. return true;
  48. }
  49. }
Step 8:
Add listeners to views. Once again go to "onCreate()" and after the reference of the views, add the following code.
  1. //set touch listeners
  2. option1.setOnTouchListener(new ChoiceTouchListener());
  3. option2.setOnTouchListener(new ChoiceTouchListener());
  5. //set drag listeners
  6. choice1.setOnDragListener(new ChoiceDragListener());
  7. choice2.setOnDragListener(new ChoiceDragListener());
Step 9:
You are done with your coding. What you need to do is just run the application. When you see your application in an emulator or in a device:
DragAndroid4.jpg
Click on the "Mahesh Chand" text view, and drag it to "Founder and Editor-in-Chief" and Drop it there. Perform the same action for "Praveen Kumar".
DragAndroid5.jpg
DragAndroid6.jpg
DragAndroid7.jpg

Summary

Today we learned how to use Drag & Drop functionality of Android SDK. This is a very good feature provided by Android. We can also apply this functionality in other game development applications.