/ List / Grid

Easy to implement Google Photos style multi-selection for RecyclerViews

Easy to implement Google Photos style multi-selection for RecyclerViews

Drag Select Recycler View

This library allows you to implement Google Photos style multi-selection in your apps! You start by long pressing an item in your list, then you drag your finger without letting go to select more.

drag-select-recyclerview

Live Demo

https://play.google.com/store/apps/details?id=com.afollestad.dragselectrecyclerviewsample

Introduction

DragSelectRecyclerView is the main classes of this library.

This library will handle drag interception and auto scroll logic - if you drag to the top of the RecyclerView,
the list will scroll up, and vice versa.


DragSelectRecyclerView

DragSelectRecyclerView replaces the regular RecyclerView in your layouts. It intercepts touch events
when you tell if selection mode is active, and automatically reports to your adapter.

<com.afollestad.dragselectrecyclerview.DragSelectRecyclerView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />

Setup is basically the same as it would be for a regular RecyclerView. You just set a LayoutManager
and RecyclerView.Adapter to it:

DragSelectRecyclerView list = (DragSelectRecyclerView) findViewById(R.id.list);
list.setLayoutManager(new GridLayoutManager(this, 3));
list.setAdapter(adapter);

Adapter Implementation

You use regular RecyclerView.Adapter's with the DragSelectRecyclerView. However, it has to
implement the IDragSelectAdapter interface
:

public class MainAdapter extends RecyclerView.Adapter<MainAdapter.MainViewHolder>
      implements IDragSelectAdapter {

  @Override
  public void setSelected(int index, boolean selected) {
    // 1. Make this index as selected in your implementation.
    // 2. Tell the RecyclerView.Adapter to render this item's changes.
    notifyItemChanged(index);
  }
  
  @Override
  public boolean isIndexSelectable(int index) {
    // Return false if you don't want this position to be selectable.
    // Useful for items like section headers.
    return true;
  }
 
  // The rest of your regular adapter overrides
}

Checkout the sample project for an in-depth example.


User Activation, Initializing Drag Selection

The library won't start selection mode unless you tell it to. You want the user to be able to active it.
The click listener implementation setup in the adapter above will help with this.

public class MainActivity extends AppCompatActivity implements
      MainAdapter.ClickListener, DragSelectRecyclerViewAdapter.SelectionListener {

  private DragSelectRecyclerView listView;
  private MainAdapter adapter;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // Setup adapter and callbacks
    adapter = new MainAdapter(this);

    // Setup the recycler view
    listView = (DragSelectRecyclerView) findViewById(R.id.list);
    listView.setLayoutManager(
        new GridLayoutManager(this, 
            getResources().getInteger(R.integer.grid_width)));
    listView.setAdapter(adapter);
  }

  /** 
   * See the adapter in the sample project for a click listener implementation. Click listeners 
   * aren't provided by this library.
   */
  @Override
  public void onClick(int index) {
    // Single click will select or deselect an item
    adapter.toggleSelected(index);
  }

  /** 
   * See the adapter in the sample project for a click listener implementation. Click listeners 
   * aren't provided by this library.
   */
  @Override
  public void onLongClick(int index) {
    // Initialize drag selection -- also selects the initial item
    listView.setDragSelectActive(true, index);
  }
}

Auto Scroll

By default, this library will auto scroll. During drag selection, moving your finger to the top
of the list will scroll up. Moving your finger to the bottom of the list will scroll down.

At the start of the activation point at the top or bottom, the list will scroll slowly. The further
you move into the activation area, the faster it will scroll.

You can disable auto scroll, or change the activation hotspot from your layout XML:

<com.afollestad.dragselectrecyclerview.DragSelectRecyclerView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    app:dsrv_autoScrollEnabled="true"
    app:dsrv_autoScrollHotspotHeight="56dp" />

GitHub

Comments