Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make your Android Applications better by applying the Drag and drop functionality

    • 0
    • 2
    • 0
    • 1
    • 3
    • 0
    • 0
    • 0
    • 661
    Comment on it

    Drag and Drop functionality provides user a facility to move a data (or object) from one view to another. This tutorial will help you with the development of the Drag and Drop functionality in your android application. For this you require API level 11 or upper. First you need to create a layout

    <LinearLayout 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:orientation="vertical"
        tools:context=".DragDropActivity" >
    
        <!-- Upper part -->
    
        <RelativeLayout
            android:id="@+id/upperPart"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#18CB18" >
    
            <!-- Iamgeview that is used to drag from upper part to lower part -->
    
            <ImageView
                android:id="@+id/item"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:background="@drawable/ic_launcher" />
        </RelativeLayout>
    
        <!-- Lower Part -->
    
        <RelativeLayout
            android:id="@+id/lowerPart"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="#CEDBE7" >
        </RelativeLayout>
    
    </LinearLayout>
    

    In the above layout, movement from upper part to lower part and vice versa is done through the item imageview. Now in Activity class, make the instantiate of imageview, upperPart and lowerPart. In this example the instantiate of imageview is itemToBeDrag. When a user long clicks on itemToBeDrag, its shadow appears. This shadow moves with users touch and moves to the other view if the user drops the item from one view to another.

    // set on long click listener on itemToBeDrag 
    itemToBeDrag.setOnLongClickListener(new OnLongClickListener() {
    
                @Override
                public boolean onLongClick(View view) {
    // DragShowBuilder will do the magic of shoing shadow of the item
                    DragShadowBuilder shadowBuilder = new View.DragShadowBuilder(view);
                    view.setVisibility(View.INVISIBLE);
    /**
    Starts a drag and drop operation. When your application calls this method, it passes a View.DragShadowBuilder object to the system. The system calls this object's onProvideShadowMetrics(Point, Point) to get metrics for the drag shadow, and then calls the object's onDrawShadow(Canvas) to draw the drag shadow itself.
    **/
                    return   view.startDrag(null, shadowBuilder, view, 0);
                }
            });
    
    // set OnDragListener on both view i.e. upperPart and lowerPart
    upperPart.setOnDragListener(new OnDragListener() {
    
                @Override
                public boolean onDrag(View v, DragEvent event) {
                    int action = event.getAction();
                    switch (action) {
                    case DragEvent.ACTION_DRAG_STARTED:
                        Log.d("Drag", "Drag event started");
                        break;
                    case DragEvent.ACTION_DRAG_ENTERED:
                        Log.d("Drag", "Drag event entered into "+v.toString());
                        break;
                    case DragEvent.ACTION_DRAG_EXITED:
                        Log.d("Drag", "Drag event exited from "+v.toString());
                        break;
                    case DragEvent.ACTION_DROP:
                        Log.d("Drag", "Dropped");
    
                        // Returns the local state object sent to the system as part of the call to startDrag().
                        View view = (View) event.getLocalState(); 
                        ViewGroup owner = (ViewGroup) view.getParent();
                        owner.removeView(view);
                        RelativeLayout container = (RelativeLayout) v;
                        container.addView(view);
                        view.setVisibility(View.VISIBLE);
    
                        /*
                         *  Do some thing on dropped
                         */
    
                        break;
                    case DragEvent.ACTION_DRAG_ENDED:
                        Log.d("Storistic", "Drag ended");
                        break;
                    default:
                        break;
                    }
                    return true;
    
                }
            });
    
    lowerPart.setOnDragListener(new OnDragListener() {
    
                @Override
                public boolean onDrag(View v, DragEvent event) {
                    int action = event.getAction();
                    switch (action) {
                    case DragEvent.ACTION_DRAG_STARTED:
                        Log.d("Drag", "Drag event started");
                        break;
                    case DragEvent.ACTION_DRAG_ENTERED:
                        Log.d("Drag", "Drag event entered into "+v.toString());
                        break;
                    case DragEvent.ACTION_DRAG_EXITED:
                        Log.d("Drag", "Drag event exited from "+v.toString());
                        break;
                    case DragEvent.ACTION_DROP:
                        Log.d("Drag", "Dropped");
    
                        View view = (View) event.getLocalState();
                        ViewGroup owner = (ViewGroup) view.getParent();
                        owner.removeView(view);
                        RelativeLayout container = (RelativeLayout) v;
                        container.addView(view);
                        view.setVisibility(View.VISIBLE);
    
                        /*
                         *  Do some thing on dropped
                         */
    
                        break;
                    case DragEvent.ACTION_DRAG_ENDED:
                        Log.d("Storistic", "Drag ended");
                        break;
                    default:
                        break;
                    }
                    return true;
    
                }
            });
    

    Hope you like this :)

 3 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: