Skip to content

5.x | Drag&Drop and Swipe

Davide Steduto edited this page Jun 25, 2016 · 22 revisions

In this page

  • Activation
  • Custom activation per Item Type
  • Behaviors in action
  • Dragging an item
    • Long press activation
    • Handle View
  • Swiping the front view
  • Callbacks

Activation

//First, assign the adapter to the RecyclerView
mRecyclerView.setAdapter(mAdapter);

//Enable long press drag
mAdapter.setLongPressDragEnabled(true);

//Enable handle drag
mAdapter.setHandleDragEnabled(true);

//Enable Swipe-To-Dismiss
mAdapter.setSwipeEnabled(true);

Custom activation per Item Type (from beta 7)

There are 2 ways to customize if a specific item type is Draggable or Swipeable:

  • Using methods from item interface IFlexible or AbstractFlexibleItem: call setDraggable() and setSwipeable(), in the constructor or in the binding depends by your use case.
  • Alternatively, override the 2 methods isDraggable(), isSwipeable() inside the implementation of the FlexibleViewHolder to return always true.

By default items are NOT Draggable nor Swipeable.

Behaviors in action (in FlexibleViewHolder)

Override the following methods from FlexibleViewHolder class (displaying default values):

/**
 * Allows to set elevation while the view is activated.
 * <p>Override to return desired value of elevation on this itemView.</p>
 *
 * @return never elevate, returns 0dp if not overridden
 */
public float getActivationElevation() {
	return 0f;
}

/**
 * Allows to activate the itemView when Swipe event occurs.
 * <p>This method returns always false; Extend with "return true" to Not expand or collapse
 * this ItemView onClick events.</p>
 *
 * @return always false, if not overridden
 */
protected boolean shouldActivateViewWhileSwiping() {
	return false;
}

/**
 * Allows to add and keep item selection if ActionMode is active.
 * <p>This method returns always false; Extend with "return true" to add item to the ActionMode
 * count.</p>
 *
 * @return always false, if not overridden
 */
protected boolean shouldAddSelectionInActionMode() {
	return false;
}

These 2 methods are already implemented to handle the activation/selection in combination with the ActionMode. You can override if you want more customization.

public void onActionStateChanged(int position, int actionState);
public void onItemReleased(int position);

Dragging an item

Long press activation
Handle View

The Handle View is created in the ViewHolder:

static final class ViewHolder extends FlexibleViewHolder {

	...
	public ImageView mHandleView;

	public ViewHolder(View view, FlexibleAdapter adapter) {
		super(view, adapter);
		//I left this part of the code free to be customized by the developer
		//So he can decide what to do in case the functionality is
		//enabled/disabled at runtime
		this.mHandleView = (ImageView) view.findViewById(R.id.row_handle);
		//Until the method is final, the logic inside the next method
		//can be inserted here.
		setDragHandleView(mHandleView);
	}

	//In beta7 this method is still declared final and cannot be overridden.
	//With next release it will become available to be customized.
	@Override
	protected void setDragHandleView(@NonNull View view) {
		if (mAdapter.isHandleDragEnabled()) {
			view.setVisibility(View.VISIBLE);
			super.setDragHandleView(view);
		} else {
			view.setVisibility(View.GONE);
		}
	}
}

Swiping the front view

Different background can be shown by overriding the following methods of FlexibleViewHolder class:

//Inner class
static final class ViewHolder extends FlexibleViewHolder {
	...
	private View frontView;
	private View rearLeftView;
	private View rearRightView;
	
	public ViewHolder(View view, FlexibleAdapter adapter) {
		super(view, adapter);
		...
		this.frontView = view.findViewById(R.id.front_view);
		this.rearLeftView = view.findViewById(R.id.rear_left_view);
		this.rearRightView = view.findViewById(R.id.rear_right_view);
	}
	
	@Override
	public View getFrontView() {
		return frontView;//default itemView
	}
	
	@Override
	public View getRearLeftView() {
		return rearLeftView;//default null
	}
	
	@Override
	public View getRearRightView() {
		return rearRightView;//default null
	}
}

XML Layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="?android:attr/listPreferredItemHeightLarge">

	<RelativeLayout
		android:id="@+id/front_view"
		.../>

	<RelativeLayout
		android:id="@+id/rear_left_view"
		.../>

	<RelativeLayout
		android:id="@+id/rear_right_view"
		.../>

</FrameLayout>
Limitations

Only Swipe-To-Dismiss is supported. Item half swipe cannot be implemented due to how the android.support.v7.widget.helper.ItemTouchHelper is done. Half swipe can be done with others means, please see issues #98 and #100. See also commits of Apr 25, 2016.

When front view is swiped left or right, you should do/show something. A nice example is Gmail app, study it for precise behaviors.

Callbacks (from beta7)

The method getItemTouchHelperCallback() returns the instance of the Callback already initialized by the Adapter so you can add more customization for dragging and swiping.

When a drag or swipe event is fired by the user, the onActionStateChanged(viewHolder, actionState) is called before the event is propagated. This is useful, for example, to disable the widget SwipeRefreshLayout when user starts dragging an item, because these 2 use cases are not compatible each other's.

Note: OnActionStateListener is already extended by the listeners OnItemMoveListener and OnItemSwipeListener.

Clone this wiki locally