B4A Library [B4X][XUI] xImageSliderIG - Instagram style image and video slider

This Instagram style image and video slider is compatible with B4A and B4I.

xImageSliderIG
Author:
@Biswajit
Version: 2.02
Dependency:
  1. B4A: JavaObject, XUI, GestureDetector, AHViewPager(ver. 3), OkHttpUtils2, ExoPlayer
  2. B4I: iXUI, iHttpUtils2, iUI8
Features:
  1. Instagram like Image Counter
  2. Instagram like Dot Indicator
  3. Instagram like Pinch Zoom (only for image item)
  4. Cover blank space with blurry image/color
  5. Customizable Indicator color and animation duration
  6. Single Tap and Double Tap
  7. Fit / Fill / Stretch Image
  8. Lazy loading for both image and video
  9. Loading indicator
  10. Support both local and remote items
  11. Retry loading option for failed remote image
  12. Update item list on runtime
  13. Support video playback both local and remote (uri/dash/hls/smoothstream) (NEW)
  14. Auto-pause while going offscreen (NEW)
  15. Auto-resume while visible 85% (NEW)
  16. Autoplay and start muted video (NEW)
  17. Hide/Show (inside/outside) dot indicators (NEW)
  18. Support video scaling (Fill / Fit / Stretch) (NEW)
Method:
  • SetItems(imgs As List)
    Set/Update items as a list to the slider along with the value as a map you want to receive on tap events
    Image item map format:
    data: your data that will be returned on tap
    image: bitmap / url
    Video item map format:
    data: your data that will be returned on double tap
    video: url / path (combined)
    type: file/uri/dash/hls/smoothstream
  • SetZoomPanel(ZoomPanelContainer As B4XView)
    Set zoom panel (Usually Activity / Root panel) to enable the pinch zoom feature
  • ShowNext
    Show the next item
  • ShowPrev
    Show the previous item
  • PauseCurrentVideo
    Pause the current video item
  • PlayCurrentVideo
    Play the current video item
  • ToggleMute
    Toggle mute of the current video item
  • UpdatePlayback
    Update the current playback state
    Required to pause the playback on activity_pause / page_disappear
    And to resume the playback on activity_resume / page_appear
Property:
  • ActivityHasActionBar As Boolean
    Set it to true if the activity/page has an Action bar (b4a) / Navigation bar (B4I). Default is False. Only needed if the pinch zoom is enabled.
  • CurrentIndex As Int
Designer Property:
  • Show Indicator Dots: Show indicator dots. (OUTSIDE / INSIDE / HIDE) (Default: OUTSIDE)
  • Dots Color: Change the inactive dot indicator color. (Default: #CCCCCC)
  • Active Dot Color: Change the active dot color. (Default: #4286F4)
  • Scale Content: Slider item scale type. (FIT / FILL / STRETCH) (Default: FIT)
  • Cover Free Space: Show a blurry image around the slide image if there is any free space. Only applicable for image item and if FIT scale type is selected. (Default: TRUE)
  • Free Space Color: Show a solid color around the slide item if there is any free space. Only applicable if Cover Free Space is unchecked for image items. (Default: #F4F4F4)
  • Item Count: Show slide count label (Eg. 5/10) (Default: TRUE)
  • Dot Transition Duration: Dots transition time in milliseconds. (Default: 500)
  • Zoom Actual View: If checked the slide will be hidden while zooming (Like Instagram).
  • Autoplay Video: If checked the video will be autoplayed on loading completion. (Default: TRUE)
  • Start Video Muted: If checked the video will start muted on loading completion. (Default: TRUE)
Events:
  • PageChanged(CurrentIndex As Int)
  • VideoPlaying(CurrentIndex As Int)
  • VideoPaused(CurrentIndex As Int)
  • SingleTap(CurrentIndex As Int, Data As Object)
    NOTE: Only for image items. For video items single tap will toggle the video playback state.
  • DoubleTap(CurrentIndex As Int, Data As Object)

Usage:
  1. Add this view from the Designer.
  2. Copy the attached ximageslider_video layout file to your project if you want to show video items.
  3. Create a list having each item as a map. The map will contain a bitmap or URL and data (any object) (See Example). (For Image item)
  4. Create a list having each item as a map. The map will contain a video URL or Path, video type, and data (any object) (See Example). (For Video item)
  5. Set that list to the image slider.
  6. Set zoom panel (optional)
  7. On activity pause / page disappear event pause the current video playback (See Example)
  8. On activity resume / page appear event update the current video playback (See Example)
  9. If you are using multiple sliders in a clv, then call UpdatePlayback on ScrollChange event.
For multiple sliders with CLV check the attached examples.

Update 1.1:

  1. Added support for lazy loading
  2. Added support for remote image loading (Example attached)
  3. New loading indicator and tap to retry option for failed remote image
Update 1.20:
  1. Fixed crash issue in Android 28.
  2. Added support for updating the image list (Check updated example).
Update 1.21: Added new PageChanged event.
Update 1.22: Fixed a crashing issue while using as a single slider with no ActionBar.
Update 2.00:
  1. Fix item scaling issue
  2. Support video playback both local and remote (uri/dash/hls/smoothstream)
  3. Auto-pause while going offscreen
  4. Auto-resume while visible 85%
  5. Autoplay and start muted video
  6. Hide/Show (inside/outside) dot indicators
  7. Support image and video scaling (Fill / Fit / Stretch)
  8. Added new events VideoPlaying and VideoPaused
  9. Changed SetImages method name to SetItems
  10. More accurate blurry cover image.
  11. Now it depends upon ExoPlayer for B4A and iUI8 for B4i
Update 2.01:
  1. Fixed an issue of ShowNext function (B4A)
  2. Fixed double tap issue (B4i)
Update 2.02: Fixed a crashing issue with a slow network connection while playing video.
 

Attachments

  • ximageslider_video_layout.zip
    2.3 KB · Views: 1,250
  • xImageSliderIG_sample_b4a.zip
    169.6 KB · Views: 1,525
  • xImageSliderIG_sample_b4i.zip
    221.4 KB · Views: 1,243
  • xImageSliderIG.b4xlib
    9 KB · Views: 1,078
Last edited:

Biswajit

Active Member
Licensed User
Longtime User
It would be very useful, in the new version to also add the Complete event (when the movie ends)
Thank you again
Ok will try.
 

Xfood

Expert
Licensed User
Good morning,
I'm trying to compile this example with the 12.00 version of b4a, maybe it doesn't matter the version, it gives me this error,
how can i fix it.
Thank you

B4X:
B4A Versione: 12.00
Analisi del Codice.    (0.05s)
    Java Versione: 14
Building folders structure.    (0.05s)
Compilazione del codice.    (0.10s)
Compilazione del codice di layouts    (0.00s)
Organizzazione Librerie.    (0.00s)
    (AndroidX SDK)
Compilazione risorse    (0.07s)
Collegamento risorse    (1.06s)
Compilazione del codice Java prodotto.    (0.07s)
Ricerca librerie che necessitano di essere "dexed".    (0.02s)
Dex code    (0.79s)
Dex merge    Error
Error: Cannot fit requested classes in a single dex file (# methods: 68157 > 65536). Try supplying a main-dex list
Compilation failed
Exception in thread "main" java.lang.RuntimeException: com.android.tools.r8.CompilationFailedException: Compilation failed to complete, position: null
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:98)
    at com.android.tools.r8.D8.main(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:4)
Caused by: com.android.tools.r8.CompilationFailedException: Compilation failed to complete, position: null
    at Version.fakeStackEntry(Version_3.3.20-dev+aosp1.java:0)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:75)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:28)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:27)
    at com.android.tools.r8.internal.vj.b(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:2)
    at com.android.tools.r8.D8.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:22)
    at com.android.tools.r8.D8.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:17)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:85)
    ... 1 more
Caused by: com.android.tools.r8.internal.f: Cannot fit requested classes in a single dex file (# methods: 68157 > 65536)
    at com.android.tools.r8.internal.YS.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:14)
    at com.android.tools.r8.internal.YS.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:22)
    at com.android.tools.r8.internal.v20.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:565)
    at com.android.tools.r8.internal.r20.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:7)
    at com.android.tools.r8.internal.D2.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:335)
    at com.android.tools.r8.internal.D2.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:412)
    at com.android.tools.r8.D8.d(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:794)
    at com.android.tools.r8.D8.c(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:1)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:24)
    ... 5 more
 

Johan Hormaza

Well-Known Member
Licensed User
Longtime User
Good morning,
I'm trying to compile this example with the 12.00 version of b4a, maybe it doesn't matter the version, it gives me this error,
how can i fix it.
Thank you

B4X:
B4A Versione: 12.00
Analisi del Codice.    (0.05s)
    Java Versione: 14
Building folders structure.    (0.05s)
Compilazione del codice.    (0.10s)
Compilazione del codice di layouts    (0.00s)
Organizzazione Librerie.    (0.00s)
    (AndroidX SDK)
Compilazione risorse    (0.07s)
Collegamento risorse    (1.06s)
Compilazione del codice Java prodotto.    (0.07s)
Ricerca librerie che necessitano di essere "dexed".    (0.02s)
Dex code    (0.79s)
Dex merge    Error
Error: Cannot fit requested classes in a single dex file (# methods: 68157 > 65536). Try supplying a main-dex list
Compilation failed
Exception in thread "main" java.lang.RuntimeException: com.android.tools.r8.CompilationFailedException: Compilation failed to complete, position: null
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:98)
    at com.android.tools.r8.D8.main(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:4)
Caused by: com.android.tools.r8.CompilationFailedException: Compilation failed to complete, position: null
    at Version.fakeStackEntry(Version_3.3.20-dev+aosp1.java:0)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:75)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:28)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:27)
    at com.android.tools.r8.internal.vj.b(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:2)
    at com.android.tools.r8.D8.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:22)
    at com.android.tools.r8.D8.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:17)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:85)
    ... 1 more
Caused by: com.android.tools.r8.internal.f: Cannot fit requested classes in a single dex file (# methods: 68157 > 65536)
    at com.android.tools.r8.internal.YS.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:14)
    at com.android.tools.r8.internal.YS.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:22)
    at com.android.tools.r8.internal.v20.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:565)
    at com.android.tools.r8.internal.r20.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:7)
    at com.android.tools.r8.internal.D2.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:335)
    at com.android.tools.r8.internal.D2.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:412)
    at com.android.tools.r8.D8.d(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:794)
    at com.android.tools.r8.D8.c(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:1)
    at com.android.tools.r8.internal.vj.a(R8_3.3.20-dev+aosp1_dd4c01853fd917497aef2d09abff533f0d25b062517ea74449d40e1778a34753:24)
    ... 5 more
#MultiDex: True
 

Biswajit

Active Member
Licensed User
Longtime User
No. You can convert the GIF to a video and use it.
 

Tico.13

Member
Thanks @Biswajit , im getting this errors trying to use DirAssets:

Line code:
sc.items.Add(CreateMap("data":"Item 1-"&j, "video":File.Combine(File.DirAssets, "video.mp4"), "type":"file"))

com.google.android.exoplayer2.upstream.FileDataSource$FileDataSourceException: com.google.android.exoplayer2.upstream.FileDataSource$FileDataSourceException: java.io.FileNotFoundException: /video.mp4: open failed: ENOENT (No such file or directory)


And DirRootExternal:

Line code:
sc.items.Add(CreateMap("data":"Item 1-"&j, "video":File.Combine(File.DirRootExternal&"/", "VID-20210504-WA0001.mp4"), "type":"file"))

com.google.android.exoplayer2.upstream.FileDataSource$FileDataSourceException: com.google.android.exoplayer2.upstream.FileDataSource$FileDataSourceException: java.io.FileNotFoundException: /storage/emulated/0/VID-20210504-WA0001.mp4: open failed: EACCES (Permission denied)

Please any suggestions?
 

Biswajit

Active Member
Licensed User
Longtime User
java.io.FileNotFoundException: /video.mp4: open failed: ENOENT (No such file or directory)
java.io.FileNotFoundException: /storage/emulated/0/VID-20210504-WA0001.mp4: open failed: EACCES (Permission denied)
Cause of both the errors are already written over there.
 

Ferdari

Active Member
Licensed User
Longtime User
Hi @Biswajit and Thanks for the Library, is very good.

Is it possible to enable normal Zoom instead of Pinch zoom?
 

nicieri

Active Member
Licensed User
Longtime User
I like it! However, why might the loading be so slow? It’s really slow, and sometimes it even fails. It’s not about the destination point since they are lightweight S3 files. I would like it to be as fast as Instagram. Could it be that it needs preloading or something like that?
 

Ferdari

Active Member
Licensed User
Longtime User
I like it! However, why might the loading be so slow? It’s really slow, and sometimes it even fails. It’s not about the destination point since they are lightweight S3 files. I would like it to be as fast as Instagram. Could it be that it needs preloading or something like that?
i first download the image list to Dir.Cache on a preload screen, when i click the gallery it loads from cache very fast
 

mgh

Member
This Instagram style image and video slider is compatible with B4A and B4I.

xImageSliderIG
Author:
@Biswajit
Version: 2.02
Dependency:
  1. B4A: JavaObject, XUI, GestureDetector, AHViewPager(ver. 3), OkHttpUtils2, ExoPlayer
  2. B4I: iXUI, iHttpUtils2, iUI8
Features:
  1. Instagram like Image Counter
  2. Instagram like Dot Indicator
  3. Instagram like Pinch Zoom (only for image item)
  4. Cover blank space with blurry image/color
  5. Customizable Indicator color and animation duration
  6. Single Tap and Double Tap
  7. Fit / Fill / Stretch Image
  8. Lazy loading for both image and video
  9. Loading indicator
  10. Support both local and remote items
  11. Retry loading option for failed remote image
  12. Update item list on runtime
  13. Support video playback both local and remote (uri/dash/hls/smoothstream) (NEW)
  14. Auto-pause while going offscreen (NEW)
  15. Auto-resume while visible 85% (NEW)
  16. Autoplay and start muted video (NEW)
  17. Hide/Show (inside/outside) dot indicators (NEW)
  18. Support video scaling (Fill / Fit / Stretch) (NEW)
Method:
  • SetItems(imgs As List)
    Set/Update items as a list to the slider along with the value as a map you want to receive on tap events
    Image item map format:
    data: your data that will be returned on tap
    image: bitmap / url
    Video item map format:
    data: your data that will be returned on double tap
    video: url / path (combined)
    type: file/uri/dash/hls/smoothstream
  • SetZoomPanel(ZoomPanelContainer As B4XView)
    Set zoom panel (Usually Activity / Root panel) to enable the pinch zoom feature
  • ShowNext
    Show the next item
  • ShowPrev
    Show the previous item
  • PauseCurrentVideo
    Pause the current video item
  • PlayCurrentVideo
    Play the current video item
  • ToggleMute
    Toggle mute of the current video item
  • UpdatePlayback
    Update the current playback state
    Required to pause the playback on activity_pause / page_disappear
    And to resume the playback on activity_resume / page_appear
Property:
  • ActivityHasActionBar As Boolean
    Set it to true if the activity/page has an Action bar (b4a) / Navigation bar (B4I). Default is False. Only needed if the pinch zoom is enabled.
  • CurrentIndex As Int
Designer Property:
  • Show Indicator Dots: Show indicator dots. (OUTSIDE / INSIDE / HIDE) (Default: OUTSIDE)
  • Dots Color: Change the inactive dot indicator color. (Default: #CCCCCC)
  • Active Dot Color: Change the active dot color. (Default: #4286F4)
  • Scale Content: Slider item scale type. (FIT / FILL / STRETCH) (Default: FIT)
  • Cover Free Space: Show a blurry image around the slide image if there is any free space. Only applicable for image item and if FIT scale type is selected. (Default: TRUE)
  • Free Space Color: Show a solid color around the slide item if there is any free space. Only applicable if Cover Free Space is unchecked for image items. (Default: #F4F4F4)
  • Item Count: Show slide count label (Eg. 5/10) (Default: TRUE)
  • Dot Transition Duration: Dots transition time in milliseconds. (Default: 500)
  • Zoom Actual View: If checked the slide will be hidden while zooming (Like Instagram).
  • Autoplay Video: If checked the video will be autoplayed on loading completion. (Default: TRUE)
  • Start Video Muted: If checked the video will start muted on loading completion. (Default: TRUE)
Events:
  • PageChanged(CurrentIndex As Int)
  • VideoPlaying(CurrentIndex As Int)
  • VideoPaused(CurrentIndex As Int)
  • SingleTap(CurrentIndex As Int, Data As Object)
    NOTE: Only for image items. For video items single tap will toggle the video playback state.
  • DoubleTap(CurrentIndex As Int, Data As Object)

Usage:
  1. Add this view from the Designer.
  2. Copy the attached ximageslider_video layout file to your project if you want to show video items.
  3. Create a list having each item as a map. The map will contain a bitmap or URL and data (any object) (See Example). (For Image item)
  4. Create a list having each item as a map. The map will contain a video URL or Path, video type, and data (any object) (See Example). (For Video item)
  5. Set that list to the image slider.
  6. Set zoom panel (optional)
  7. On activity pause / page disappear event pause the current video playback (See Example)
  8. On activity resume / page appear event update the current video playback (See Example)
  9. If you are using multiple sliders in a clv, then call UpdatePlayback on ScrollChange event.
For multiple sliders with CLV check the attached examples.

Update 1.1:

  1. Added support for lazy loading
  2. Added support for remote image loading (Example attached)
  3. New loading indicator and tap to retry option for failed remote image
Update 1.20:
  1. Fixed crash issue in Android 28.
  2. Added support for updating the image list (Check updated example).
Update 1.21: Added new PageChanged event.
Update 1.22: Fixed a crashing issue while using as a single slider with no ActionBar.
Update 2.00:
  1. Fix item scaling issue
  2. Support video playback both local and remote (uri/dash/hls/smoothstream)
  3. Auto-pause while going offscreen
  4. Auto-resume while visible 85%
  5. Autoplay and start muted video
  6. Hide/Show (inside/outside) dot indicators
  7. Support image and video scaling (Fill / Fit / Stretch)
  8. Added new events VideoPlaying and VideoPaused
  9. Changed SetImages method name to SetItems
  10. More accurate blurry cover image.
  11. Now it depends upon ExoPlayer for B4A and iUI8 for B4i
Update 2.01:
  1. Fixed an issue of ShowNext function (B4A)
  2. Fixed double tap issue (B4i)
Update 2.02: Fixed a crashing issue with a slow network connection while playing video.
Hello
What is this error about?


Unknown member: passtoucheventto


Error description: Unknown member: passtoucheventto
Error occurred on line: 248
GD.PassTouchEventTo(MotionEvent,Imgcont)
Word: passtoucheventto
 

Biswajit

Active Member
Licensed User
Longtime User
Hello
What is this error about?


Unknown member: passtoucheventto


Error description: Unknown member: passtoucheventto
Error occurred on line: 248
GD.PassTouchEventTo(MotionEvent,Imgcont)
Word: passtoucheventto
Post your error log
 
Top