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

Brandsum

Well-Known Member
Licensed User
This Instagram style image slider is compatible with B4A and B4I.

xImageSliderIG
Author:
@Brandsum
Version: 1.2
Dependency:
  1. B4A: JavaObject, XUI, GestureDetector, AHViewPager(ver. 3), OkHttpUtils2
  2. B4I: iXUI, iHttpUtils2
Features:
  1. Instagram like Image Counter
  2. Instagram like Dot Indicator
  3. Instagram like Pinch Zoom (optional)
  4. Cover blank space with blurry image/color
  5. Customizable Indicator color and animation duration
  6. Single Tap and Double Tap
  7. Fit / Fill Image
  8. Lazy loading (NEW)
  9. Loading indicator (NEW)
  10. Support both local and remote image (NEW)
  11. Retry loading option for failed remote image (NEW)
  12. Update image list on runtime (NEW)
Method:
  • SetImages(imgs As List)
    Set/Update images to the image slider along with the value you want to receive on tap events
  • SetZoomPanel(ZoomPanelContainer As B4XView)
    Set zoom panel (Usually Activity / Root panel) to enable the pinch zoom feature
  • ShowNext
    Show next image
  • ShowPrev
    Show previous image
Property:
  • activityHasActionBar As Boolean
    Set it to false if there is no Action bar (b4a) / Navigation bar (B4I). Default is True. Only needed if the pinch zoom is enabled.
  • CurrentIndex As Int
Designer Property:
  • Dots Color: Change the inactive dot indicator color.
  • Active Dot Color: Change the active dot color.
  • Fit Image: Fit image to the slider maintaining aspect ratio
  • Cover Free Space: Show a blurry image around the slide image if there is any free space. Only applicable if Fit Image is checked.
  • Free Space Color: Show a solid color around the slide image if there is any free space. Only applicable if Cover Free Space is unchecked.
  • Slide Count: Show slide count label (Eg. 5/10)
  • Dot Transition Duration: Dots transition time in milliseconds
  • Zoom Actual View: If checked the slide will be hidden while zooming (Like Instagram).
Events:
  • SingleTap(CurrentIndex As Int, Data As Object)
  • DoubleTap(CurrentIndex As Int, Data As Object)

Usage:
  1. Add this view from the Designer.
  2. Create a B4XOrderedMap List having images as bitmap or url as string and data as object (See Example).
  3. Set that map list to the image slider
  4. Set zoom panel (optional)
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.2:
  1. Fixed crash issue in Android 28.
  2. Added support for updating the image list (Check updated example).
 

Attachments

Last edited:

AnandGupta

Well-Known Member
Licensed User
Hi Brandsum

Thanks for the library. There was a discussion for similar one and you made it :)

2019-07-15_204017.png 2019-07-15_203951.png 2019-07-15_203907.png

Regards,

Anand
 

Ratmantoo

Member
Licensed User
A massive thank you!!!!

Please note that if the title is excluded you get a java.lang.RuntimeException: Object should first be initialized (JavaObject).

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

Brandsum

Well-Known Member
Licensed User
Do you have plan add this feature in the future ?
If you want a simple video slider with dot indicator then you can use ViewPager with xui Page Indicator library. But if you want to have zooming feature, tapping feature etc then it requires a lot of work. Maybe in future but not possible right now.
 

ykucuk

Well-Known Member
Licensed User
Hi,
B4i example works fine for me but the android version doesn't work. I tried with Samsung note 8 and Samsung active tab T597.

The problem is I can't swipe, I cant tap on it.

B4A : 9.3
Android X SDK
 

Brandsum

Well-Known Member
Licensed User
Hi,
B4i example works fine for me but the android version doesn't work. I tried with Samsung note 8 and Samsung active tab T597.

The problem is I can't swipe, I cant tap on it.

B4A : 9.3
Android X SDK
Unfortunately, I don't have any of these devices. Check if you have added all dependencies (JavaObject, XUI, GestureDetector, AHViewPager, B4XCollections). If yes then all you do is,
  1. Unzip the lib.
  2. Import the bas file to your project.
  3. Remove xImageSliderIG library refference.
  4. Now use Log to see if your touch is being detected or not inside SingleTap and DoubleTap sub.
  5. And if you get any hint post that with all log.
 

ykucuk

Well-Known Member
Licensed User
Unfortunately, I don't have any of these devices. Check if you have added all dependencies (JavaObject, XUI, GestureDetector, AHViewPager, B4XCollections). If yes then all you do is,
  1. Unzip the lib.
  2. Import the bas file to your project.
  3. Remove xImageSliderIG library refference.
  4. Now use Log to see if your touch is being detected or not inside SingleTap and DoubleTap sub.
  5. And if you get any hint post that with all log.
Could you send me the library zip file because of the first message included a library with b4xlib format.?
 

Brandsum

Well-Known Member
Licensed User
Could you send me the library zip file because of the first message included a library with b4xlib format.?
b4xlib is itself a zip file. Rename it and extract it or you can open it with 7zip, winzip, winrar etc.
 
Top