In this tutorial, we will learn how to implement Draggable (drag and drop) layout using  RearrangeableLayout  library in Android Application...

Android Drag and Drop with Examples

08:59 0 Comments





In this tutorial, we will learn how to implement Draggable (drag and drop) layout using RearrangeableLayout library in Android Application through simple example.

Draggable Layout is special type of user interface whose elements can be dragged with in the layout. We can rearrange the position of elements of layout by dragging them manually. To drag an element, just press over the element and move it from one position to another without dropping the element.
In this tutorial, we will implement Draggable layout using RearrangeableLayout library through a simple example in Android Application.

Step 2

Create New Project

Create a new Project in Android Studio, goto File ⇒ New ⇒ New Projects.

Step 3

Download Library

To implement Draggable layout, we need to add RearrangeableLayout library in the project. So, download the RearrangeableLayout library

Step 4

Add RearrangeableLayout library

Unzip the downloaded file into project directory. Open build.gradle file and add RearrangeableLayout as a dependency. Use the following code to add library:
1
2
3
4
5
dependencies {
  ....
    compile project(':library')
  ....
}

Step 5

Create Layout

To implement draggable layout, we need to add com.rajasharan.layout.RearrangeableLayout in our layout file. Also, add few widget such as Button and TextView widget within the scope of the RearrangeableLayout to test draggable functionality. So, open your activity_main.xml file and the following code snippet in there to create a draggable user interface.
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="app.rearrangeablelayout.MainActivity">
    <com.rajasharan.layout.RearrangeableLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/rearrangeable_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:outlineWidth="2dp"
        app:outlineColor="#00FFFF"
        app:selectionAlpha="0.5"
        app:selectionZoom="1.2">
        <!-- add child views with `android:id` attr to
         save position during orientation change -->
        <TextView
            android:id="@+id/texview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sample Demo"
            android:textSize="30sp"
            android:background="@android:color/darker_gray"
            android:layout_margin="15dp" />
        <TextView
            android:id="@+id/textview2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sample Demo with very large text that will overflow in width"
            android:textSize="30sp"
            android:background="@android:color/holo_green_light"/>
        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button"
            android:textSize="30sp"
            android:layout_margin="15dp"/>
        <TextView
            android:id="@+id/textview3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sample"
            android:textSize="15sp"
            android:background="@android:color/holo_orange_light"
            android:layout_margin="15dp"/>
    </com.rajasharan.layout.RearrangeableLayout>
</RelativeLayout>

draggable layout

Step 6

Initialize the RearrangeableLayout object

We need to initialize RearrangeLayout object and use its instance to get updated child view while its dragged.
1
2
3
4
5
6
7
8
9
10
11
12
13
public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";
    private RearrangeableLayout root;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // initialize the RearrangeableLayout object
        root = (RearrangeableLayout) findViewById(R.id.rearrangeable_layout);
    }
}

Step 7

Add Child View Position Listener

Next, we need to receive updated position of a child view after child view is dragged. To do so, we will implement position listeners to listen on the child view position changes. RearrangeLayout library has methods to track element’s movement. So, create a method, named childPosiitonListener() and set position listener on layout instance using setChildPositionListener() method and pass ChildPositionListener object to it. ChildPositionListener has a method named onChildMehtod()which provides new and old position of the element. Override onChildMethod to use the position coordinates of dragged element.
Here is the code snippet for the same :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/**
 *  Added a ChildPositionListener to the root layout to receive
 *  position of child view whenever any child view is dragged
 */
public void childPosiitonListener(){
    root.setChildPositionListener(new RearrangeableLayout.ChildPositionListener() {
        @Override
        public void onChildMoved(View childView, Rect oldPosition, Rect newPosition) {
            Log.e(TAG, childView.toString());
            Log.e(TAG, oldPosition.toString() + " -> " + newPosition.toString());
        }
   });
}

Step 8

Add PreDraw Listener

We can also get the position of child view while  it is being dragged from one position to the other. To receive updated position of child view while it is being dragged, we need to add addOnPreDrawListener to the root layout. So, create a method, named preDrawListener() and call addOnPreDrawListener() method to listen on the drag event on the child view while its dragged from one position to another. Here is the code snippet for the same :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 *  Added a PreviewListener to the root layout to receive update during
 *  child view is dragging
 */
public void preDrawListener(){
    root.getViewTreeObserver()
           .addOnPreDrawListener(new
             ViewTreeObserver.OnPreDrawListener() {
        @Override
        public boolean onPreDraw() {
            Log.e(TAG, "onPrepreview");
            Log.e(TAG, root.toString());
            return true;
        }
    });
}

Step 9

Final code

Here is the final code of the MainActivity.java file
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";
    private RearrangeableLayout root;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // initialize the RearrangeableLayout object
        root = (RearrangeableLayout) findViewById(R.id.rearrangeable_layout);
        // callback method to call childPositionListener() method
        childPosiitonListener();
        // callback method to call preDrawListener() method
        preDrawListener();
    }
    /**
     *  Added a ChildPositionListener to the root layout to receive
     *  position of child view whenever any child view is dragged
     */
    public void childPosiitonListener(){
        root.setChildPositionListener(new RearrangeableLayout.ChildPositionListener() {
            @Override
            public void onChildMoved(View childView, Rect oldPosition, Rect newPosition) {
                Log.e(TAG, childView.toString());
                Log.e(TAG, oldPosition.toString() + " -> " + newPosition.toString());
            }
        });
    }
    /**
     *  Added a PreviewListener to the root layout to receive update during
     *  child view is dragging
     */
    public void preDrawListener(){
        root.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                Log.e(TAG, "onPrepreview");
                Log.e(TAG, root.toString());
                return true;
            }
        });
    }
}


0 Comments

Unknown

0 Comments:

Subscribe to: Post Comments (Atom)