Sorting RecyclerView Items With A DATABASE

Question

I'm currently working on a music app which has a "Favorite Songs" tab. I'm trying to implement a tool that will allow the users to sort their favorite songs which are stored in a DATABASE using drag & drop.

I'm using ItemTouchHelper for that case, But none of my searches produced a solution that works with a database.

** My list gets populated from the database **

FavoritesPresenter.class

        ItemTouchHelper.SimpleCallback simpleCallback =
                new ItemTouchHelper.SimpleCallback(ItemTouchHelper.UP | ItemTouchHelper.DOWN, 0) {

                    @Override
                    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
                        mRecyclerView.notifyItemMoved(viewHolder.getAdapterPosition(), target.getAdapterPosition());
                        return true;
                    }

                    @Override
                    public void onMoved(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, int fromPos, RecyclerView.ViewHolder target, int toPos, int x, int y) {
                        super.onMoved(recyclerView, viewHolder, fromPos, target, toPos, x, y);

                    }

DataBase.class

int updateOrder(long id, int newPos) {
    ContentValues cv = new ContentValues();
    cv.put(DataBaseOpenHelper.COLUMN_ORDER, newPos);

    String where = DataBaseOpenHelper.COLUMN_ID + "=?";
    String[] whereArgs = {String.valueOf(id)};

    return getWritable().update(DataBaseOpenHelper.TABLE_NAME_FAVORITE, cv, where, whereArgs);
}

I've tried this "solution" here, But obviously it's not working for me. Any suggestions ?

Answer 1

Drag and drop sorting with Android recyclerview is easy and there is no need to use third party library

private final OnStartDragListener mDragStartListener;

public RecyclerListAdapter(OnStartDragListener dragStartListener) {
mDragStartListener = dragStartListener;
// ...
}@Override
public void onBindViewHolder(final ItemViewHolder holder, 
int position) {
// ... holder.handleView.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if (MotionEventCompat.getActionMasked(event) == 
MotionEvent.ACTION_DOWN) {
mDragStartListener.onStartDrag(holder);
}
return false;
}
});
}

For further details check the post below

https://medium.com/@ipaulpro/drag-and-swipe-with-recyclerview-6a6f0c422efd

Answer 2

Using this tutorial (mentioned by Fazel): https://medium.com/@ipaulpro/drag-and-swipe-with-recyclerview-6a6f0c422efd

I have created a solution that is working for me. I dont know if it is the right way, and maybe someone can improve on this answer.

onItemMove() and onMoved() both are getting called whilst I was still dragging the item around. clearView() is only being called once. As I am using Firestore as my database I really only want to update the items once the drag has finished.

I am updating categories, so I have a CategoryFirestoreAdapter that extends the FirestoreAdapter. My sort order saved in the database starts from 1 (not 0).

ItemTouchHelperAdapter

public interface ItemTouchHelperAdapter {

    boolean onItemMove(int fromPosition, int toPosition);

    void onItemDismiss(int position);

    void clearView(); //added this
}

SimpleItemTouchHelperCallback

@Override
public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {

    super.clearView(recyclerView, viewHolder);

    viewHolder.itemView.setAlpha(ALPHA_FULL);

    if (viewHolder instanceof ItemTouchHelperViewHolder) {
        // Tell the view holder it's time to restore the idle state
        ItemTouchHelperViewHolder itemViewHolder = (ItemTouchHelperViewHolder) viewHolder;
        itemViewHolder.onItemClear();
    }
    mAdapter.clearView(); //add this so the method gets called in the CategoryFirestoreAdapter
}

CategoryFirestoreAdapter

public class CategoryFirestoreAdapter
    extends FirestoreAdapter<CategoryFirestoreAdapter.ViewHolder>
    implements ItemTouchHelperAdapter {

@Override
public void clearView() {

    //Update the database here for the items that have moved.

    FirebaseFirestore db = FirebaseFirestore.getInstance();
    ArrayList<DocumentSnapshot> snapshots = getAllItems();

    db.runTransaction(new Transaction.Function<Object>() {

        @Nullable
        @Override
        public Object apply(@NonNull Transaction transaction) {

            for (int i = 0; i < snapshots.size(); i++) {

                DocumentSnapshot snapshot = snapshots.get(i);
                DocumentReference docRef = db.collection("categories").document(snapshot.getId());
                Category category = snapshot.toObject(Category.class);

                Integer sortOrder = category.getSortOrder();
                Integer newSortOrder = i+1;

                if ((i + 1) != sortOrder) {
                    //only update items that have changed.
                    transaction.update(docRef, "sortOrder", newSortOrder); //sortOrder hardcoded - fix this
                }
            }
            return null;
        }
    });
} ....

FirestoreAdapter

protected void onDocumentModified(DocumentChange change) {

//    I changed this as it was moving things around again after updating the db.  
//    I am not sure why, and this may need improving, but this is working for me.

//    Dont handle position changes, just updates.
//    if (change.getOldIndex() == change.getNewIndex()) {
//        // Item changed but remained in same position
//        mSnapshots.set(change.getOldIndex(), change.getDocument());
//        notifyItemChanged(change.getOldIndex());
//    } else {
//        // Item changed and changed position
        mSnapshots.remove(change.getOldIndex());
        mSnapshots.add(change.getNewIndex(), change.getDocument());
//        notifyItemMoved(change.getOldIndex(), change.getNewIndex());
        notifyItemChanged(change.getNewIndex()); //added
        notifyItemChanged(change.getOldIndex()); //added
//    }
}

protected ArrayList<DocumentSnapshot> getAllItems() {
    return mSnapshots;
}