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:
|
1 2 3 |
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
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<com.jmedeisis.draglinearlayout.DragLinearLayout xmlns:android="https://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="https://www.journaldev.com/10200/@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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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.
This brings an end to android drag drop example. You can download the final Android DragLinearLayout Project from the below link.
Reference: GitHub Project