B4A Library [B4X] [XUI] AS CardSlider

A simple card slider with advanced customization options.

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee. :)

1695553520289.png
AS CardSlider Preview.gif

SideGap
The width in dip, how much should the next item be visible. e.g. 80dip left and 80dip right
1695553896450.png

ItemWidth
Here you can set the width of the page, then the SideGap will be calculated automatically.
Important: Set the property before adding pages, because it clears the list.
e.g you want a page width of 100dip
1695554287946.png

Examples
B4X:
    AS_CardSlider1.ItemWidth = 100dip'overrides the SideGap property in the designer

    For i = 0 To 5 -1
 
        Dim xpnl As B4XView = xui.CreatePanel("")
        xpnl.SetLayoutAnimated(0,0,0,AS_CardSlider1.ItemWidth,AS_CardSlider1.mBase.Height)
        'xpnl.Color = xui.Color_ARGB(255,Rnd(0,256),Rnd(0,256),Rnd(0,256))
        xpnl.LoadLayout("frm_Item1")
  
        Dim xlbl_Text As B4XView = xpnl.GetView(0)
        xlbl_Text.Text = "Item #" & (i+1)
  
        AS_CardSlider1.AddPage(xpnl,i)
 
    Next
Lazy Loading
You can enable lazy loading in the designer
1695554780451.png

B4X:
    For i = 0 To 5 -1
 
        Dim xpnl As B4XView = xui.CreatePanel("")
        xpnl.SetLayoutAnimated(0,0,0,AS_CardSlider1.ItemWidth,AS_CardSlider1.mBase.Height)
        AS_CardSlider1.AddPage(xpnl,i)
 
    Next

Private Sub AS_CardSlider1_LazyLoadingAddContent(Parent As B4XView, Value As Object)
 
    Parent.LoadLayout("frm_Item1")
  
    Dim xlbl_Text As B4XView = Parent.GetView(0)
    xlbl_Text.Text = "Item #" & (Value+1)
 
End Sub
Text Example
AS CardSlider Text animation.gif


AS_CardSlider
Author: Alexander Stolte
Version: 1.00

  • AS_CardSlider
    • Events:
      • LazyLoadingAddContent (Parent As B4XView, Value As Object)
      • PageChanged (OldIndex As Int, NewIndex As Int)
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddPage (LayoutPanel As B4XView, Value As Object) As String
      • Base_Resize (Width As Double, Height As Double)
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • getBase As B4XView
        gets the base view (mBase)
      • getCustomListView As b4a.example3.customlistview
      • getIndex As Int
        gets the selected index
      • getItemWidth As Float
        If you set this, then it overrides the SideGap property
        The SideGap is calculated automatically
        Set this,before you add pages
      • getLazyLoadingExtraSize As Int
      • getLoadingPanelColor As Int
      • GetPanel (Index As Int) As B4XView
      • getSize As Int
      • GetValue (Index As Int) As Object
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • NextPage As String
      • PreviousPage As String
      • Refresh As String
      • RefreshLite As String
        Refresh the visible area
      • setCornerRadius (Radius As Int) As String
        sets the corner radius of the view
      • setIndex (Index As Int) As String
      • setItemWidth (Width As Float) As String
      • setLazyLoadingExtraSize (ExtraSize As Int) As String
      • setLoadingPanelColor (Color As Int) As String
        The color of the Loading panel If Base_Resize Is executed
    • Properties:
      • Base As B4XView [read only]
        gets the base view (mBase)
      • CornerRadius
        sets the corner radius of the view
      • CustomListView As b4a.example3.customlistview [read only]
      • Index As Int
        gets the selected index
      • ItemWidth As Float
        If you set this, then it overrides the SideGap property
        The SideGap is calculated automatically
        Set this,before you add pages
      • LazyLoadingExtraSize As Int
      • LoadingPanelColor As Int
        The color of the Loading panel If Base_Resize Is executed
      • Size As Int [read only]
Changelog
  • 1.00
    • Release
  • 1.01
    • Add RemovePageAt
  • 1.02
    • Add Clear
Have Fun :)
 

Attachments

  • AS CardSlider Example.zip
    14.4 KB · Views: 188
  • AS_CardSlider.b4xlib
    5.1 KB · Views: 140
Last edited:

asales

Expert
Licensed User
Longtime User
Another great library, @Alexander Stolte, Thanks!

Wishes:
- click in the main (center) card to open a page or show information, based in the selected clicked card.
- due this event, capture the click in the left and right card to move to previous or next (and continue to use the slider left/right to move).
 

Alexander Stolte

Expert
Licensed User
Longtime User
- click in the main (center) card to open a page or show information, based in the selected clicked card.
Use the PageChanged event and set a value when you add a page?
due this event, capture the click in the left and right card to move to previous or next (and continue to use the slider left/right to move).
Look at the text animation example, there is exactly this.
 

Xfood

Expert
Licensed User
congratulations on the new library, is there a way to change the color of the black background?
 

Xfood

Expert
Licensed User
I tried, but when you scroll through the cards, the "gap" space becomes black and then the entire background becomes black as you scroll
 

Xfood

Expert
Licensed User
ok, I tried it today in the office, as soon as I turn on the PC I will attach an example project.
 

Xfood

Expert
Licensed User
The example and used in post 1, I only changed the colors

1695760392343.png



1695760262092.png
 

Attachments

  • 1695760225983.png
    1695760225983.png
    9.9 KB · Views: 61
  • AS CardSlider Example.zip
    11.4 KB · Views: 84

Xfood

Expert
Licensed User
thanks, color management is ok.
it would be nice to have the possibility to remove an item, as_card.removeitem(idItem), and a currentItem property, to know the index of the active item
idItem=as_card.currentItem
 

asales

Expert
Licensed User
Longtime User
How can I clear all the cards to fill with another content? Thanks!
 
Top