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

Discussion in 'Additional libraries, classes and official updates' started by Brandsum, Jul 14, 2019.

  1. Brandsum

    Brandsum Well-Known Member Licensed User

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

    xImageSliderIG
    Author:
    @Brandsum
    Version: 1.0
    Dependency:
    1. B4A: JavaObject, XUI, GestureDetector, AHViewPager(ver. 3), B4XCollections
    2. B4I: iXUI, B4XCollections
    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
    Method:
    • SetImages(imgs As B4XOrderedMap)
      Set 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 Designer.
    2. Create a B4XOrderedMap having images as bitmap and data as object (See Example).
    3. Set that map to the image slider
    4. Set zoom panel (optional)
    For multiple sliders with CLV check the attached examples.
     

    Attached Files:

    Last edited: Aug 21, 2019
  2. Johan Hormaza

    Johan Hormaza Active Member Licensed User

  3. Brandsum

    Brandsum Well-Known Member Licensed User

    fixed.
     
    DonManfred and Johan Hormaza like this.
  4. Alexander Stolte

    Alexander Stolte Well-Known Member Licensed User

    can i use the source code for further views? :)

    Nice view!
     
  5. Brandsum

    Brandsum Well-Known Member Licensed User

    Yes you can :)
     
    Alexander Stolte likes this.
  6. AnandGupta

    AnandGupta Active 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
     
  7. Brandsum

    Brandsum Well-Known Member Licensed User

    I have made this library 3-4 months ago. But due to some zooming issue I haven't posted. Last week I saw someone was asking for this type of library so I worked on those issues and posted it. :)
     
    Alexander Stolte and DonManfred like this.
  8. Johan Hormaza

    Johan Hormaza Active Member Licensed User

    Is there a way to move images programmatically?
    Thank you!
     
  9. Brandsum

    Brandsum Well-Known Member Licensed User

    See methods in the first post.
     
    Johan Hormaza likes this.
  10. Ratmantoo

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

    Code:
    #Region  Activity Attributes
        
    #FullScreen: True
        
    #IncludeTitle:  False
    #End Region
     
  11. Brandsum

    Brandsum Well-Known Member Licensed User

     
    Ratmantoo and Alexander Stolte like this.
  12. peacemaker

    peacemaker Well-Known Member Licensed User

  13. ykucuk

    ykucuk Well-Known Member Licensed User

    is it possible to add video?
     
  14. Brandsum

    Brandsum Well-Known Member Licensed User

    No its an image slider.
     
  15. ykucuk

    ykucuk Well-Known Member Licensed User

    Do you have plan add this feature in the future ?
     
  16. Brandsum

    Brandsum Well-Known Member Licensed User

    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.
     
  17. ykucuk

    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
     
  18. Brandsum

    Brandsum 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.
     
  19. ykucuk

    ykucuk Well-Known Member Licensed User

    Could you send me the library zip file because of the first message included a library with b4xlib format.?
     
  20. Brandsum

    Brandsum Well-Known Member Licensed User

    b4xlib is itself a zip file. Rename it and extract it or you can open it with 7zip, winzip, winrar etc.
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice