Drag and Drop UI element
The project describes how to implement an application which allows you to drop and drag UI elements.
Underlying Algorithm:
Basic description of algorithm in step by step form:
1.) Create a Project DragNew
2.) Open and insert following in main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/vg"
>
<ImageView android:id="@+id/img" android:layout_width="wrap_content"android:layout_height="wrap_content" android:src="@drawable/elmer" />
</LinearLayout>
3.) Open and insert following in your strings.xml:
<resources>
<string name="hello">Drag and Drop, MyActivity!</string>
<string name="app_name">Drag and Drop</string>
<string name="drag">drag</string>
</resources>
4.) Add some image in your drawable folder.
5.) Run the application. It allows you to drag and drop the element drawn on screen from one place to another.
Steps to Create:
1.) Open Eclipse. Use the New Project Wizard and select Android Project Give the respective project name i.e. DragNew. Enter following information:
Project name: DragNew
Build Target: Android 2.3.1
Application name: DragNew
Package name: com.sample.dragdrop
Create Activity: MyActivity
On Clicking Finish DragNew code structure is generated with the necessary Android Packages being imported along with DragNew.java. DragNew class will look like following:
package com.sample.dragdrop;
import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MyActivity
extends Activity
{ private View selected_item
= null; private int offset_x
= 0; private int offset_y
= 0; @Override
public void onCreate
(Bundle savedInstanceState
) { super.
onCreate(savedInstanceState
); setContentView
(R.
layout.
main); ViewGroup vg
= (ViewGroup
)findViewById
(R.
id.
vg); vg.
setOnTouchListener(new View.
OnTouchListener() { @Override
public boolean onTouch
(View v, MotionEvent event
) { switch(event.
getActionMasked()) { case MotionEvent.
ACTION_MOVE: int x
= (int)event.
getX() -offset_x
; int y
= (int)event.
getY() -offset_y
;
int w = getWindowManager().getDefaultDisplay().getWidth()- 100;
int h =getWindowManager().getDefaultDisplay().getHeight() - 100;
if(x > w)
x = w;
if(y > h)
y = h;
LinearLayout.LayoutParams lp = newLinearLayout.LayoutParams(
new ViewGroup.MarginLayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT));
lp.setMargins(x, y, 0, 0);
selected_item.
setLayoutParams(lp
); break; default: break; } return true; } }); ImageView img
= (ImageView
)findViewById
(R.
id.
img); img.
setOnTouchListener(new View.
OnTouchListener() { @Override
public boolean onTouch
(View v, MotionEvent event
) { switch(event.
getActionMasked()) { case MotionEvent.
ACTION_DOWN: offset_x
= (int)event.
getX(); offset_y
= (int)event.
getY(); selected_item
= v
; break; default: break; } return false; } }); }}
Output – The final output
If you want to only move image and not view check this code
DragDrop
