Drag and Drop view outside of Recyclerview

Question

What I want to achieve: I want to have a view inside a scrollable layout (Recyclerview with GridlayoutManager) with tiles (Views) in it. Dragging and dropping an item inside of the RecyclerView should adjust the position of the icon and swap with the other elements. When a drag starts, an icon above the RecyclerView will change to a trash icon and dragging the view to this icon will delete it from this RecyclerView.

I tried this excellent tutorial, but I didn't find a way how to handle dragging outside of the Recyclerview as the ItemTouchHelper.Callback uses only Recycler.ViewHolder elements as possible targets.

The method interpolateOutOfBoundsScroll() gives feedback if the view moves out of the boundaries, but will only give back the total size that is offscreen, but no coordinates. Also, trying to drag the view out of the Recyclerview always results in cutting of the View where it passes the borders of the Recyclerview.

Does anyone have an idea how I could achieve this effect?

Gilbertogilbertson

Answer 1

You are bound by the RecyclerView boundries. You have several options:

1. Make the RecyclerView's layout height to match_parent and to be on top of your upper view (is it a Toolbar?) and add a sticky header of the same size and have an empty transparent layout. That way you could drag ther and see the item floating over there.

2. Instead of dragging an item to a garbage can icon which is located too close to a legitemate upper-right item, make a long click to select the item (and apply a signal like a check mark or a red mask) and make the garbage can appear and delete uppon click (and maybe allow multi item deleting)

Rab

Thanks for your reply! The upper view is a RelativeLayout that contains some Textviews, Imageviews and also the Imageview which should turn into a trash bin. I like your idea with the sticky header. If the trash Imageview is the only element in the sticky header and doesn't fill it completely, is there a way to prevent users from dragging the views to the positions next to the trash Imageview row? I will try this out right now – Gilbertogilbertson

@Gilbertogilbertson just dont swap them if the destination position is in the header – Rab

still thinking on this one, is there no way like with the classic approach from Google to define a drag shadow so only the shadow is dragged not the view itself? – Gilbertogilbertson

@Gilbertogilbertson you can add another view on top which will change to a shadow once dragged – Rab

Sorry, I'm not sure if I understand you correctly. I would still love to drag an item through a recyclerview, which results in sorting all elements and then drag it outside of this view to some place else. But then if I only drag an element that is lying on top of the recyclerview, elements inside the recyclerview will not adjust/slide to the correct position? – Gilbertogilbertson

you should sync them both – Rab

Answer 2

You can achieve this simply by set this attribute for the parent of the RecyclerView:

    android:clipChildren="false"

Edit: thank Adam Katz, I don't know why but sometimes you have to add this to the RecyclerView to make it work:

    android:clipToPadding="false"

Spellbinder

wow I cant believe no one else has commented this. Just an added, it is helpful to add android:clipChildren="false" android:clipToPadding="false" – Aztec

How to handle drop to a View outside the recycler? – Alar