Android drag drop – DragLinearLayout

Filed Under: Android

Today we will learn how to create android drag drop functionality using DragLinearLayout.

Android Drag Drop using DragLinearLayout

Android DragLinearLayout library can be used in place of any LinearLayout. To do this we’ll add a third party library in our build.gradle file as follows:


compile 'com.jmedeisis:draglinearlayout:1.1.0'

The above class library extends the LinearLayout and customises is to add the drag and drop feature.

onTouchEvent method is overridden to programmatically detect the gesture movements and drag and drop accordingly. We’ll get into details of the android drag and drop feature with more details in a later tutorial.

Note: You can view the complete source code of the DragLinearLayout layout in the libraries folder once the gradle is synced.

By default the child views inside the LinearLayout won’t be draggable. For that we’ll call the method
setViewDraggable(View, View) for each ChildView.

Android Drag Drop Example Project Structure

android drag drop DragLinearLayout

This android drag drop project consists of an activity and its layout along with a drawable image used in the layout. In this tutorial we’ve added the attributes of the UI widgets under styles.xml.

Android Drag Drop Code

The activity_main.xml code is given below:


<com.jmedeisis.draglinearlayout.DragLinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="Please Drag and Drop Me Somewhere"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextViewStyle" />

    <TextView
        android:background="@android:color/holo_red_light"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextViewStyle" />

    <TextView
        android:text="This tutorial uses a third party library to drag LinearLayouts"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextViewStyle" />

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:scaleType="centerCrop"
        android:src="@drawable/img_1"
         />

    <TextView
        android:text="Ever thought how dragging songs in an application playlist works!"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="@style/TextViewStyle" />

</com.jmedeisis.draglinearlayout.DragLinearLayout>

The above layout consists of multiple TextViews and an ImageView. These are the ChildViews of the draggable layout.

The MainActivity.java is given below:


package com.journaldev.draggablelinearlayout;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

import com.jmedeisis.draglinearlayout.DragLinearLayout;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        DragLinearLayout dragLinearLayout = (DragLinearLayout) findViewById(R.id.container);
        // set all children draggable except the first (the header)
        for(int i = 0; i < dragLinearLayout.getChildCount(); i++){
            View child = dragLinearLayout.getChildAt(i);
            dragLinearLayout.setViewDraggable(child, child); // the child is its own drag handle
        }
    }
}

In the above code we’ve explicitly set each ChildView as a draggable one. The DraggableLinearLayout class present in the third party library contains the drag and drop implementation.

Note: This library comes with the limitation that it can only support Vertical Orientation of the LinearLayout.

The output below shows the app in action.
android drag drop example, android DragLinearLayout

This brings an end to android drag drop example. You can download the final Android DragLinearLayout Project from the below link.

Reference: GitHub Project

Comments

  1. vinay keshav kelkar says:

    Great tutorial! But whenever you are trying to swap the items they are being re-arranged! Can we stop re-arranging of items?

    1. Anupam says:

      Hi Vinay.
      As you might have seen, I’ve used a third party library which doesn’t support the feature you need.
      One possible workaround for what you need :
      Add a button anywhere on the screen inside a RelativeLayout . Add all the Child Views into a LinearLayout programmatically in the order you need.
      Remove the views from draggableLinearLayout using : dragLinearLayout.removeAllViews();

      Hope this helps.
      Thanks.

      1. Archana Katiyar says:

        You can call removeDragView to stop rearranging a particular view.

        1. Anupam says:

          Calling removeDragView would remove the respective view from the layout. Apparently, this is not what he had asked!

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages