B4A Library [B4X][XUI] ImageSlider

Discussion in 'Additional libraries, classes and official updates' started by Erel, Dec 11, 2017.

Thread Status:
Not open for further replies.
  1. Erel

    Erel Administrator Staff Member Licensed User

    ImageSlider custom view is compatible with B4A, B4i and B4J.


    • Three transition types: horizontal, vertical and fade. Configured in the visual designer.
    • Images are centered and not distorted.
    • Next and previous images are cached.
    • Sliding gestures.
    • Flexible data source.
    • Cross platform.


    1. Add ImageSlider with the designer.
    2. Set the number of images:
    ImageSlider1.NumberOfImages = 4
    3. Implement the GetImage event. This is a resumable sub.
    You should return a B4XBitmap based on the index.
    Sub ImageSlider1_GetImage (Index As Int) As ResumableSub
    Return xui.LoadBitmapResize(File.DirAssets, $"test_${Index + 1}.jpg"$, _
            ImageSlider1.WindowBase.Width, ImageSlider1.WindowBase.Height, 
    End Sub
    In this example the images are loaded from the assets folder.

    4. Call ImageSlider.NextImage or PrevImage.

    A B4J project with the ImageSlider class: www.b4x.com/b4j/files/ImageSlider.zip

    A B4A example where the http requests are made from the starter service is available here: https://www.b4x.com/android/forum/t...sing-when-the-slider-is-on.95779/#post-604705


    V1.11 - Fixes the dot indicator offset.
    V1.10 - adds a dot indicator and fixes a bug: https://www.b4x.com/android/forum/threads/b4x-xui-imageslider.87128/page-2#post-618398

    The latest version is included in the B4J project.
    Last edited: Oct 29, 2018
  2. MarcoRome

    MarcoRome Expert Licensed User

    You are really GREAT :D:D:D
  3. MarcoRome

    MarcoRome Expert Licensed User

    Very nice, but can we use it with images remotely ?
  4. Erel

    Erel Administrator Staff Member Licensed User

    Yes. You can either download the images in the GetImage event (this is why it is a resumable sub) or download all of them and keep them in a List and return the image from the list.
    MarcoRome and DonManfred like this.
  5. MarcoRome

    MarcoRome Expert Licensed User

    "You can either download the images in the GetImage event "
    Pls, can you write a little example
  6. Erel

    Erel Administrator Staff Member Licensed User

    An example is attached.

    Attached Files:

  7. MarcoRome

    MarcoRome Expert Licensed User

    Great example as usual
  8. MarcoRome

    MarcoRome Expert Licensed User

    Here in Android (B4A) / iOS ( B4i). These are images read from a remote server. They run very well, in this case the code change is = 0
    Great B4X :D:D

    miker2069, f0raster0, Don Oso and 6 others like this.
  9. Sapta

    Sapta Member Licensed User

    Hi @Erel,

    I use this code for in B4A on Main Activity,
    But why when open a new activity, sometimes closed and replaced with main activity again?
    Is it because waiting to finish download its image, after that can open new activity?

    And how the code if in collaboration with this (Download With Service)? I don't understand :D collaborating

    Sub TimerSlider_Tick
    End Sub

    Sub ImageSlider1_GetImage (Index As Int) As ResumableSub
    Dim j As HttpJob
    "", Me)
    Log("Downloading: " & Urls.Get(Index))
    Wait For (j) JobDone(j As HttpJob)
    Dim x As B4XBitmap
    If j.Success Then
            x = j.GetBitmap
            x = x.Resize(ImageSlider1.WindowBase.Width, ImageSlider1.WindowBase.Height, 
    End If
    Return x
    End Sub

    Sub TampilkanImageSlider   
    For i = 0 To Cursor.RowCount - 1
    Cursor.Position = i
    If Cursor.GetString("NAMA_FILE") <> "" Then
    "http://" & SESSION_IP_SERVER & "/media/image_slider/" & Cursor.GetString("NAMA_FILE"))
    End If
        ImageSlider1.NumberOfImages = Urls.Size
        TimerSlider.Enabled = 
    End Sub
    Download With Service
    #Region  Service Attributes
    #StartAtBoot: False
    #End Region

    Sub Process_Globals
    Private cache As Map
    Private tasks As Map
    Private ongoingTasks As Map
    End Sub

    Sub Service_Create
    End Sub

    Sub Service_Start (StartingIntent As Intent)

    End Sub

    Sub Service_Destroy

    End Sub

    Sub Download (ImageViewsMap As Map)
    For i = 0 To ImageViewsMap.Size - 1
            tasks.Put(ImageViewsMap.GetKeyAt(i), ImageViewsMap.GetValueAt(i))
    Dim link As String = ImageViewsMap.GetValueAt(i)
    If cache.ContainsKey(link) Then
    Dim iv As ImageView = ImageViewsMap.GetKeyAt(i)
    Else If ongoingTasks.ContainsKey(link) = False Then
    Dim j As HttpJob
                j.Initialize(link, Me)
    End If
    End Sub

    Sub JobDone(Job As HttpJob)
    If Job.Success Then
    Dim bmp As Bitmap = Job.GetBitmap
    cache.Put(Job.JobName, bmp)
    If tasks.IsInitialized Then
    For i = 0 To tasks.Size - 1
    Dim link As String = tasks.GetValueAt(i)
    If link = Job.JobName Then
    Dim iv As ImageView = tasks.GetKeyAt(i)
    End If
    End If
    End If
    End Sub

    Sub ActivityIsPaused
    End Sub
  10. Erel

    Erel Administrator Staff Member Licensed User

    You should never limit your questions to a single member.

    This happens when the HttpJob response arrives after the activity was paused. The event will cause it to be started.
    The solution is to download the images from a service (you don't need to use the code you posted) and call a sub in the main activity with the image only if the main activity is not paused.

    For further discussion please start a new thread in the questions forum.
  11. Alberto Iglesias

    Alberto Iglesias Well-Known Member Licensed User

    It's posible to use FillImageToView to adjust the image with imageslider?
  12. Erel

    Erel Administrator Staff Member Licensed User

    Yes with a small modification:
    Sub FillImageToView(bmp As B4XBitmap, ImageView As B4XView) As B4XBitmap
    Dim bmpRatio As Float = bmp.Width / bmp.Height
    Dim viewRatio As Float = ImageView.Width / ImageView.Height
    If viewRatio > bmpRatio Then
    Dim NewHeight As Int = bmp.Width / viewRatio
         bmp = bmp.Crop(
    0, bmp.Height / 2 - NewHeight / 2, bmp.Width, NewHeight)
    Else if viewRatio < bmpRatio Then
    Dim NewWidth As Int = bmp.Height * viewRatio
         bmp = bmp.Crop(bmp.Width / 
    2 - NewWidth / 20, NewWidth, bmp.Height)
    End If
    Return bmp.Resize(ImageView.Width, ImageView.Height, True)
    End Sub
    You need to return a bitmap from ImageSlider1_GetImage.
    Peter Simpson likes this.
  13. desof

    desof Well-Known Member Licensed User

    There is no small example for B4A?
  14. Erel

    Erel Administrator Staff Member Licensed User

    No. However if you download the B4J example you will see that it is very simple to port it to B4A.
    desof likes this.
  15. desof

    desof Well-Known Member Licensed User

    I would like to report a problem in the control slider used in B4A.
    If when you open the application and you do not have access to the internet and slide your finger on the control the application falls down.
    Apparently the error in the PrevImage Module and in the line CurrentIndex = (CurrentIndex - 1 + NumberOfImages) Mod NumberOfImages

    Why NumberOfImages = 0
  16. desof

    desof Well-Known Member Licensed User

    Is it possible to see an example of how to read from a list based on this example?
    Because otherwise the images are downloading again and again and is not efficient.
  17. Erel

    Erel Administrator Staff Member Licensed User

    You need to disable this gesture until NumberOfImages is larger than 0. The NumberOfImages is set in this example after it parses the html file with the images.

    The images are only downloaded once.
    desof likes this.
  18. desof

    desof Well-Known Member Licensed User

    Attached Files:

  19. Erel

    Erel Administrator Staff Member Licensed User

    desof likes this.
  20. desof

    desof Well-Known Member Licensed User

Thread Status:
Not open for further replies.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice