Monday, May 14, 2012

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:
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(> w)
                            x = w;
                        if(> 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
Share and Enjoy

No comments: