B4A Library [B4X] [XUI] AS Swipe Card - a tinder like swipeable card view [Payware]

Alexander Stolte · May 6, 2020

Hello Community,

This library is not free, because, it cost a lot of time and gray hair to create such views.

AS Swipe Card - a tinder like swipeable card view

a tinder like swipeable card viewhttps://www.b4x.com/android/forum/threads/b4x-xui-as-swipe-card-a-tinder-like-swipeable-card-view-payware.117415/#content

payhip.com

Thanks for your understanding.

This library is compatible and tested with B4A,B4I and B4J!
If you have bugs or a wish then tell me it in the comments.

Features

cross-platform compatible
enable or disable events
add and remove cards
scroll to cards
animations
swipe with fingers
and more...

On B4J and B4I you need a base panel, only this way the events can be triggered by your other control elements, see the example projects to learn more.

ASSwipeCard
Author: Alexander Stolte
Version: 2.00

ASSwipeCard
- Events:
  - BaseResize (Width As Double, Height As Double)
  - IndexChanged (index As Int)
  - LazyLoadingAddContent (Parent As B4XView, Value As Object)
  - ReachEnd
  - SwipeStateChange (state As Int)
  - SwipeStateChanged (state As Int)
- Functions:
  - AddCard (xpnl As B4XView, Tag As Object) As String
  - Base_Resize (Width As Double, Height As Double) As String
  - Class_Globals As String
  - Clear As String
    Clears all cards
  - Commit As String
  - DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
    Base type must be Object
  - getBase As B4XView
  - GetCard (Index As Int) As B4XView
  - getCardBackground As B4XView
  - getCurrentIndex As Int
  - getLazyLoadingExtraSize As Int
  - getSize As Int
  - getTag (Index As Int) As Object
  - IniParent (parent As B4XView) As String
  - Initialize (Callback As Object, EventName As String) As String
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - NextCard (swipe_state As Int)
  - PreviousCard (swipe_state As Int)
  - RemoveCard (Index As Int) As String
  - setCurrentIndex (index As Int) As String
  - setLazyLoadingExtraSize (ExtraSize As Int) As String
  - SwipeState_BOTTOM As Int
  - SwipeState_LEFT As Int
  - SwipeState_NEUTRAL As Int
  - SwipeState_RIGHT As Int
  - SwipeState_TOP As Int
  - SwipeStateRandom As Int
- Properties:
  - Base As B4XView [read only]
  - CardBackground As B4XView [read only]
  - CurrentIndex As Int
  - LazyLoadingExtraSize As Int
  - Size As Int [read only]
SwipeCardItems
- Fields:
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - Tag As Object
  - xpnl_cardbase As B4XView
- Functions:
  - Initialize
    Initializes the fields to their default value.

Changelog

1.00
- Release
1.01
- Add Designer Property: EnableLeftRightSwipe -Enabled or Disabled the swipe gesture for left and right swiping
- Add Designer Property: EnableTopBottomSwipe -Enabled or Disabled the swipe gesture for top and bottom swiping
1.02
- Add Event "SwipeStateChange" - Triggers when the card is moved with the finger in one direction e.g. LEFT,RIGHT,TOP,BOTTOM or NEUTRAL
- Event "SwipeStateChanged" - Triggers now only when the user has released the card
- Add Clear - clears all cards
1.03
- get CurrentIndex is now readable
1.04
- Add Designer Properties - If true then the previous card is shown as next card if you swipe in the right direction
  - SwipeLeft2Previous
  - SwipeRight2Previous
  - SwipeTop2Previous
  - SwipeBottom2Previous
1.05
- BugFixes for the Features of V1.04
1.06
- BugFix
1.07
- BugFix
1.08
- Add Designer Property Rotation - activates or deactivates the rotation during the movement
  - Default: True
1.09
- BugFixes
1.10
- Designer BugFixes
1.11
- BugFixes
- Base_Resize is now Public
2.00
- Add Designer Property LazyLoading - activates lazy loading
  - Default: False
- Add Designer Property LazyLoadingExtraSize - How many pages to load in advance
  - Default: 5
- Add Event LazyLoadingAddContent - Add here your layout or views
- Add get and set LazyLoadingExtraSize
- Add Commit - Triggers the LazyLoadingAddContent event
  - Call this after you have added the cards

Have Fun
@Alexander Stolte

AS Swipe Card - a tinder like swipeable card view

a tinder like swipeable card viewhttps://www.b4x.com/android/forum/threads/b4x-xui-as-swipe-card-a-tinder-like-swipeable-card-view-payware.117415/#content

payhip.com

Alexander Stolte · Jun 6, 2020

alimanam3386 said:
sorry but I couldn't find where do you mean in the code should I comment out ?

Wait, I'm putting that option in.

Alexander Stolte · Jun 6, 2020

Update

1.01
- Add Designer Property: EnableLeftRightSwipe -Enabled or Disabled the swipe gesture for left and right swiping
- Add Designer Property: EnableTopBottomSwipe -Enabled or Disabled the swipe gesture for top and bottom swiping

alimanam3386 · Jun 6, 2020

Alexander Stolte said:
Update

1.01

Add Designer Property: EnableLeftRightSwipe -Enabled or Disabled the swipe gesture for left and right swiping

Add Designer Property: EnableTopBottomSwipe -Enabled or Disabled the swipe gesture for top and bottom swiping

thank you so much

alimanam3386 · Jul 25, 2020

How can I fix the size of ASSwipeCard1.CardBackground ?

Alexander Stolte · Jul 28, 2020

alimanam3386 said:
How can I fix the size of ASSwipeCard1.CardBackground ?

i'm lost, last time i used the iamir_glide i used the hosted builder and I was wondering why I can't compile...

alimanam3386 said:
How can I fix the size of ASSwipeCard1.CardBackground ?

by using this, a sleep:

B4X:

    Sleep(250)
    ASSwipeCard1.IniParent(xpnl_swipecard_background)

because the layout is resizing with a animation if you start the page...
It is not without reason that i have built a sleep into the example project at the beginning.

The view looks nice with the images.

alimanam3386 · Jul 28, 2020

Alexander Stolte said:
i'm lost, last time i used the iamir_glide i used the hosted builder and I was wondering why I can't compile...

by using this, a sleep:

B4X:

Sleep(250) ASSwipeCard1.IniParent(xpnl_swipecard_background)

because the layout is resizing with a animation if you start the page...
It is not without reason that i have built a sleep into the example project at the beginning.

The view looks nice with the images.

Works nice thank you so much. I made a small donate for your fantastic job.

Ertan · Sep 28, 2020

Hello, I want to create an event when I click on the cards. Can you do that? (click event)

Alexander Stolte · Sep 28, 2020

Ertan said:
Hello, I want to create an event when I click on the cards. Can you do that? (click event)

Add an panel to the card and add the click event.

ykucuk · Nov 2, 2020

Hello,
I have 2 questions.
1- i tried add CustomListView or scrollview into xpnl_cardbase but unfortunately it didn't work. Is there way to add such view into xpnl_cardbase.
2-is it possible show icon or paint xpnl_cardbase (red /green) during swipe event

Alexander Stolte · Nov 3, 2020

ykucuk said:
1- i tried add CustomListView or scrollview into xpnl_cardbase but unfortunately it didn't work. Is there way to add such view into xpnl_cardbase.

No, not without losing the touch gestures.

ykucuk said:
2-is it possible show icon or paint xpnl_cardbase (red /green) during swipe event

The " SwipeStateChanged" is triggered when you swipes or returns to the neutral position.

Alexander Stolte · Aug 17, 2021

Update

1.02
- Add Event "SwipeStateChange" - Triggers when the card is moved with the finger in one direction e.g. LEFT,RIGHT,TOP,BOTTOM or NEUTRAL
- Event "SwipeStateChanged" - Triggers now only when the user has released the card
- Add Clear - clears all cards

alimanam3386 · Aug 17, 2021

Alexander Stolte said:
Update

1.02

Add Event "SwipeStateChange" - Triggers when the card is moved with the finger in one direction e.g. LEFT,RIGHT,TOP,BOTTOM or NEUTRAL

Event "SwipeStateChanged" - Triggers now only when the user has released the card

Add Clear - clears all cards

the attached file has password ?

Alexander Stolte · Aug 17, 2021

alimanam3386 said:
the attached file has password ?

Alexander Stolte said:
This library is not free, because, it cost a lot of time and gray hair to create such views.
Donations from 5€ or 6$ are valid. (You can donate any amount you want )
Please write SwipeCard in the order description, thanks.

Thanks for your understanding.

I sent you a PM since you helped make it a better view.

Mashiane · Sep 10, 2021

Hi

Can one swipe the cards randomly depending on a timer? For example, id like to use them on my main activity as soon as it starts and they can just play a loop.

Thanks.

Alexander Stolte · Sep 10, 2021

Mashiane said:
Can one swipe the cards randomly depending on a timer? For example, id like to use them on my main activity as soon as it starts and they can just play a loop.

you can set the CurrentIndex, example:

B4X:

ASSwipeCard1.CurrentIndex = Rnd(0,ASSwipeCard1.Size -1)

Drago Bratko · Oct 9, 2021

Alexander Stolte said:
Then I change it so that the cards are not automatically increased or decreased and the user has to do this himself in the event.

Was that feature implemented? Can I increment / decrement on my own based on swipe direction ?

Alexander Stolte · Oct 9, 2021

Drago Bratko said:
Was that feature implemented? Can I increment / decrement on my own based on swipe direction ?

No, read the text below, it says why.

Drago Bratko · Oct 9, 2021

Alexander Stolte said:
No, read the text below, it says why.

Yes, that's true in scenario when control is used to 'remove' the card from the list.

In my case, I have bunch of cards, and swipe left moves to the previous card (if on the first, go to last) and swipe right moves to next card (if on last, move to the first).
What do you suggest, how can I implement that?

Alexander Stolte · Oct 9, 2021

Update

V1.03
- get CurrentIndex is now readable

Drago Bratko said:
In my case, I have bunch of cards, and swipe left moves to the previous card (if on the first, go to last) and swipe right moves to next card (if on last, move to the first).
What do you suggest, how can I implement that?

B4X:

Private Sub ASSwipeCard1_SwipeStateChanged(state As Int)
    If state = ASSwipeCard1.SwipeState_LEFT Then
        ASSwipeCard1.CurrentIndex = ASSwipeCard1.CurrentIndex +1
    End If
End Sub

-SwipeStateChanged - Triggers only when the user has released the card

Drago Bratko · Oct 9, 2021

Alexander Stolte said:
-SwipeStateChanged - Triggers only when the user has released the card

You are more than great! Thank you.

Now, only issue which I see is when I slide to right (so I go one card back), then first is shown next card for a split of a second, and then it's replaced with previous one.
Any idea how to handle that?

B4A Library [B4X] [XUI] AS Swipe Card - a tinder like swipeable card view [Payware]

Attachments

Expert

Expert

Active Member

Active Member

Attachments

Expert

Active Member

Active Member

Expert

Well-Known Member

Expert

Expert

Active Member

Expert

Expert

Expert

Active Member

Expert

Active Member

Expert

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency