B4A Library [B4X] [XUI] AS Sliding Onboarding (based on ASViewPager)

Hello,
the next view to make the B4X life easier :)
The view was written from scratch and is not compatible with the ASOnboarding.

First, i spend a lot of time in creating views, some views i need by my self, but some views not and to create a high quality view cost a lot of time. If you want to support me, then you can do it here by Paypal. :)

Features
  • cross-platform compatible
  • Slide between pages (ASViewPager)
  • fully customizable
  • Next,Back,Skip,Finish Button
  • Use your own layout
  • 3 Header Sizes
  • Events
  • Use a image as background
read the dependencies of the ASViewPager to avoid errors
B4j: jXUI,ASViewPager
B4a: XUi,ASViewPager
B4i: =iXUI,ASViewPager

20-04-25-23-23-39.gif
Bildschirmfoto 2020-04-26 um 00.00.15.png
Bildschirmfoto 2020-04-26 um 00.00.46.png
Bildschirmfoto 2020-04-26 um 00.01.11.png
Screenshot_20200425-232321.jpg
dsffsdsdfsdf.JPG


AS SlidingOnboarding
Author: Alexander Stolte
Version: 2.00

  • AS_SlidingOnboarding
    • Events:
      • BaseResize (Width As Double, Height As Double)
      • GetStartedButtonClick
      • PageChange (Index As Int)
      • SkipButtonClicked (Mode As String)
    • Fields:
      • Tag As Object
    • Functions:
      • AddPage (HeaderText As String, Description As String, BackgroundColor As Int, HeaderLayout As B4XView, Value As Object) As String
      • Base_Resize (Width As Double, Height As Double) As String
      • BottomPanel (Index As Int) As B4XView
        gets the Bottom Panel
      • Class_Globals As String
      • Clear As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • GenerateImageView (ImageName As String) As B4XView
      • getBottomButtons As AS_SlidingOnboarding_BottomButtons
      • getBottomProperties As AS_SlidingOnboarding_BottomProperties
        Call RefreshBottom if you change something
      • getCurrentIndex As Int
      • getCustomListView As b4j.example.jpager
        The View is based of the ASViewPager and this Pager is based on the xCustomListView
      • getDescriptionProperties As AS_SlidingOnboarding_DescriptionProperties
      • getHeaderHeight As Float
        gets the Header Height
      • getHeaderProperties As AS_SlidingOnboarding_HeaderProperties
      • getIndicatorActiveColor As Int
      • getIndicatorInactiveColor As Int
      • getLoadingPanelColor As Int
      • getSize As Int
      • getSkipButtonMode As String
      • getViewPager As b4j.example.asviewpager
        This View is based on the ASViewPager
      • HeaderPanel (Index As Int) As B4XView
        gets the Header Area Panel to change the Header Layout
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • PageBackgroundPanel (Index As Int) As B4XView
        If you want to change the background color of a page or you want to add your own views on the full page instead just on the header
      • RefreshBottom As String
      • RemovePage (Index As Int) As String
      • setCurrentIndex (index As Int) As String
        sets or gets the current index
      • setHeaderSize (header_size As Float) As String
        The header size must be between 25 and 75 if not the value is set to 50
      • setIndicatorActiveColor (clr As Int) As String
        gets or sets the active indicator color
      • setIndicatorInactiveColor (clr As Int) As String
        gets or sets the inactive indicator color
      • setLoadingPanelColor (Color As Int) As String
      • setShowIndicator (visible As Boolean) As String
      • setSkipButtonMode (mode As String) As String
      • SkipButtonMode_CLOSE As String
      • SkipButtonMode_SKIP As String
    • Properties:
      • BottomButtons As AS_SlidingOnboarding_BottomButtons [read only]
      • BottomProperties As AS_SlidingOnboarding_BottomProperties [read only]
        Call RefreshBottom if you change something
      • CurrentIndex As Int
        sets or gets the current index
      • CustomListView As b4j.example.jpager [read only]
        The View is based of the ASViewPager and this Pager is based on the xCustomListView
      • DescriptionProperties As AS_SlidingOnboarding_DescriptionProperties [read only]
      • HeaderHeight As Float [read only]
        gets the Header Height
      • HeaderProperties As AS_SlidingOnboarding_HeaderProperties [read only]
      • HeaderSize
        The header size must be between 25 and 75 if not the value is set to 50
      • IndicatorActiveColor As Int
        gets or sets the active indicator color
      • IndicatorInactiveColor As Int
        gets or sets the inactive indicator color
      • LoadingPanelColor As Int
      • ShowIndicator
      • Size As Int [read only]
      • SkipButtonMode As String
      • ViewPager As b4j.example.asviewpager [read only]
        This View is based on the ASViewPager
  • AS_SlidingOnboarding_BottomButtons
    • Fields:
      • BackButton As B4XView
      • FinishButton As B4XView
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • NextButton As B4XView
      • SkipButton As B4XView
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_SlidingOnboarding_BottomProperties
    • Fields:
      • BackButtonText As String
      • FinishButtonText As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • NextButtonText As String
      • ShowFinishButton As Boolean
      • ShowNextBackButton As Boolean
      • ShowSkipButton As Boolean
      • SkipButtonText As String
      • xFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_SlidingOnboarding_DescriptionProperties
    • Fields:
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextColor As Int
      • xFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_SlidingOnboarding_HeaderProperties
    • Fields:
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • TextColor As Int
      • xFont As B4XFont
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_SlidingOnboarding_Page
    • Fields:
      • BackgroundColor As Int
      • Description As String
      • HeaderLayout As B4XView
      • HeaderText As String
      • 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
    • Add BaseResize Event
  • 1.02
    • Add SkipButtonClicked Event
    • Add SkipButtonMode
      • SkipButtonMode_SKIP
      • SkipButtonMode_CLOSE
  • 1.03
    • BugFix
  • 1.04
    • Add compatibility for AS_ViewPager Version 2.0
  • 1.05
    • BugFix
  • 2.00
    • Complete lib. rewrite with new name
  • 2.01
    • mBase is now public like in all other custom views
Have Fun :)
 

Attachments

  • AS Sliding Onboarding Example.zip
    39.6 KB · Views: 271
  • AS_SlidingOnboarding.b4xlib
    4.9 KB · Views: 196
Last edited:

asales

Expert
Licensed User
Longtime User
Great work!

2 questions:

1 - Is possible to use BCTextEngine to create a page?
I want to add a button in description text to raise an action (get permission from the user) in a simple way.

2 - How can a load a custom layout to one page and use texts in the others?

Thanks!
 

asales

Expert
Licensed User
Longtime User
2 - How can a load a custom layout to one page and use texts in the others?
Add a blank page and after load the layout. Correct?
B4X:
ASSlidingOnboarding1.AddPage("", "", 0, GenImageViews("1.png"), "")
ASSlidingOnboarding1.getPageBackgroundPanel(0).LoadLayout("page1")
 

asales

Expert
Licensed User
Longtime User
I put an app in Play Store and - in some devices - I get the error below in Crashlytics.
What could be the problem?
Thanks for your support!
B4X:
asslidingonboarding._ini_views
Fatal Exception: java.lang.IllegalArgumentException: width and height must be > 0
at android.graphics.Bitmap.createBitmap(Bitmap.java:1113)
at android.graphics.Bitmap.createBitmap(Bitmap.java:1080)
at android.graphics.Bitmap.createBitmap(Bitmap.java:1030)
at android.graphics.Bitmap.createBitmap(Bitmap.java:991)
at anywheresoftware.b4a.objects.drawable.CanvasWrapper.Initialize(CanvasWrapper.java:81)
at anywheresoftware.b4a.objects.B4XCanvas.Initialize(B4XCanvas.java:54)
at br.com.myprofiles.asslidingonboarding._ini_views(asslidingonboarding.java:508)
at br.com.myprofiles.asslidingonboarding._designercreateview(asslidingonboarding.java:284)
B4X:
    ASSlidingOnboarding1.AddPage("Check the new options","Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis fermentum nunc, et egestas tellus.", 0xFF27A3DF, GenImageViews("premium.png"),"")
   
    ASSlidingOnboarding1.AddPage("", "", 0, GenImageViews("logo.png"), "")
    ASSlidingOnboarding1.getPageBackgroundPanel(2).LoadLayout("page3")
    Dim bmp As B4XBitmap = xui.LoadBitmap(File.DirAssets, "logo_600.png")
    FitImageToView(bmp, ivPage3)
    cs.Initialize.Bold.Size(22).Append("Turn on the notification !").Pop.Pop.Append(CRLF).Append(CRLF).Append("Do you want to receive NOTICES and REMINDERS ?")
    cs.Append(CRLF).Append("Click in ACTIVATE ").Size(18).Typeface(Typeface.FONTAWESOME).Append(Chr(0xF0F3)).Pop.Pop.Append(CRLF).Append(CRLF)
    cs.PopAll
    lbInfo33.Text = cs
 
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
1 - Is possible to use BCTextEngine to create a page?
No it is not possible.
2 - How can a load a custom layout to one page and use texts in the others?
Something like this:
B4X:
ASSlidingOnboarding1.ViewPager.GetPanel(0).LoadLayout("")
I put an app in Play Store and - in some devices - I get the error below in Crashlytics.
What could be the problem?
I don't know, in the sub where this occurs I have already specified 1dip as minimum for the panel that works with canvas.
 

asales

Expert
Licensed User
Longtime User
Something like this:
B4X:
ASSlidingOnboarding1.ViewPager.GetPanel(0).LoadLayout("")
This?
B4X:
ASSlidingOnboarding1.AddPage("", "", 0, GenImageViews2("1.png"), "")
ASSlidingOnboarding1.ViewPager.GetPanel(0).LoadLayout("page1")

Instead this?
B4X:
ASSlidingOnboarding1.AddPage("", "", 0, GenImageViews2("1.png"), "")
ASSlidingOnboarding1.getPageBackgroundPanel(0).LoadLayout("onpage1")

Or could use both?

How can I pass a null value in the parameter (headerlayout) - GenImageViews2("1.png"):
B4X:
ASSlidingOnboarding1.AddPage("", "", 0, GenImageViews2("1.png"), "")
 

Alexander Stolte

Expert
Licensed User
Longtime User
Or could use both?
Use what works.
How can I pass a null value in the parameter (headerlayout) - GenImageViews2("1.png"):
B4X:
ASSlidingOnboarding1.AddPage("Test","Description",xui.Color_Red,xui.CreatePanel(""),"")
Depends on what you want to do. It would also be super easy with AS_ViewPager to just develop your own onboarding screen, there you have 100% control.
 

asales

Expert
Licensed User
Longtime User
I put an app in Play Store and - in some devices - I get the error below in Crashlytics.
B4X:
asslidingonboarding._ini_views
Fatal Exception: java.lang.IllegalArgumentException: width and height must be > 0

I don't know, in the sub where this occurs I have already specified 1dip as minimum for the panel that works with canvas.
I found this thread:
Could be related to the problem that I mentioned about this crashlytics error?
 

asales

Expert
Licensed User
Longtime User
Maybe, found it out. I have changed all the lines with Max(2dip,
I updated an app with the new version, but the errors remains in Crashlytics.
I checked this behaviour and it seems that occurs in a few devices (OnePlus8Pro - Android 11, Nexus 5X - Android 6.0.1).

I think this devices is using by Google to test the app before publish in Play Store.
It's because I published the app and the crashlytics report me this error before the version released in the store (the update is still pending).
I don't know what this devices has to cause this errors :confused:.
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 2.00
    • Complete lib. rewrite with new name
Breaking changes
Version 2 is not compatible with version 1, which means you have to add the view in the designer again, because the name has changed. Best is to delete the old lib. from the lib. folder.
 

Mattiaf

Active Member
Licensed User
I might be dumb, but i don't understand how to close the entire view once the user clicks on Get started button...
 

asales

Expert
Licensed User
Longtime User
I might be dumb, but i don't understand how to close the entire view once the user clicks on Get started button...
B4X:
Sub ASSlidingOnboarding1_GetStartedButtonClick
    B4XPages.ClosePage(Me)
End Sub
 

Jerryk

Member
Licensed User
Longtime User
How I change font size of HeaderText or Description? AS_SlidingOnboarding1.HeaderProperties.xFont.Size is readonly. Change of color is possible.
 
Top