Codelikes: Drag and Drop UI element

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:

packagecom.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;
                        }
                });
    }
}