B4A Library [B4X][XUI] ImageSlider

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

Features:

• 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.

Usage:

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, True)
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

Updates

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.

 

[MarcoRome]

You are really GREAT

 

[MarcoRome]

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

 

[Erel]

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]

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

 

[Erel]

An example is attached.

 

[MarcoRome]

Great example as usual

 

[MarcoRome]

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

 

[Sapta]

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 collaborating

Sub TimerSlider_Tick
    ImageSlider1.NextImage
End Sub

Sub ImageSlider1_GetImage (Index As Int) As ResumableSub
    Dim j As HttpJob
    j.Initialize("", Me)
    j.Download(Urls.Get(Index))
    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, True)
    End If
    j.Release
    Return x
End Sub

Sub TampilkanImageSlider   
    TimerSlider.Initialize("TimerSlider", 3000)
    Urls.Initialize
    Cursor = SQL.ExecQuery("SELECT NAMA_FILE FROM TB_IMAGE_SLIDER")
    For i = 0 To Cursor.RowCount - 1
        Cursor.Position = i
        If Cursor.GetString("NAMA_FILE") <> "" Then
            Urls.Add("http://" & SESSION_IP_SERVER & "/media/image_slider/" & Cursor.GetString("NAMA_FILE"))
        End If
    Next
    Cursor.Close
    ImageSlider1.NumberOfImages = Urls.Size
    TimerSlider.Enabled = True
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
    tasks.Initialize
    cache.Initialize
    ongoingTasks.Initialize
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)
            iv.SetBackgroundImage(cache.Get(link))
        Else If ongoingTasks.ContainsKey(link) = False Then
            ongoingTasks.Put(link, "")
            Dim j As HttpJob
            j.Initialize(link, Me)
            j.Download(link)
        End If
    Next
End Sub

Sub JobDone(Job As HttpJob)
    ongoingTasks.Remove(Job.JobName)
    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)
                    iv.SetBackgroundImage(bmp)
                End If
            Next
        End If
    End If
    Job.Release
End Sub

Sub ActivityIsPaused
    tasks.Clear
End Sub

 

[Erel]

Hi @Erel,

You should never limit your questions to a single member.

But why when open a new activity, sometimes closed and replaced with main activity again?

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.

 

[Alberto Iglesias]

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

 

[Erel]

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 / 2, 0, NewWidth, bmp.Height)
   End If
   Return bmp.Resize(ImageView.Width, ImageView.Height, True)
End Sub

You need to return a bitmap from ImageSlider1_GetImage.

 

[desof]

There is no small example for B4A?

 

[Erel]

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

 

[desof]

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

 

[desof]

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.

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.

 

[Erel]

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.

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.

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.

The images are only downloaded once.

 

[desof]

The images are only downloaded once.

Erel apology but I see in the Log window that they are downloaded again and again as the image attached.
This happens to me with the example you sent me in post #2

https://www.b4x.com/android/forum/t...sing-when-the-slider-is-on.95779/#post-604705

 

[Erel]

By default the cache size property is set to 5. Increase it to 50 and it will cache all images.

I've updated the B4A example: https://www.b4x.com/android/forum/t...sing-when-the-slider-is-on.95779/#post-604705

 

[desof]

By default the cache size property is set to 5. Increase it to 50 and it will cache all images.

I've updated the B4A example: https://www.b4x.com/android/forum/t...sing-when-the-slider-is-on.95779/#post-604705

Wow, that was simple!
sorry for being so stupid