B4A Library [B4X] [XUI] AS Stories

Library that shows a horizontal progress like Instagram stories. You can add your own layout like on the AS_ViewPager. The AS_Stories supports lazy loading too.

I spend a lot of time in creating views, like this and to create a high quality view cost a lot of time. If you want to support me and further views, then you can do it here by Paypal or with a coffee.

This is the 1st version, it may contain bugs and errors.

AutoPlay = True | Default = False

Tap to skip a page or hold, to hide infos from the layout

AS_Stories
Author: Alexander Stolte
Version: 1.02
  • AS_Stories
    • Events:
      • AutoPlayContinue
      • AutoPlayEnd
      • AutoPlayPause
      • LazyLoadingAddContent (Parent As B4XView, Value As Object)
      • PageChanged (Index As Int)
    • Fields:
      • mBase As B4XView
      • Tag As Object
    • Functions:
      • AddPage (PagePanel As B4XView, Value As Object) As String
      • AddPage2 (PagePanel As B4XView, CustomAutoPlayInterval As Long, Value As Object) As String
        CustomAutoPlayInterval - A custom auto play interval is set for this page, all other pages where none is set have the normal AutoPlayInterval
      • Base_Resize (Width As Double, Height As Double) As String
      • Class_Globals As String
      • Clear As String
      • Commit As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map)
        Base type must be Object
      • getAutoPlayInterval As Long
      • getHeaderPanel As B4XView
      • getIndex As Int
      • GetPage (Index As Int) As AS_Stories_Page
      • GetPanel (Index As Int) As B4XView
        Returns the Panel stored at the specified index.
      • getSize As Int
      • getTouchWidth As Float
        Gets or sets the touch panel width
        Default: 100dip
      • GetValue (Index As Int) As Object
        Returns the Value stored at the specified index.
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • NextPage As String
      • Pause As String
        Call Resume to start
      • PreviousPage As String
      • RemovePageAt (Index As Int) As String
      • ResetAutoPlay As String
        Reset the auto play on the current index
      • Resume As String
        Call Pause to stop
      • setAutoPlay (Enabled As Boolean) As String
      • setAutoPlayInterval (AutoPlayInterval As Long) As String
      • setIndex (Index As Int) As String
      • setTouchWidth (Width As Float) As String
    • Properties:
      • AutoPlay
      • AutoPlayInterval As Long
      • HeaderPanel As B4XView [read only]
      • Index As Int
      • Size As Int [read only]
      • TouchWidth As Float
        Gets or sets the touch panel width
        Default: 100dip
  • AS_Stories_Page
    • Fields:
      • CustomAutoPlayInterval As Long
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Value As Object
    • Functions:
      • Initialize
        Initializes the fields to their default value.
Changelog
  • 1.00
    • Release
  • 1.01
    • B4A - Click events of views are now triggered
    • Add ResetAutoPlay - Resets the autplay on the current index
  • 1.02
    • Add AddPage2 - with a CustomAutoPlayInterval parameter
    • Add GetPage
    • Add get and set AutoPlayInterval
Have Fun
 

Attachments

  • AS Stories Example.zip
    10.1 KB · Views: 247
  • AS_Stories.b4xlib
    3.6 KB · Views: 36
Last edited:
Click to expand...

asales

Expert
Licensed User
Longtime User
I tried to change the color to gradient using the code below, but I get this error:
java.lang.IllegalArgumentException: width and height must be > 0

What could be the problem?
B4X: 
Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("frm_main")

    Dim xpnl_Item As B4XView = xui.CreatePanel("")

    Dim col(2) As Int
    col(0) = Colors.RGB(125,25,85)
    col(1) = Colors.RGB(65,193,168)

    SetGradientBackground(xpnl_Item, col, "TOP_BOTTOM")
    
    AS_Stories1.AddPage(xpnl_Item,0)
End Sub

Sub SetGradientBackground(v As B4XView, Clrs() As Int, Orientation As String)
    Dim bc As BitmapCreator
    bc.Initialize(v.Width / xui.Scale, v.Height / xui.Scale)
    bc.FillGradient(Clrs, bc.TargetRect, Orientation)
    Dim rect As B4XRect
    rect.Initialize( 0, 0, bc.mWidth-1, bc.mHeight-1 )
    bc.FillRadialGradient( Array As Int(xui.Color_white, xui.Color_Transparent) , rect )
    Dim iv As ImageView
    iv.Initialize("")
    Dim xiv As B4XView = iv
    v.AddView(xiv, 0, 0, v.Width, v.Height)
    xiv.SendToBack
    bc.SetBitmapToImageView(bc.Bitmap, xiv)
End Sub
 

Alexander Stolte

Expert
Licensed User
Longtime User
asales said:
Dim xpnl_Item As B4XView = xui.CreatePanel("")
Click to expand...
You intialize a panel without specifying the height and width. Then you pass the function this
panel and this function tries to determine the height and width before you have set it. Has nothing to do with this view. Please create a new thread next time, thanks.
 

asales

Expert
Licensed User
Longtime User
I load the pages using a layout and in the last page I use a layout with labels to click in it (like the mentions in Instagram Stories).
But the click in the label is not work.
This is the default behaviour?
There are a workaround to capture the click?
 

asales

Expert
Licensed User
Longtime User
Other question: how can I reset the autoplay?
In a b4xpages project, when a reopen the page, even set index = 0 in B4XPage_Appear sub, it don't restart.
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.01
    • B4A - Click events of views are now triggered
    • Add ResetAutoPlay - Resets the autplay on the current index
asales said:
Other question: how can I reset the autoplay?
Click to expand...
Example, you reset the auto play and set the index to the first page:
B4X: 
AS_Stories1.Index = 0
AS_Stories1.ResetAutoPlay
I was about to give up as I had tried 2 things and they did not work. While writing the message, I then came up with the final workaround.
Should now work.
 
You must log in or register to reply here.

Similar Threads

  • Article
B4A Library [B4X] [XUI] AS BottomActionSheet
Replies
5
Views
2K
Alexander Stolte
  • Question
Android Question [Solved] Ideas to create a [B4X] stories progress - like Instagram and WhatsApp
Replies
7
Views
2K
asales
  • Article
B4A Library [B4X] [XUI] AS PlusMinus
Replies
0
Views
2K
Alexander Stolte
  • Article
B4A Library [B4X] [XUI] AS BlinkTextView
Replies
4
Views
2K
aminoacid
R
  • Question
B4J Question [B4X] [XUI] Scrolling Label, Scroll with short text
Replies
4
Views
1K
Revisable5987
R
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…