B4A Library CarouselView - a Carousel for displaying images

A wrapper for this Github project. posting the following:
1. B4A library files - copy them to your additional library folder
2. B4A project to demonstrate the library

You will need to have android-support-v4.jar in your additional library folder. You can download it from here:
https://www.dropbox.com/s/qmggn0wm5a6bqa9/android-support-v4.jar?dl=0

It can used in Auto or Manual mode to display the images that were added to the carousel. It has a nice page indicator that can be customised (outline color, circle size, fill color, etc)

1.png


2.png


Sample Code:

B4X:
#Region  Project Attributes
    #ApplicationLabel: CarouselView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#AdditionalRes: ..\Resources

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private cv1 As CarouselView
 
    Dim bm As Bitmap
    Dim blist As List                               'images to be passed to the library via this list
 
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
     Activity.LoadLayout("main")
 
     blist.Initialize                                     'initialize an empty list
 
     bm.Initialize(File.DirAssets, "image_1.jpg")
     blist.Add(bm)                                        'add the image to the list
     bm.Initialize(File.DirAssets, "image_2.jpg")
     blist.Add(bm)
     bm.Initialize(File.DirAssets, "image_3.jpg")
     blist.Add(bm)
     bm.Initialize(File.DirAssets, "image_4.jpg")
     blist.Add(bm)
     bm.Initialize(File.DirAssets, "image_5.jpg")
     blist.Add(bm)               
 
     cv1.ImageBitmaps = blist                              'pass the list with images to the library

     cv1.Radius = 10                                       'the radius of the indicator circles
     cv1.StrokeColor = Colors.Magenta                      'the outline color of the circles
     cv1.StrokeWidth = 5                                   'the width of the outline circles
     cv1.FillColor = Colors.White                          'the color to fill the circles with - active page/image
     cv1.AutoPlay = True                                   'play automatically?
     cv1.CurrentItem = 0                                   'set the indeks of where to initially start from: 0 to (number of image - 1)
     cv1.DisableAutoPlayOnUserInteraction = True           'stop auto play if image is touched during autoplay
     cv1.Orientation = cv1.ORIENTATION_HORIZONTAL          'can also be ORIENTATION_VERTICAL in which case it will be position to the left of the CarouselView
     cv1.PageCount = blist.Size                            'the number of pages/images to display
     cv1.PageColor = Colors.Transparent                       'the color in the centre of the indicator circles for "not active" pages
     cv1.SlideInterval = 1000                              'the slide interval in milli seconds
 
     cv1.playCarousel                                      'kickstart the carousel into action
 
     ' there is also cv1.pauseCarousel that can be used to pause the carousel

End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Library:

CarouselView
Author:
Github: Sayyam Mehmood, Wrapped by: Johan Schoeman
Version: 1
  • CarouselView
    Fields:
    • ORIENTATION_HORIZONTAL As Int
    • ORIENTATION_VERTICAL As Int
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • pauseCarousel
      Stops auto scrolling.
    • playCarousel
      Starts auto scrolling if
    Properties:
    • AutoPlay As Boolean [write only]
      Set interval for one slide in milliseconds.
    • Background As Drawable
    • Color As Int [write only]
    • CurrentItem As Int [write only]
    • DisableAutoPlayOnUserInteraction As Boolean [write only]
    • Enabled As Boolean
    • FillColor As Int [write only]
    • Height As Int
    • ImageBitmaps As List [write only]
    • Left As Int
    • Orientation As Int [write only]
    • PageColor As Int [write only]
    • PageCount As Int [write only]
    • Parent As Object [read only]
    • Radius As Float [write only]
    • SlideInterval As Int [write only]
      Set interval for one slide in milliseconds.
    • Snap As Boolean [write only]
    • StrokeColor As Int [write only]
    • StrokeWidth As Float [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

  • CarouselViewLibFiles.zip
    27 KB · Views: 694
  • b4aCarouselView.zip
    307.7 KB · Views: 630
  • b4aCarouselView-AndroidX.zip
    307.7 KB · Views: 432
Last edited by a moderator:

Johan Schoeman

Expert
Licensed User
Longtime User
There seem to be a problem with the B4A project posted in Post #1 - brought to my attention by @Mahares (thanks Ali - much appreciated). Please use the attached B4A project. Files have been moved to the /Object/res/layout and /Objects/res/values folders of the B4A project. Make sure they are set to READ ONLY after you have unzipped the project and before you run it for the first time. The library files as per post #1 remain unchanged.

Will remove the B4A project in post #1 and post an update there too.
 

Attachments

  • b4aCarouselView.zip
    307.7 KB · Views: 337
Last edited:

Anser

Well-Known Member
Licensed User
Longtime User
Really appreciate your excellent work.

Do this CarouselView has a click METHOD ?, so that we can do some action when the user clicks on any of the picture in CarouselView. For eg we could provide a pinch and zoom view of the clicked picture etc.

Regards
Anser
 

Johan Schoeman

Expert
Licensed User
Longtime User
@Mahares suggested that I add a label to the carousel in order to display a title for the current/active image. The easiest way to do this was to return the index of the image being displayed to the B4A project via an event and then use the index to select the correct image title from an array of strings that was defined in the B4A project. Posting the updated B4A library files and a sample project. Copy/replace the library files to/in your additional library folder.

You would still need android-support-v4.jar in your additional library folder - see the link to it in post #1 of this thread.

3.png


Sample code:
B4X:
#Region  Project Attributes
    #ApplicationLabel: CarouselView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
#End Region


#Region  Activity Attributes
    #FullScreen: True
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private cv1 As CarouselView
   
    Dim bm As Bitmap
    Dim blist As List                               'images to be passed to the library via this list
   
    Private l1 As Label
   
    Dim fruit(5) As String
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
     Activity.LoadLayout("main")
    
     blist.Initialize                                     'initialize an empty list
    
     bm.Initialize(File.DirAssets, "image_1.jpg")
     blist.Add(bm)                                        'add the image to the list
     bm.Initialize(File.DirAssets, "image_2.jpg")
     blist.Add(bm)
     bm.Initialize(File.DirAssets, "image_3.jpg")
     blist.Add(bm)
     bm.Initialize(File.DirAssets, "image_4.jpg")
     blist.Add(bm)
     bm.Initialize(File.DirAssets, "image_5.jpg")
     blist.Add(bm)    
    
     fruit = Array As String("Orange", "Grapes", "Strawberry", "Cherry", "Apricot")              
    
     cv1.ImageBitmaps = blist                              'pass the list with images to the library

     cv1.Radius = 10                                       'the radius of the indicator circles
     cv1.StrokeColor = Colors.Magenta                      'the outline color of the circles
     cv1.StrokeWidth = 5                                   'the width of the outline circles
     cv1.FillColor = Colors.White                          'the color to fill the circles with - active page/image
     cv1.AutoPlay = True                                  'play automatically?
     cv1.DisableAutoPlayOnUserInteraction = True           'stop auto play if image is touched during autoplay
     cv1.Orientation = cv1.ORIENTATION_HORIZONTAL          'can also be ORIENTATION_VERTICAL in which case it will be position to the left of the CarouselView
     cv1.PageCount = blist.Size                            'the number of pages/images to display
     cv1.PageColor = Colors.Transparent                       'the color in the centre of the indicator circles for "not active" pages
     cv1.SlideInterval = 5000                              'the slide interval in milli seconds
     
     cv1.playCarousel                                      'kickstart the carousel into action
    
     'there is also cv1.pauseCarousel that can be used to pause the carousel

End Sub

Sub Activity_Resume
   
     Dim curitem As Int = 2
     cv1.CurrentItem = curitem                             'set the indeks of where to initially start from: 0 to (number of image - 1)
     l1.Text = fruit(curitem)

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub cv1_picture_changed (pos As Int)
   
    l1.Text = fruit(pos)
   
End Sub
 

Attachments

  • CarouselViewLibFiles.zip
    29.9 KB · Views: 288
  • b4aCarouselView.zip
    308 KB · Views: 257

MarcoRome

Expert
Licensed User
Longtime User
Hello dear Johan.
Really a very good library, it would be possible to add a method to intercept a click ?
Thank you very much and great work as usual ;)
 

Reids

Member
Licensed User
Longtime User
Yeah please add click event, caption animation need to be improved aswell
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hello dear Johan.
Really a very good library, it would be possible to add a method to intercept a click ?
Thank you very much and great work as usual ;)

New library files attached (V1.01). It will raise an event in the B4A project when.....
cv1.DisableAutoPlayOnUserInteraction = True
.....and the user starts scrolling manually when autoscroll was active.

Add this sub to the B4A project:
B4X:
Sub cv1_scroll_stopped
  
    Log("auto scroll stopped due to user drag")
  
End Sub


CarouselView
Author:
Github: Sayyam Mehmood, Wrapped by: Johan Schoeman
Version: 1.01
  • CarouselView
    Events:
    • picture_changed (position As Int), scroll_stopped( )
    Fields:
    • ORIENTATION_HORIZONTAL As Int
    • ORIENTATION_VERTICAL As Int
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • pauseCarousel
      Stops auto scrolling.
    • playCarousel
      Starts auto scrolling if
    Properties:
    • AutoPlay As Boolean [write only]
      Set interval for one slide in milliseconds.
    • Background As Drawable
    • Color As Int [write only]
    • CurrentItem As Int [write only]
    • DisableAutoPlayOnUserInteraction As Boolean [write only]
    • Enabled As Boolean
    • FillColor As Int [write only]
    • Height As Int
    • ImageBitmaps As List [write only]
    • Left As Int
    • Orientation As Int [write only]
    • PageColor As Int [write only]
    • PageCount As Int [write only]
    • Parent As Object [read only]
    • Radius As Float [write only]
    • SlideInterval As Int [write only]
      Set interval for one slide in milliseconds.
    • Snap As Boolean [write only]
    • StrokeColor As Int [write only]
    • StrokeWidth As Float [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

  • CarouselViewLibFilesV1_01.zip
    30.1 KB · Views: 254

MarcoRome

Expert
Licensed User
Longtime User
Hi Johan great work with this rel ;)
I was see this 2 events.
when i raise event stop corousel ( scroll_stopped ) it gives me a value ... the problem and that if i continue to do the manual scrolling the event is no longer updated.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hi Johan great work with this rel ;)
I was see this 2 events.
when i raise event stop corousel ( scroll_stopped ) it gives me a value ... the problem and that if i continue to do the manual scrolling the event is no longer updated.
I had it like that originally but took it out as event picture_changed will still be fired when you scroll/drag the pictures manually. But if you want it I will put it back i.e event scroll_stopped will also be fired when you scroll / drag manually. Let me know if it is necessary and I will modify the lib....
 

MarcoRome

Expert
Licensed User
Longtime User
I had it like that originally but took it out as event picture_changed will still be fired when you scroll/drag the pictures manually. But if you want it I will put it back i.e event scroll_stopped will also be fired when you scroll / drag manually. Let me know if it is necessary and I will modify the lib....
Yes great Johan.
Example:
i have 5 picture, i scroll with hand the 1 pictures... and i have scroll_stopped for this time that give me is picture X. If i continue i have picture_changed that give me value.. and so when i get to the third piture, it would like if i click on the corousel that triggered the event. Because so i have name ... but i click about carousel nothing happens, so i think with these two event we have control, but it remains to add the click event (to get the maximum from the library).
 

Johan Schoeman

Expert
Licensed User
Longtime User
Yes great Johan.
Example:
i have 5 picture, i scroll with hand the 1 pictures... and i have scroll_stopped for this time that give me is picture X. If i continue i have picture_changed that give me value.. and so when i get to the third piture, it would like if i click on the corousel that triggered the event. Because so i have name ... but i click about carousel nothing happens, so i think with these two event we have control, but it remains to add the click event (to get the maximum from the library).
Try this @MarcoRome. Posting updated B4A project and new library files (V1.02). Have added an event called picture_touched

B4X:
#Region  Project Attributes
    #ApplicationLabel: CarouselView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
#End Region


#Region  Activity Attributes
    #FullScreen: True
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private cv1 As CarouselView
   
    Dim bm As Bitmap
    Dim blist As List                               'images to be passed to the library via this list
   
    Private l1 As Label
   
    Dim fruit(5) As String
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
     Activity.LoadLayout("main")
    

     blist.Initialize                                     'initialize an empty list
     
    'Dim in As InputStream
    'in = File.OpenInput(File.DirRootExternal, "/pictures/image_1.jpg")
    'bm.Initialize2(in)                                           'Export the generated bitmap to a PNG and save in in the pictures folder                                                                  'Make sure nothing is stuck that should have been written
    'in.Close         
    'blist.Add(bm)  
    '
    'Dim in As InputStream
    'in = File.OpenInput(File.DirRootExternal, "/pictures/image_2.jpg")
    'bm.Initialize2(in)                                           'Export the generated bitmap to a PNG and save in in the pictures folder                                                                  'Make sure nothing is stuck that should have been written
    'in.Close         
    'blist.Add(bm)  
    '
    'Dim in As InputStream
    'in = File.OpenInput(File.DirRootExternal, "/pictures/image_3.jpg")
    'bm.Initialize2(in)                                           'Export the generated bitmap to a PNG and save in in the pictures folder                                                                  'Make sure nothing is stuck that should have been written
    'in.Close         
    'blist.Add(bm)  
    '
    'Dim in As InputStream
    'in = File.OpenInput(File.DirRootExternal, "/pictures/image_4.jpg")
    'bm.Initialize2(in)                                           'Export the generated bitmap to a PNG and save in in the pictures folder                                                                  'Make sure nothing is stuck that should have been written
    'in.Close         
    'blist.Add(bm)  
    '
    'Dim in As InputStream
    'in = File.OpenInput(File.DirRootExternal, "/pictures/image_5.jpg")
    'bm.Initialize2(in)                                           'Export the generated bitmap to a PNG and save in in the pictures folder                                                                  'Make sure nothing is stuck that should have been written
    'in.Close         
    'blist.Add(bm)  
    
     bm.Initialize(File.DirAssets, "image_1.jpg")
     blist.Add(bm)                                        'add the image to the list
     bm.Initialize(File.DirAssets, "image_2.jpg")
     blist.Add(bm)
     bm.Initialize(File.DirAssets, "image_3.jpg")
     blist.Add(bm)
     bm.Initialize(File.DirAssets, "image_4.jpg")
     blist.Add(bm)
     bm.Initialize(File.DirAssets, "image_5.jpg")
     blist.Add(bm)    
    
     fruit = Array As String("Orange", "Grapes", "Strawberry", "Cherry", "Apricot")              
    
     cv1.ImageBitmaps = blist                              'pass the list with images to the library

     cv1.Radius = 10                                       'the radius of the indicator circles
     cv1.StrokeColor = Colors.Magenta                      'the outline color of the circles
     cv1.StrokeWidth = 5                                   'the width of the outline circles
     cv1.FillColor = Colors.White                          'the color to fill the circles with - active page/image
     cv1.AutoPlay = True                                   'play automatically?
     cv1.DisableAutoPlayOnUserInteraction = True           'stop auto play if image is touched during autoplay
     cv1.Orientation = cv1.ORIENTATION_HORIZONTAL          'can also be ORIENTATION_VERTICAL in which case it will be position to the left of the CarouselView
     cv1.PageCount = blist.Size                            'the number of pages/images to display
     cv1.PageColor = Colors.Transparent                       'the color in the centre of the indicator circles for "not active" pages
     cv1.SlideInterval = 5000                              'the slide interval in milli seconds
     
     cv1.playCarousel                                      'kickstart the carousel into action
    
     'there is also cv1.pauseCarousel that can be used to pause the carousel

End Sub

Sub Activity_Resume
   
     Dim curitem As Int = 2
     cv1.CurrentItem = curitem                             'set the indeks of where to initially start from: 0 to (number of image - 1)
     l1.Text = fruit(curitem)

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub cv1_picture_changed (pos As Int)
   
    l1.Text = fruit(pos)
   
End Sub

Sub cv1_scroll_stopped
   
    Log("auto scroll stopped due to user drag")
   
End Sub

Sub cv1_picture_touched(position As Int)
   
    Log("Picture Touched = " & fruit(position))
   
End Sub



CarouselView
Author:
Github: Sayyam Mehmood, Wrapped by: Johan Schoeman
Version: 1.02
  • CarouselView
    Events:
    • picture_changed (position As Int), scroll_stopped() , picture_touched(position As Int)
    Fields:
    • ORIENTATION_HORIZONTAL As Int
    • ORIENTATION_VERTICAL As Int
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • pauseCarousel
      Stops auto scrolling.
    • playCarousel
      Starts auto scrolling if
    Properties:
    • AutoPlay As Boolean [write only]
      Set interval for one slide in milliseconds.
    • Background As Drawable
    • Color As Int [write only]
    • CurrentItem As Int [write only]
    • DisableAutoPlayOnUserInteraction As Boolean [write only]
    • Enabled As Boolean
    • FillColor As Int [write only]
    • Height As Int
    • ImageBitmaps As List [write only]
    • Left As Int
    • Orientation As Int [write only]
    • PageColor As Int [write only]
    • PageCount As Int [write only]
    • Parent As Object [read only]
    • Radius As Float [write only]
    • SlideInterval As Int [write only]
      Set interval for one slide in milliseconds.
    • Snap As Boolean [write only]
    • StrokeColor As Int [write only]
    • StrokeWidth As Float [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

  • b4aCarouselView.zip
    308.3 KB · Views: 272
  • CarouselViewLibFilesV1_02.zip
    30.8 KB · Views: 268

MarcoRome

Expert
Licensed User
Longtime User
Hi great Johan :) .
You are always available as usual. Sorry for later my response..... Already Better.
The problem is that this event ( picture_touched ) always fire.
it would take a long type touch event when the user touches the image for more time (just a longtouch) triggered the event.
 

Johan Schoeman

Expert
Licensed User
Longtime User
Hi great Johan :) .
You are always available as usual. Sorry for later my response..... Already Better.
The problem is that this event ( picture_touched ) always fire.
it would take a long type touch event when the user touches the image for more time (just a longtouch) triggered the event.
Try attached lib files and project (I have also left the original touch event in the code). Added:
B4X:
Sub cv1_picture_long_touched(position As Int)
 
    Log("Picture Long Touched = " & fruit(position))
 
End Sub

When you touch the image for more than 1 second and lift your finger the event will be fired.

B4X:
#Region  Project Attributes
    #ApplicationLabel: CarouselView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: portrait
    #CanInstallToExternalStorage: False
#End Region


#Region  Activity Attributes
    #FullScreen: True
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private cv1 As CarouselView
 
    Dim bm As Bitmap
    Dim blist As List                               'images to be passed to the library via this list
 
    Private l1 As Label
 
    Dim fruit(5) As String
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
     Activity.LoadLayout("main")
  

     blist.Initialize                                     'initialize an empty list
   
    'Dim in As InputStream
    'in = File.OpenInput(File.DirRootExternal, "/pictures/image_1.jpg")
    'bm.Initialize2(in)                                           'Export the generated bitmap to a PNG and save in in the pictures folder                                                                  'Make sure nothing is stuck that should have been written
    'in.Close       
    'blist.Add(bm)
    '
    'Dim in As InputStream
    'in = File.OpenInput(File.DirRootExternal, "/pictures/image_2.jpg")
    'bm.Initialize2(in)                                           'Export the generated bitmap to a PNG and save in in the pictures folder                                                                  'Make sure nothing is stuck that should have been written
    'in.Close       
    'blist.Add(bm)
    '
    'Dim in As InputStream
    'in = File.OpenInput(File.DirRootExternal, "/pictures/image_3.jpg")
    'bm.Initialize2(in)                                           'Export the generated bitmap to a PNG and save in in the pictures folder                                                                  'Make sure nothing is stuck that should have been written
    'in.Close       
    'blist.Add(bm)
    '
    'Dim in As InputStream
    'in = File.OpenInput(File.DirRootExternal, "/pictures/image_4.jpg")
    'bm.Initialize2(in)                                           'Export the generated bitmap to a PNG and save in in the pictures folder                                                                  'Make sure nothing is stuck that should have been written
    'in.Close       
    'blist.Add(bm)
    '
    'Dim in As InputStream
    'in = File.OpenInput(File.DirRootExternal, "/pictures/image_5.jpg")
    'bm.Initialize2(in)                                           'Export the generated bitmap to a PNG and save in in the pictures folder                                                                  'Make sure nothing is stuck that should have been written
    'in.Close       
    'blist.Add(bm)
  
     bm.Initialize(File.DirAssets, "image_1.jpg")
     blist.Add(bm)                                        'add the image to the list
     bm.Initialize(File.DirAssets, "image_2.jpg")
     blist.Add(bm)
     bm.Initialize(File.DirAssets, "image_3.jpg")
     blist.Add(bm)
     bm.Initialize(File.DirAssets, "image_4.jpg")
     blist.Add(bm)
     bm.Initialize(File.DirAssets, "image_5.jpg")
     blist.Add(bm)  
  
     fruit = Array As String("Orange", "Grapes", "Strawberry", "Cherry", "Apricot")            
  
     cv1.ImageBitmaps = blist                              'pass the list with images to the library

     cv1.Radius = 10                                       'the radius of the indicator circles
     cv1.StrokeColor = Colors.Magenta                      'the outline color of the circles
     cv1.StrokeWidth = 5                                   'the width of the outline circles
     cv1.FillColor = Colors.White                          'the color to fill the circles with - active page/image
     cv1.AutoPlay = True                                   'play automatically?
     cv1.DisableAutoPlayOnUserInteraction = True           'stop auto play if image is touched during autoplay
     cv1.Orientation = cv1.ORIENTATION_HORIZONTAL          'can also be ORIENTATION_VERTICAL in which case it will be position to the left of the CarouselView
     cv1.PageCount = blist.Size                            'the number of pages/images to display
     cv1.PageColor = Colors.Transparent                       'the color in the centre of the indicator circles for "not active" pages
     cv1.SlideInterval = 5000                              'the slide interval in milli seconds
   
     cv1.playCarousel                                      'kickstart the carousel into action
  
     'there is also cv1.pauseCarousel that can be used to pause the carousel

End Sub

Sub Activity_Resume
 
     Dim curitem As Int = 2
     cv1.CurrentItem = curitem                             'set the indeks of where to initially start from: 0 to (number of image - 1)
     l1.Text = fruit(curitem)

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub cv1_picture_changed (pos As Int)
 
    l1.Text = fruit(pos)
 
End Sub

Sub cv1_scroll_stopped
 
    Log("auto scroll stopped due to user drag")
 
End Sub

Sub cv1_picture_touched(position As Int)
 
    Log("Picture Touched = " & fruit(position))
 
End Sub

Sub cv1_picture_long_touched(position As Int)
 
    Log("Picture Long Touched = " & fruit(position))
 
End Sub


CarouselView
Author:
Github: Sayyam Mehmood, Wrapped by: Johan Schoeman
Version: 1.03
  • CarouselView
    Events:
    • picture_changed (position As Int), scroll_stopped() , picture_touched(position As Int), picture_long_touched(position As Int)
    Fields:
    • ORIENTATION_HORIZONTAL As Int
    • ORIENTATION_VERTICAL As Int
    • ba As BA
    Methods:
    • BringToFront
    • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
    • Initialize (EventName As String)
    • Invalidate
    • Invalidate2 (arg0 As Rect)
    • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • IsInitialized As Boolean
    • RemoveView
    • RequestFocus As Boolean
    • SendToBack
    • SetBackgroundImage (arg0 As Bitmap)
    • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
    • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
    • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
    • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
    • pauseCarousel
      Stops auto scrolling.
    • playCarousel
      Starts auto scrolling if
    Properties:
    • AutoPlay As Boolean [write only]
      Set interval for one slide in milliseconds.
    • Background As Drawable
    • Color As Int [write only]
    • CurrentItem As Int [write only]
    • DisableAutoPlayOnUserInteraction As Boolean [write only]
    • Enabled As Boolean
    • FillColor As Int [write only]
    • Height As Int
    • ImageBitmaps As List [write only]
    • Left As Int
    • Orientation As Int [write only]
    • PageColor As Int [write only]
    • PageCount As Int [write only]
    • Parent As Object [read only]
    • Radius As Float [write only]
    • SlideInterval As Int [write only]
      Set interval for one slide in milliseconds.
    • Snap As Boolean [write only]
    • StrokeColor As Int [write only]
    • StrokeWidth As Float [write only]
    • Tag As Object
    • Top As Int
    • Visible As Boolean
    • Width As Int
 

Attachments

  • b4aCarouselView.zip
    308.3 KB · Views: 294
  • CarouselViewLibFilesV1_03.zip
    31.1 KB · Views: 298

Reids

Member
Licensed User
Longtime User
What do you mean?
Sorry I mean if user slide at last of image, it should repeat to number 1 again (unlimited scrolling) currently if user slide the image, it stucked at last position cannot move to first position again, but autoplay can automatically scroll to first image after last image
(first to last) or (last to first) slide
 

Johan Schoeman

Expert
Licensed User
Longtime User
Sorry I mean if user slide at last of image, it should repeat to number 1 again (unlimited scrolling) currently if user slide the image, it stucked at last position cannot move to first position again, but autoplay can automatically scroll to first image after last image
(first to last) or (last to first) slide
Edwin, will look into it when time permits
 

victormedranop

Well-Known Member
Licensed User
Longtime User
One question, it must be created with the designer only, or with code too?

I try with code a does not work for me.

Thanks
 

Johan Schoeman

Expert
Licensed User
Longtime User
One question, it must be created with the designer only, or with code too?

I try with code a does not work for me.

Thanks
Perhaps you are doing something wrong in your code. The attached project works perfectly when adding it via code.
 

Attachments

  • b4aCarouselViewAddedByCode.zip
    308.1 KB · Views: 226
Top