Swipe gesture actions for Compose UI

Overview

swipe

swipe.mp4

swipe builds composables that can be swiped left or right for revealing actions. Unlike SwipeToDismiss, it is designed for swipe actions that do not dismiss the composable.

implementation "me.saket.swipe:swipe:1.0.0"
val archive = SwipeAction(
  icon = painterResource(R.drawable.archive),
  background = Color.Green,
  onSwipe = { … }
)

val snooze = SwipeAction(
  icon = painterResource(R.drawable.snooze),
  background = Color.Yellow,
  isUndo = true,
  onSwipe = { … },
)

SwipeableActionsBox(
  startActions = listOf(archive),
  endActions = listOf(snooze)
) {
  // Swipeable content goes here.
}

License

Copyright 2022 Saket Narayan.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • Support for content without background

    Support for content without background

    Currently, when content inside SwipeableActionsBox doesn't have any background or has translucent background color, backgroundUntilSwipeThreshold or swiped actions background is visible.

    With backgroundUntilSwipeThreshold=Color.Transparent and content without background, it looks like this when swipe threshold is reached: Screen Shot 2022-04-30 at 20 14 31

    opened by alashow 4
  • Unintentional swipes while scrolling

    Unintentional swipes while scrolling

    When using swipe actions on scrollable items, swipe actions gets triggered unintentionally.

    It can be triggered more easily when list items have smaller heights.

    https://user-images.githubusercontent.com/5840013/168461727-7986df7c-d956-4636-9622-53bc57e592f5.mp4

    opened by alashow 2
  • Crash when swiped to full width

    Crash when swiped to full width

    Crash happens when swiping/dragging content to it's full width.

    Stacktrace:

    java.lang.IllegalStateException: Couldn't find any swipe action. Width=1160, offset=1162.4507, actions=[me.saket.swipe.SwipeAction@c737efb, me.saket.swipe.SwipeAction@effbb18]
     	at me.saket.swipe.ActionFinder.actionAt(ActionFinder.kt:49)
     	at me.saket.swipe.ActionFinder.actionAt(ActionFinder.kt:24)
     	at me.saket.swipe.SwipeableActionsBoxKt$SwipeableActionsBox$1.invoke(SwipeableActionsBox.kt:82)
     	at me.saket.swipe.SwipeableActionsBoxKt$SwipeableActionsBox$1.invoke(SwipeableActionsBox.kt:56)
     	at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:116)
    

    Screenrecord: https://kapture-4t6s5u7zc-alashov.vercel.app

    bug 
    opened by alashow 2
  • Disable SwipeAction and active swipe by other button

    Disable SwipeAction and active swipe by other button

    Hi! i have an card in compose and i added your lib, i liked a lot. but i want do things that im not sure if your lib can do that, i dont fint any documentation about your lib too.

    The questions is, how can i disable the swipe action after swipe one time? i want to my user just swipe once.

    The other questions is how can i call the swipeaction without swipe? for example, i have one button in my card and i want when i click in this button show the swipe action animation, how can i do that things?

    opened by GledsonLScruz 2
  • NPE when swiping on the side without actions

    NPE when swiping on the side without actions

    Hello,

    NPE happens when swiping the side without any actions. It's little bit harder to trigger when swipeThreshold=40.dp but it still crashes when item is dragged 40.dp. With swipeThreshold=1.dp it crashes right away when swipe starts.

    java.lang.NullPointerException
        at me.saket.swipe.SwipeableActionsBoxKt$SwipeableActionsBox$1.invoke(SwipeableActionsBox.kt:88)
        at me.saket.swipe.SwipeableActionsBoxKt$SwipeableActionsBox$1.invoke(SwipeableActionsBox.kt:56)
        at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:116)
        at androidx.compose.runtime.internal.ComposableLambdaImpl$invoke$1.invoke(ComposableLambda.jvm.kt:127)
        at androidx.compose.runtime.internal.ComposableLambdaImpl$invoke$1.invoke(ComposableLambda.jvm.kt:127)
    

    https://user-images.githubusercontent.com/5840013/166129826-b99f6c11-efff-4d4d-b68d-1347ba5e6f8b.mp4

    bug 
    opened by alashow 0
  • No matching variant of me.saket.swipe:swipe:1.0.0 was found

    No matching variant of me.saket.swipe:swipe:1.0.0 was found

    Describe the bug Gradle will crash while creating a new build after the library is implemented

    To Reproduce Steps to reproduce the behaviour (including any applicable code):

    1. Set AGP to 7.4.0-alpha10
    2. Implement me.saket.swipe:swipe:1.0.0
    3. Create rc build variant
    4. Execute ./gradlew assembleRc

    Expected behaviour Gradle will create a new build

    * What went wrong:
    Execution failed for task ':app:extractIncludeRcProto'.
    > Could not determine the dependencies of null.
    32 problems were found storing the configuration cache, 18 of which seem unique.
       > Could not resolve all task dependencies for configuration ':app:rcCompileClasspath'.
          > Could not resolve me.saket.swipe:swipe:1.0.0.
            Required by:
                project :app
             > No matching variant of me.saket.swipe:swipe:1.0.0 was found. The consumer was configured to find an API of a component, preferably optimized for Android, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'rc', attribute 'com.android.build.api.attributes.AgpVersionAttr' with value '7.4.0-alpha10', attribute 'org.jetbrains.kotlin.platform.type' with value 'androidJvm' but:
                 - Variant 'debugVariantMavenApiPublication' capability me.saket.swipe:swipe:1.0.0 declares an API of a component:
                     - Incompatible because this component declares a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'debug' and the consumer needed a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'rc'
                     - Other compatible attributes:
                         - Doesn't say anything about com.android.build.api.attributes.AgpVersionAttr (required '7.4.0-alpha10')
                         - Doesn't say anything about its target Java environment (preferred optimized for Android)
                         - Doesn't say anything about org.jetbrains.kotlin.platform.type (required 'androidJvm')
                 - Variant 'debugVariantMavenJavaDocPublication' capability me.saket.swipe:swipe:1.0.0 declares a runtime of a component:
                     - Incompatible because this component declares a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'debug' and the consumer needed a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'rc'
                     - Other compatible attributes:
                         - Doesn't say anything about com.android.build.api.attributes.AgpVersionAttr (required '7.4.0-alpha10')
                         - Doesn't say anything about its target Java environment (preferred optimized for Android)
                         - Doesn't say anything about org.jetbrains.kotlin.platform.type (required 'androidJvm')
                 - Variant 'debugVariantMavenRuntimePublication' capability me.saket.swipe:swipe:1.0.0 declares a runtime of a component:
                     - Incompatible because this component declares a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'debug' and the consumer needed a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'rc'
                     - Other compatible attributes:
                         - Doesn't say anything about com.android.build.api.attributes.AgpVersionAttr (required '7.4.0-alpha10')
                         - Doesn't say anything about its target Java environment (preferred optimized for Android)
                         - Doesn't say anything about org.jetbrains.kotlin.platform.type (required 'androidJvm')
                 - Variant 'debugVariantMavenSourcePublication' capability me.saket.swipe:swipe:1.0.0 declares a runtime of a component:
    - Task `:app:compileRcAidl` of type `com.android.build.gradle.tasks.AidlCompile`: value 'configuration ':app:rcCompileClasspath' files' failed to visit file collection
                     - Incompatible because this component declares a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'debug' and the consumer needed a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'rc'
                     - Other compatible attributes:
                         - Doesn't say anything about com.android.build.api.attributes.AgpVersionAttr (required '7.4.0-alpha10')
                         - Doesn't say anything about its target Java environment (preferred optimized for Android)
                         - Doesn't say anything about org.jetbrains.kotlin.platform.type (required 'androidJvm')
                 - Variant 'releaseVariantMavenApiPublication' capability me.saket.swipe:swipe:1.0.0 declares an API of a component:
                     - Incompatible because this component declares a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'release' and the consumer needed a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'rc'
                     - Other compatible attributes:
                         - Doesn't say anything about com.android.build.api.attributes.AgpVersionAttr (required '7.4.0-alpha10')
                         - Doesn't say anything about its target Java environment (preferred optimized for Android)
                         - Doesn't say anything about org.jetbrains.kotlin.platform.type (required 'androidJvm')
                 - Variant 'releaseVariantMavenJavaDocPublication' capability me.saket.swipe:swipe:1.0.0 declares a runtime of a component:
                     - Incompatible because this component declares a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'release' and the consumer needed a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'rc'
                     - Other compatible attributes:
                         - Doesn't say anything about com.android.build.api.attributes.AgpVersionAttr (required '7.4.0-alpha10')
                         - Doesn't say anything about its target Java environment (preferred optimized for Android)
                         - Doesn't say anything about org.jetbrains.kotlin.platform.type (required 'androidJvm')
                 - Variant 'releaseVariantMavenRuntimePublication' capability me.saket.swipe:swipe:1.0.0 declares a runtime of a component:
                     - Incompatible because this component declares a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'release' and the consumer needed a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'rc'
                     - Other compatible attributes:
                         - Doesn't say anything about com.android.build.api.attributes.AgpVersionAttr (required '7.4.0-alpha10')
                         - Doesn't say anything about its target Java environment (preferred optimized for Android)
                         - Doesn't say anything about org.jetbrains.kotlin.platform.type (required 'androidJvm')
                 - Variant 'releaseVariantMavenSourcePublication' capability me.saket.swipe:swipe:1.0.0 declares a runtime of a component:
                     - Incompatible because this component declares a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'release' and the consumer needed a component, as well as attribute 'com.android.build.api.attributes.BuildTypeAttr' with value 'rc'
                     - Other compatible attributes:
                         - Doesn't say anything about com.android.build.api.attributes.AgpVersionAttr (required '7.4.0-alpha10')
                         - Doesn't say anything about its target Java environment (preferred optimized for Android)
                         - Doesn't say anything about org.jetbrains.kotlin.platform.type (required 'androidJvm')
    
    opened by nuhkoca 3
  • Opposite side's swipe action color flickering when swiping fast

    Opposite side's swipe action color flickering when swiping fast

    This is probably an edge case but when swiping left and right quickly, swipe action's background color flicker with opposite side's color.

    https://user-images.githubusercontent.com/5840013/168461870-b77a15c2-a5b8-44b5-92e9-7f2b42ffc0a4.mp4

    opened by alashow 2
  • Option to limit swiping distance

    Option to limit swiping distance

    Currently content can be swiped/dragged fully. I think UX is better when swipeable distance is limited so an option to limit it would be a good addition.

    enhancement 
    opened by alashow 1
Releases(1.0.0)
Owner
Saket Narayan
Building @square @cashapp and an Android GDE
Saket Narayan
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨

?? ?? ?? Compose flocking Ants(boids) ?? ?? ?? Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ?? , usi

Chetan Gupta 38 Sep 25, 2022
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Md. Mahmudul Hasan Shohag 186 Jan 1, 2023
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

MindOrks 382 Jan 5, 2023
A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.

Multiplatform Compose A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many comp

Clément Beffa 548 Jan 7, 2023
K5-compose is a sketchy port of p5.js for Jetpack Compose

k5-compose k5-compose is a sketchy port of P5.js for Jetpack Compose Desktop. This library provides you a playground to play with your sketches so you

Nikhil Chaudhari 176 Nov 22, 2022
Jetpack Compose based project, used to stress-testing compose features / integrations and explore non-trivial functionality

Project containing Jetpack Compose samples For pagination & network images it uses CATAAS. Known issues Navigation-Compose Issue with fast tapping on

Denis Rudenko 59 Dec 14, 2022
Pokedex Compose is an independent re-write of a demo application by the name of Pokedex, but written in jetpack compose.

Pokedex Compose Pokedex Compose is an independent re-write of a similar project by the name of Pokedex. I am recreating the UI but I am doing it using

Jose Patino 4 May 1, 2022
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

BHAVNA THACKER 3 Dec 31, 2022
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

omar 1 Aug 11, 2022
Compose-Instagram-Profile-UI - Instagram profile screen UI using android jetpack compose

Compose-Intsgram-Profile-UI Instagram profile screen UI using android jetpack co

TILLERN 1 Mar 8, 2022
Luis David Orellana 3 Jun 20, 2022
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Canopas Software 180 Jan 2, 2023
Lock Screen-Compose - Lock Screen with Jetpack Compose

Lock_Screen-Compose 此專案為Jetpack Compose練習題.

Kanneki Chen 0 Jan 26, 2022
Compose-Ratingbar-library - A simple implementation for rating bar in Jetpack Compose

Compose-Ratingbar-library - A simple implementation for rating bar in Jetpack Compose

Mahmoud Hussein 14 Dec 21, 2022
Compose Curved-Scroll is an Android Jetpack Compose library made with ❤️

Compose-Curved-Scroll-library Compose Curved-Scroll is an Android Jetpack Compos

mohamed tamer 23 Aug 24, 2022
Android.compose.squircle - Android LightWeight Squircle Library for JetPack Compose

Android LightWeight Squircle Library for JetPack Compose Usage Based on Compose

Quang Nguyen 9 Jul 5, 2022
Compose-navigation - Set of utils to help with integrating Jetpack Compose and Jetpack's Navigation

Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose

Adam Kobus 5 Apr 5, 2022
Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

Mori Atsushi 3 Dec 15, 2022
Compose-html - An Android library which provides HTML support for Jetpack Compose texts

HtmlCompose An Android library which provides HTML support for Jetpack Compose t

iRewardHealth 43 Dec 29, 2022