👇 Easy Google Photos style multi-selection for RecyclerViews, powered by Kotlin and AndroidX.

Overview

Drag Select Recycler View

Maven Central Android CI License

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.

Range Mode GIF

Sample

You can download a sample APK.


Gradle Dependency

The Gradle dependency is available via jCenter. jCenter is the default Maven repository used by Android Studio.

Dependency

Add the following to your module's build.gradle file:

dependencies {

  implementation 'com.afollestad:drag-select-recyclerview:2.4.0'
}

Introduction

DragSelectTouchListener is the main class 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.


DragSelectTouchListener

Basics

DragSelectTouchListener attaches to your RecyclerViews. It intercepts touch events when it's active, and reports to a receiver which handles updating UI

val receiver: DragSelectReceiver = // ...
val touchListener = DragSelectTouchListener.create(context, receiver)

Configuration

There are a few things that you can configure, mainly around auto scroll.

DragSelectTouchListener.create(context, adapter) {
  // Configure the auto-scroll hotspot
  hotspotHeight = resources.getDimensionPixelSize(R.dimen.default_56dp)
  hotspotOffsetTop = 0 // default
  hotspotOffsetBottom = 0 // default
  
  // Listen for auto scroll start/end
  autoScrollListener = { isScrolling -> } 

  // Or instead of the above...
  disableAutoScroll()
  
  // The drag selection mode, RANGE is the default
  mode = RANGE
}

The auto-scroll hotspot is a invisible section at the top and bottom of your RecyclerView, when your finger is in one of those sections, auto scroll is triggered and the list will move up or down until you lift your finger.

If you use PATH as the mode instead of RANGE, the behavior is a bit different:

Path Mode GIF

Compare it to the GIF at the top.


Interaction

A receiver looks like this:

class MyReceiver : DragSelectReceiver {

  override fun setSelected(index: Int, selected: Boolean) {
    // do something to mark this index as selected/unselected
    if(selected && !selectedIndices.contains(index)) {
      selectedIndices.add(index)
    } else if(!selected) {
      selectedIndices.remove(index)
    }
  }
  
  override fun isSelected(index: Int): Boolean {
    // return true if this index is currently selected
    return selectedItems.contains(index)
  }
  
  override fun isIndexSelectable(index: Int): Boolean {
    // if you return false, this index can't be used with setIsActive()
    return true
  }

  override fun getItemCount(): Int {
    // return size of your data set
    return 0
  }
}

In the sample project, our adapter is also our receiver.

To start drag selection, you use setIsActive, which should be triggered from user input such as a long press on a list item.

val recyclerView: RecyclerView = // ...
val receiver: DragSelectReceiver = // ...

val touchListener = DragSelectTouchListener.create(context, receiver)
recyclerView.addOnItemTouchListener(touchListener) // important!!

// true for active = true, 0 is the initial selected index
touchListener.setIsActive(true, 0)
Comments
  • Fix for an unexpected behavior when selecting

    Fix for an unexpected behavior when selecting

    The method RecyclerView#getAdapterPosition()returns NO_POSITION until the next layout pass when RecyclerView.Adapter#notifyDataSetChanged() has been called.

    The code on //Drag selection logic was assuming that the value of itemPosition woud be -2 or the index of the pressed item, but if notifyDataSetChanged() had been called, it was passing the conditional with the value NO_POSITION for itemPosition, and therefore selecting the whole range from -1 to the pressed item.

    This was causing the next behavior in some situations.

    selection-error

    The code to replicate the error can be found on 36e2910ca9e3152e37c1e0be363ad75f34b1a76f.

    opened by Carlosph 2
  • Stop drag selection after ACTION_UP on edge case

    Stop drag selection after ACTION_UP on edge case

    As commented on the issue thread #34, the drag selection was not terminated when the user started it with a long press but didn't move the finger before the ACTION_UP event.

    The proposed solution is to terminate the drag selection when an ACTION_UP event is detected in either the onTouchEvent or onInterceptTouchEvent.

    opened by Carlosph 0
  • add selectAll() method

    add selectAll() method

    when adapter data is large, selecting all by using selectRange() method calls too much SelectionListener and makes the UI not response. So I add selectAll() method for less calling the listener callback, firing the listener only once.

    opened by ccl1115 0
  • Using helper classes and interfaces to provide drag selection functio…

    Using helper classes and interfaces to provide drag selection functio…

    …nality instead of using inheritance that is not that flexible when user of library multiple wants to implement multiple recycler view features at once.

    opened by MartinRajniak 0
  • Improved items selectability check, and stop scrolling when an item is not selectable

    Improved items selectability check, and stop scrolling when an item is not selectable

    Main changes:

    • removed getItemCount (was not used at all)
    • renamed isIndexSelectable to isSelectable for consistency
    • check items selectable also during selection, not only at first selection
    • stop drag to select when an item cannot be selected
    • added a DragToSelectListener in order to monitor activation/deactivation of drag to select
    opened by ccodega 0
Releases(2.4.0)
Owner
Aidan Follestad
26 years old. Senior Android Engineer @square. Apple fan. Full stack (Android, iOS, web, backend). Triumph Street Triple RS, Tesla Model 3. Gamer (PS5). Metal.
Aidan Follestad
Interactive, thoroughly customizable maps in native Android, iOS, macOS, Node.js, and Qt applications, powered by vector tiles and OpenGL

Mapbox GL Native A C++ library that powers customizable vector maps in native applications on multiple platforms by taking stylesheets that conform to

Mapbox 4.2k Jan 6, 2023
Google Places - Google places autocomplete widgets for flutter.

flutter_google_places Google places autocomplete widgets for flutter. Getting Started For help getting started with Flutter, view our online documenta

Flutter Community 267 Jan 5, 2023
A migration of Google Maps Application with Flutter & Google Maps APIs including: Maps SDK for Android & IOS, Places API & polylines

google_maps A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

TAD 1 Mar 4, 2022
Easy Google Maps for Flutter

easy_google_maps Easy Google Maps for Flutter on Web and Mobile Getting Started Mobile Follow setup for Mobile Here Web Good to go! EasyGoogleMaps(

Rody Davis 69 Jul 19, 2022
Aplications with google maps and geolocation

Aplications with google maps and geolocation

Richardson Tsavo 4 Jul 26, 2022
This is a Flutter package that uses the Google Maps API to make a TextField that tries to autocomplete places as the user types, with simple smooth animations, making a nice UI and UX.

search_map_place This is a Flutter package that uses the Google Maps API to make a TextField that tries to autocomplete places as the user types, with

Lucas Bernardi 127 Oct 22, 2022
A car rental flutter application using firebase and google maps API

A car sharing & rental app using Flutter, Firebase & Google Maps APIs ?? About the App ?? hopOn is flutter based application for car sharing and renta

Shivani Singh 97 Dec 30, 2022
A Flutter plugin for integrating Google Maps in iOS, Android and Web applications

flutter_google_maps A Flutter plugin for integrating Google Maps in iOS, Android and Web applications. It is a wrapper of google_maps_flutter for Mobi

MarchDev Toolkit 86 Sep 26, 2022
A flutter plugin for Google Maps

IMPORTANT: This plugin is no longer under development Why? We initially built this plugin to fill an early gap in flutter. Since then, Google has made

AppTree Software, Inc 415 Dec 29, 2022
Flutter Google Maps Tutorial

Flutter Google Maps Tutorial YouTube Video Setup Get an API Key at https://cloud.google.com/maps-platform/ Enable Maps SDK for Android, Maps SDK for i

Marcus Ng 85 Nov 30, 2022
Flutter Tutorial - Google Map with Live Location Tracking

Flutter Tutorial - Google Map with Live Location Tracking Build Google Map app with Live Location Tracking in Flutter. ✌   App Preview Android Preview

Samuel Adekunle 10 Dec 22, 2022
Flutter Google Map Example - Day 41

Flutter Google Map Example - Day 41 class Afgprogrammer extends Flutter100DaysOfCode { video() { return { "title": "Flutter Google Map Exa

Mohammad Rahmani 74 Jan 3, 2023
Google Maps Services API Client for Dart

google_maps_services_dart (EXPERIMENTAL) API Specification for Google Maps Platform This Dart package is automatically generated by the OpenAPI Genera

Tuyen VU 0 Nov 1, 2021
A Flutter app using Google Maps SDK & Directions API

Flutter Maps A Flutter app using Google Maps SDK & Directions API Plugins The plugins used in this project are: google_maps_flutter geolocator flutter

Youhaan bootwala 1 Mar 18, 2022
A Flutter app using Google Maps SDK & Directions API

Flutter Maps A Flutter app using Google Maps SDK & Directions API Plugins The plugins used in this project are: google_maps_flutter geolocator flutter

Varun CN 2 Apr 19, 2022
Flutter Google Map Example

Flutter Google Map Example A Flutter application demonstrate google map. Preview Listener and Marker Compass MapTypes Plugin google_maps_flutter from

Bhavik Makwana 67 Sep 14, 2021
Flutter Google Places Autocomplete Widgets

google_maps_webservice General Information This is the Dart Library for Google Maps Webservices. You can find the Google Maps Platform Documentation h

Hadrien Lejard 144 Dec 29, 2022
Place picker on Google Maps for Flutter

Google Maps Place Picker A Flutter plugin which provides 'Picking Place' using Google Maps widget. The project relies on below packages. Map using Flu

Terry Kwon 178 Dec 16, 2022
How To Integrate Customized Google Map in Flutter

How To Integrate Customized Google Map in Flutter Let’s develop a customised Google Maps for the best user experience. Visit : https://medium.com/flut

Jaimil Patel 19 Dec 6, 2022