This Instagram style image and video slider is compatible with B4A and B4I.
xImageSliderIG
Author: @Biswajit
Version: 2.02
Dependency:
Usage:
Update 1.1:
Update 1.22: Fixed a crashing issue while using as a single slider with no ActionBar.
Update 2.00:
xImageSliderIG
Author: @Biswajit
Version: 2.02
Dependency:
- B4A: JavaObject, XUI, GestureDetector, AHViewPager(ver. 3), OkHttpUtils2, ExoPlayer
- B4I: iXUI, iHttpUtils2, iUI8
- Instagram like Image Counter
- Instagram like Dot Indicator
- Instagram like Pinch Zoom (only for image item)
- Cover blank space with blurry image/color
- Customizable Indicator color and animation duration
- Single Tap and Double Tap
- Fit / Fill / Stretch Image
- Lazy loading for both image and video
- Loading indicator
- Support both local and remote items
- Retry loading option for failed remote image
- Update item list on runtime
- Support video playback both local and remote (uri/dash/hls/smoothstream) (NEW)
- Auto-pause while going offscreen (NEW)
- Auto-resume while visible 85% (NEW)
- Autoplay and start muted video (NEW)
- Hide/Show (inside/outside) dot indicators (NEW)
- Support video scaling (Fill / Fit / Stretch) (NEW)
- 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
- 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
- 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)
- 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:
- Add this view from the Designer.
- Copy the attached ximageslider_video layout file to your project if you want to show video items.
- 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)
- 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)
- Set that list to the image slider.
- Set zoom panel (optional)
- On activity pause / page disappear event pause the current video playback (See Example)
- On activity resume / page appear event update the current video playback (See Example)
- If you are using multiple sliders in a clv, then call UpdatePlayback on ScrollChange event.
Update 1.1:
- Added support for lazy loading
- Added support for remote image loading (Example attached)
- New loading indicator and tap to retry option for failed remote image
- Fixed crash issue in Android 28.
- Added support for updating the image list (Check updated example).
Update 1.22: Fixed a crashing issue while using as a single slider with no ActionBar.
Update 2.00:
- Fix item scaling issue
- Support video playback both local and remote (uri/dash/hls/smoothstream)
- Auto-pause while going offscreen
- Auto-resume while visible 85%
- Autoplay and start muted video
- Hide/Show (inside/outside) dot indicators
- Support image and video scaling (Fill / Fit / Stretch)
- Added new events VideoPlaying and VideoPaused
- Changed SetImages method name to SetItems
- More accurate blurry cover image.
- Now it depends upon ExoPlayer for B4A and iUI8 for B4i
- Fixed an issue of ShowNext function (B4A)
- Fixed double tap issue (B4i)
Attachments
Last edited:
