Pages

Android Drag-Drop Button - A custom component for android developers

See on Github

This is an open source android drag button custom component. You can use it on your project to show a drag-able icon and perform any action after user dragged to the edge of the component.

drag drop button screenshot
screenshot

Import aar file on releases directory to your android project to include drag-drop button. Or you can download entire project and open from Android studio and compile to match with your sdk version, then you can import generated aar file to your real project.

Example usage of the drag-drop-button

This is a sample code for drag button inserting into ui and handling events.

xml code to put drag-drop button on the activity
<com.mili.dragdropbutton.DragButton
    android:id="@+id/dragBtn"
    android:layout_width="200dp"
    android:layout_height="200dp"
    custom:imageBtnSizePercentage="0.25"
    custom:dragEndThresholdPercentage="0.10"
    custom:arrowCount="4"
    custom:arrowColor="#42f46e"
    custom:iconFileName="icon2.png">
</com.mili.dragdropbutton.DragButton>

Note:
Needs to define custom namespace on parent tag as
xmlns:custom="http://schemas.android.com/apk/res-auto"

See activity_main.xml on test project for complete source code.


Java code to handle events
DragButton dragButton = (DragButton) findViewById(R.id.dragBtn);
dragButton.setOnDraggedListener(new DragButton.OnDraggedListener() {
    @Override    public void onDragged(DragButton view, MotionEvent e) {
        Log.i("DragBtn", "Dragged");
    }
});
dragButton.setOnDragStartedListener(new DragButton.OnDragStartedListener() {
    @Override    public void onDragStarted(DragButton view, MotionEvent e) {        
        Log.i("DragBtn", "Drag started");
    }
});
dragButton.setOnDragEndedListener(new DragButton.OnDragEndedListener() {
    @Override    public void onDragEnded(DragButton view, MotionEvent e) {
        Log.i("DragBtn", "Drag ended");
    }
});
See MainActivity.java on test project for complete source code.


Custom Attributes on xml

imageBtnSizePercentage
Size of the center icon to draw related to the size of the button. Example- 1 will draw the center icon on entire button, 0.5 will draw half of the size of the button. Any value between 0-1.

dragEndThresholdPercentage
Indicate the percentage area of the threshold to fire the dragged event. Any value between 0-1.


arrowCount
Number of arrow to show the drag direction. Any positive integer value

arrowColor
Color of the arrows in hex format. Example- #42f46e

iconFileName
Path to the image file for center icon on assert folder. 512x512 is the recommended size. 
Example- icon2.png
 

1 comment:

  1. The implementation of custom Android drag-and-drop buttons is commendable. Nice Travel Apps The tutorial's clear instructions and code examples make it easy for developers to incorporate this interactive methods.

    ReplyDelete