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

Biswajit · Jun 23, 2020

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

xImageSliderIG
Author: @Biswajit
Version: 2.02
Dependency:

B4A: JavaObject, XUI, GestureDetector, AHViewPager(ver. 3), OkHttpUtils2, ExoPlayer
B4I: iXUI, iHttpUtils2, iUI8

Features:

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)

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:

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.

For multiple sliders with CLV check the attached examples.

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

Update 1.20:

Fixed crash issue in Android 28.
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:

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

Update 2.01:

Fixed an issue of ShowNext function (B4A)
Fixed double tap issue (B4i)

Update 2.02: Fixed a crashing issue with a slow network connection while playing video.

Biswajit · Oct 16, 2020

MarcoRome said:
Well done

Thank you for the donation.

alfaiz678 · Nov 7, 2020

I have this problem

alfaiz678 · Nov 7, 2020

Biswajit said:
Download the new library. And check this example.

I only use this example
I did not amend anything

Biswajit · Nov 7, 2020

alfaiz678 said:
I only use this example
I did not amend anything

Check the dependencies and versions. You need the latest AHViewpager.

alfaiz678 · Nov 7, 2020

Biswajit said:
Check the dependencies and versions. You need the latest AHViewpager.

Thank
The library has been updated
It is working now
https://www.b4x.com/android/forum/t...ary-sliding-panels-now-perfect.14165/#content

MarcoRome · Dec 25, 2020

Hi @Biswajit
if you try with same movie example this:

sc.items.Add(CreateMap("data":"Item 1-"&j, "video":"https://www.xxxxx.com/caricafile/bosa/bosa.mp4", "type":"uri"))

The App crash with this error: "
ximagesliderig_vplayer_ready (java line: 1675)
java.lang.ClassCastException: anywheresoftware.b4a.BALayout cannot be cast to android.widget.ProgressBar"

*** Service (starter) Create ***
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
ximagesliderig_vplayer_ready (java line: 1675)
java.lang.ClassCastException: anywheresoftware.b4a.BALayout cannot be cast to android.widget.ProgressBar
at b4a.example.ximagesliderig._vplayer_ready(ximagesliderig.java:1675)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:213)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:193)
at anywheresoftware.b4a.objects.SimpleExoPlayerWrapper$1.onPlayerStateChanged(SimpleExoPlayerWrapper.java:96)
at com.google.android.exoplayer2.ExoPlayerImpl$PlaybackInfoUpdate.lambda$run$5$ExoPlayerImpl$PlaybackInfoUpdate(ExoPlayerImpl.java:828)
at com.google.android.exoplayer2.ExoPlayerImpl$PlaybackInfoUpdate$$Lambda$5.invokeListener(Unknown Source:2)
at com.google.android.exoplayer2.BasePlayer$ListenerHolder.invoke(BasePlayer.java:182)
at com.google.android.exoplayer2.ExoPlayerImpl.invokeAll(ExoPlayerImpl.java:845)
at com.google.android.exoplayer2.ExoPlayerImpl.access$000(ExoPlayerImpl.java:43)
at com.google.android.exoplayer2.ExoPlayerImpl$PlaybackInfoUpdate.run(ExoPlayerImpl.java:826)
at com.google.android.exoplayer2.ExoPlayerImpl.notifyListeners(ExoPlayerImpl.java:736)
at com.google.android.exoplayer2.ExoPlayerImpl.updatePlaybackInfo(ExoPlayerImpl.java:710)
at com.google.android.exoplayer2.ExoPlayerImpl.handlePlaybackInfo(ExoPlayerImpl.java:652)
at com.google.android.exoplayer2.ExoPlayerImpl.handleEvent(ExoPlayerImpl.java:595)
at com.google.android.exoplayer2.ExoPlayerImpl$1.handleMessage(ExoPlayerImpl.java:127)
at android.os.Handler.dispatchMessage(Handler.java:105)
at android.os.Looper.loop(Looper.java:164)
at android.app.ActivityThread.main(ActivityThread.java:6944)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:327)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1374)

Any idea ??
Thank you and have a nice Merry Christmas
Marco

Biswajit · Dec 25, 2020

MarcoRome said:
Hi @Biswajit
if you try with same movie example this:

The App crash with this error: "
ximagesliderig_vplayer_ready (java line: 1675)
java.lang.ClassCastException: anywheresoftware.b4a.BALayout cannot be cast to android.widget.ProgressBar"

Any idea ??
Thank you and have a nice Merry Christmas
Marco

Working fine here. Did you change any library code?

MarcoRome · Dec 25, 2020

Biswajit said:
Working fine here. Did you change any library code?

I found the issue. If the internet is down ( or isnt fast ), cause a crash. Is there a check on this ?
Thank you @Biswajit

Biswajit · Dec 25, 2020

MarcoRome said:
I found the issue. If the internet is down ( or isnt fast ), cause a crash. Is there a check on this ?
Thank you @Biswajit

Yes. Uploaded a new version. Please download.

MarcoRome · Dec 25, 2020

Biswajit said:
Yes. Uploaded a new version. Please download.

Yes work. Thank you verty much. Have a nice day

lucasheer · May 27, 2021

Hello!

For some reason, the videos are super crisp, but the images are getting blurred after being displayed. I'm thinking this is from resize?

Any suggestions on going about fixing this?

Thank you!

lucasheer · May 30, 2021

I fixed the blurry issue on iOS for my case.

Changed

B4X:

iv.Bitmap = img.Resize(ImgCont.Width,ImgCont.Height,True)

to

B4X:

iv.Bitmap = img

Was going to convert ImageView to B4XImageView, but this worked for me. I compress/crop images to be relatively close to the view size on the backend.

thank you!

spooky · Jun 17, 2021

I have this problem, please help me.

Biswajit · Jun 17, 2021

spooky said:
I have this problem, please help me.

View attachment 115065

If you don't have an actionbar in your activity then set ActivityHasActionBar to false.

spooky · Jun 17, 2021

Biswajit said:
If you don't have an actionbar in your activity then set ActivityHasActionBar to false.

I tried to set ActivityHasActionBar to false but still error

Biswajit · Jun 18, 2021

spooky said:
I tried to set ActivityHasActionBar to false but still error
View attachment 115072

Its working fine here. Try to clean the project then retry. If the problem persist then try to download the latest android SDK.

MarcoRome · Oct 14, 2021

Hi @Biswajit
I noticed a problem that maybe you can give me the solution.
If the library is used on a second activity, the first time the activity is opened everything works fine, but when you switch to another activity and try to reopen the activity with the videos, they are not more loaded and give the following error.

The project test is here:

Biswajit · Oct 14, 2021

MarcoRome said:
Hi @Biswajit
I noticed a problem that maybe you can give me the solution.
If the library is used on a second activity, the first time the activity is opened everything works fine, but when you switch to another activity and try to reopen the activity with the videos, they are not more loaded and give the following error.

The project test is here:

If you check the log you will see this is happening due to limited numbers of hardware accelerated video decoders. Some devices have a limited number of hardware accelerated video decoders available. In my device its 12. If I create more than 12 exoplayers then its throwing the decoder initialization failed issue. The video players needs to be recycled when its off-screen. But for that a lots of changes needs to be done and I am busy until next week. After that I will try to fix it.

For now use the attached library and change the Activity_pause event to,

B4X:

Sub Activity_Pause (UserClosed As Boolean)
    For Each sc As SliderContainer In sliders
        sc.slider.PauseCurrentVideo
        If UserClosed Then sc.slider.ReleaseVideoPlayers ''<- add this line
    Next
End Sub

Also when you are using too many video players its better to add the following code to your manifest to avoid OOM issue.

B4X:

SetApplicationAttribute(android:largeHeap, "true")

MarcoRome · Oct 15, 2021

Biswajit said:
Also when you are using too many video players its better to add the following code to your manifest to avoid OOM issue.

B4X:

SetApplicationAttribute(android:largeHeap, "true")

This i had already added

Biswajit said:
If you check the log you will see this is happening due to limited numbers of hardware accelerated video decoders. Some devices have a limited number of hardware accelerated video decoders available. In my device its 12. If I create more than 12 exoplayers then its throwing the decoder initialization failed issue. The video players needs to be recycled when its off-screen. But for that a lots of changes needs to be done and I am busy until next week. After that I will try to fix it.

Yes, that's exactly the problem.
With the method you added, the problem was solved

Thanks i sent you a donation for your valuable support !!

MarcoRome · Oct 15, 2021

It would be very useful, in the new version to also add the Complete event (when the movie ends)
Thank you again

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

Attachments

Active Member

Active Member

Attachments

Active Member

Active Member

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Active Member

Member

Active Member

Member

Active Member

Expert

Active Member

Attachments

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency