B4A Class [B4X] [XUI] AS Onboarding

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. :)
If you want to show the new users the nicest features of your app, then i have the perfect view for you ;)

If you have wishes, bugs or a better design idea, then tell me it in the comments below.
Tested on B4A.

Screenshot_20190303-231010__01.jpg
Screenshot_20190303-231021__01.jpg
Screenshot_20190303-231034__01.jpg
2019_03_03_23_09_17.gif
Screenshot_20190317-134546__01.jpg


AS Onboarding
Author: Alexander Stolte
Version: 1.10

  • ASOnboarding
    • Events:
      • BackButtonClick
      • GetStartedButtonClick
      • NextButtonClick
      • PageChange (Page As Int)
      • SkipButtonClick
    • Functions:
      • AddPage (HeadingText As String, Description As String, BackgroundColor As Int, HeaderLayout As B4XView, Tag As Object) As String
      • AddView (vParent As B4XView, vNextButton As String, vBackButton As String, vShowSkipButton As Boolean, vSkipButton As String, vShowFinishButtonText As Boolean, vFinishButtonText As String, vSwipeGestureEnable As Boolean, vHeaderSize As Float) As String
        Adds the view per code to the given parent
      • Class_Globals As String
      • DesignerCreateView (Base As Object, Lbl As Label, Props As Map) As String
        Base type must be Object
      • getBackBtnText As String
      • getBackButton As B4XView
      • getBackgroundImage As B4XBitmap
      • getBaseView As B4XView
      • getFinishBtnText As String
      • getFinishButton As B4XView
      • getHeader_Size As Int
      • getNextBtnText As String
      • getNextButton As B4XView
      • getHeaderLabel As B4XView
      • getDescriptionLabel As B4XView
      • getShowFinishBtn As Boolean
      • getShowSkipBtn As Boolean
      • getSkipBtnText As String
      • getSkipButton As B4XView
      • getTagOfCurrentPage As Object
        Gets or Sets the Tag of the current Page
      • getTagOfPage (Index As Int) As Object
        Gets the Tag of a Page with the given Index
      • Initialize (Callback As Object, EventName As String) As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • setBackBtnText (Text As String) As String
      • setBackgroundImage (Image As B4XBitmap) As String
      • setFinishBtnText (Text As String) As String
      • setHeader_Size (Value As Int) As String
      • setNextBtnText (Text As String) As String
      • setShowFinishBtn (Visible As Boolean) As String
      • setShowSkipBtn (Visible As Boolean) As String
      • setSkipBtnText (Text As String) As String
      • setTagOfCurrentPage (Tag As Object) As String
        Gets or Sets the Tag of the current Page
      • TagOfPage (Index As Int, Tag As Object) As String
        Sets the Tag of a Page with the given Index
    • Properties:
      • BackBtnText As String
      • BackButton As B4XView [read only]
      • BackgroundImage As B4XBitmap
      • BaseView As B4XView [read only]
      • FinishBtnText As String
      • FinishButton As B4XView [read only]
      • Header_Size As Int
      • NextBtnText As String
      • NextButton As B4XView [read only]
      • ShowFinishBtn As Boolean
      • ShowSkipBtn As Boolean
      • SkipBtnText As String
      • SkipButton As B4XView [read only]
      • TagOfCurrentPage As Object
        Gets or Sets the Tag of the current Page
  • Pages
    • Fields:
      • BackgroundColor As Int
      • DescriptionText As String
      • HeaderLayout As B4XView
      • HeadingText As String
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Tag As Object
    • Functions:
      • Initialize
        Initializes the fields to their default value.
If you like my work, then spend me a coffe or two :)

Change log:
- V1

  • Release
-V1.1
  • Add getNextButton
  • Add getBackButton
  • Add getSkipButton
  • Add getFinishButton
  • Add SwipeGesture swipe right to left to get next, or swipe left to right to get back
  • Add SwipeGesture Enable Property
  • Add Fix DesignerPropertys Description Texts
-V1.2
  • Add AddView 'Add the view with code instead of the designer
  • Add B4J Click Events
  • Add Example Project for B4J
-V1.3
  • Add Tags for every Page
-V1.4
  • Add HeaderSize (25% - 75% of the View Height)
-V1.5
  • Indicator BugFix
-V1.6
  • AddView BugFix
-V1.7
  • Add BackgroundImage
  • Add TagOfPage Set or Get the Tag on a Index
-V1.8
  • Add Partingline + Visible + Color + BorderWidth Property
  • Add Indicator Active and Inactive Color Property
  • BugFixes
  • Add b4xlib
-V1.9
  • Fix Crash on Crashlytics "width and height must be > 0"
-V1.10
  • Add getHeaderLabel
  • Add getDescriptionLabel
V1.11
  • Removed a unusded Variable
  • Add AutomaticCalculateDescriptionTextHeight Property, set it to true and the description text height adapts automatically to the text
V1.12
  • B4I BugFixes
 

Attachments

  • AS Onboarding Example.zip
    93.7 KB · Views: 612
  • ASOnboarding.b4xlib
    5.5 KB · Views: 560
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
Thanks. It would be great if you add also a setting to keep the ratio of the add picture instead of stretch it to the size of the header. Sure that pic should be centred than.
The Header is not a image, you can put a image in the header, but the header is a B4xView it can also be a panel with parents. So you have the controll over the header, not the Class, the class is only resizing the Header if the width or height of the view is changed.
 

Gunther

Active Member
Licensed User
Longtime User
Please re-check V1.6: The B4J example is displaying only an empty small window

the DrawIndicators don't have the Height parameter in 2x calling lines.

As requested by the 'Private Sub DrawIndicators(Height As Float)'
 
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
Please re-check V1.6: The B4J example is displaying only an empty small window
I have upload the wrong example project, sorry :rolleyes:

the DrawIndicators don't have the Height parameter in 2x calling lines.
Fixed in 1.7

-V1.7
  • Add BackgroundImage
  • Add TagOfPage Set or Get the Tag on a Index
Background Image
Screenshot_20190317-134546__01.jpg
 

Gunther

Active Member
Licensed User
Longtime User
the class is only resizing the Header
Ok, with a few modifications like:

  • giving back the AS ViewSizes:
B4X:
Public Sub getWidth As Int
   
    Return mBase.Width
   
End Sub
Public Sub getHeight As Int
   
    Return mBase.Height
   
End Sub

  • and changing the two lines in the GenImageViews-Sub:
B4X:
Private Sub GenImageViews(ImageName As String) As ImageView
   
    Private ImageView1 As ImageView
    ImageView1.Initialize("")
    ImageView1.SetLayoutAnimated(0,0,0, Activity.Width, Activity.Height*ASOnboarding1.Header_Size/100)
    ImageView1.Bitmap = xui.LoadBitmapResize(File.DirAssets,ImageName, ASOnboarding1.Width, ImageView1.Height, True)
    Return ImageView1
   
End Sub

The result is like I would like to have it. Thanks again.
 

Alexander Stolte

Expert
Licensed User
Longtime User
Private Sub GenImageViews(ImageName As String) As ImageView

Private ImageView1 As ImageView
ImageView1.Initialize("")
ImageView1.SetLayoutAnimated(
0,0,0, Activity.Width, Activity.Height*ASOnboarding1.Header_Size/100)
ImageView1.Bitmap = xui.LoadBitmapResize(
File.DirAssets,ImageName, ASOnboarding1.Width, ImageView1.Height, True)
Return ImageView1

End Sub
Ahhhh i see ,this is the example Code not the code in the class
 

Alexander Stolte

Expert
Licensed User
Longtime User
Private Sub GenImageViews(ImageName As String) As ImageView

Private ImageView1 As ImageView
ImageView1.Initialize("")
ImageView1.SetLayoutAnimated(
0,0,0, Activity.Width, Activity.Height*ASOnboarding1.Header_Size/100)
ImageView1.Bitmap = xui.LoadBitmapResize(
File.DirAssets,ImageName, ASOnboarding1.Width, ImageView1.Height, True)
Return ImageView1

End Sub
B4X:
Private Sub GenImageViews(ImageName As String) As ImageView
  
    Private ImageView1 As ImageView
    ImageView1.Initialize("")
    ImageView1.SetLayoutAnimated(0,0,0, MainForm.RootPane.Width, MainForm.RootPane.Height*ASOnboarding1.Header_Size/100)
    #If B4J
    ImageView1.SetImage(xui.LoadBitmapResize(File.DirAssets,ImageName, ASOnboarding1.BaseView.Width, ImageView1.Height, True))
    #Else
    
     ImageView1.Bitmap = xui.LoadBitmapResize(File.DirAssets,ImageName, ASOnboarding1.BaseView.Width, ImageView1.Height, True)
    #End If
  
    Return ImageView1
  
End Sub
 

fredo

Well-Known Member
Licensed User
Longtime User
Nice solution!

Unfortunately I get this error message:

Fatal Exception: java.lang.IllegalArgumentException: width and height must be > 0

at android.graphics.Bitmap.createBitmap(Bitmap.java:829)
at android.graphics.Bitmap.createBitmap(Bitmap.java:808)
at android.graphics.Bitmap.createBitmap(Bitmap.java:775)
at anywheresoftware.b4a.objects.drawable.CanvasWrapper.Initialize(CanvasWrapper.java:81)
at anywheresoftware.b4a.objects.B4XCanvas.Initialize(B4XCanvas.java:37)

at myapp.asonboarding._ini_views(asonboarding.java:673)
at myapp.asonboarding._base_resize(asonboarding.java:273)
at myapp.asonboarding._designercreateview(asonboarding.java:395)

at java.lang.reflect.Method.invoke(Method.java)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:196)
at anywheresoftware.b4a.objects.CustomViewWrapper.AfterDesignerScript(CustomViewWrapper.java:67)
at anywheresoftware.b4a.keywords.LayoutBuilder.loadLayout(LayoutBuilder.java:162)
at anywheresoftware.b4a.objects.PanelWrapper.LoadLayout(PanelWrapper.java:134)
at anywheresoftware.b4a.objects.B4XViewWrapper.LoadLayout(B4XViewWrapper.java:292)

at myapp.main$ResumableSub_BuildLayout.resume(main.java:821)
at myapp.main._buildlayout(main.java:796)
at myapp.main$ResumableSub_Activity_Create.resume(main.java:500)
at myapp.main._activity_create(main.java:456)

at java.lang.reflect.Method.invoke(Method.java)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:196)
at myapp.main.afterFirstLayout(main.java:104)
at myapp.main.access$000(main.java:17)
at myapp.main$WaitForLayout.run(main.java:82)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:148)
at android.app.ActivityThread.main(ActivityThread.java:5421)
at java.lang.reflect.Method.invoke(Method.java)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

Which lead to:
2019-10-10_16-59-14.jpg

Any ideas what I can do?
 

Alexander Stolte

Expert
Licensed User
Longtime User
change text color
Example:
B4X:
Dim tmp_btn as B4xview = asonboarding.getBackButton
tmp_btn.TextColor = xui.Color_Black

smooth swipe
No, because this is not based on a listview or tabstrip, but maybe i have the motivation in the next days, to make a 2.0 Version based on the xCustomListview, now i have some experience with that, like in my AS ColorChooser, this is based on the xCustomListview.
 

ykucuk

Well-Known Member
Licensed User
Longtime User
Example:
B4X:
Dim tmp_btn as B4xview = asonboarding.getBackButton
tmp_btn.TextColor = xui.Color_Black


No, because this is not based on a listview or tabstrip, but maybe i have the motivation in the next days, to make a 2.0 Version based on the xCustomListview, now i have some experience with that, like in my AS ColorChooser, this is based on the xCustomListview.

Thank you for reply.

is it possible to change color of the heading text and description ?
 

ykucuk

Well-Known Member
Licensed User
Longtime User
  • V1.10
    • Add getHeaderLabel
    • Add getDescriptionLabel
Thank you for update.

-Could you calculate height of text because when i change font label can't show all text.
-is it possible change indicator active / passive color by code

thank you
 

Alexander Stolte

Expert
Licensed User
Longtime User
is it possible change indicator active / passive color by code
B4X:
IndicatorActiveColor
IndicatorInactiveColor

Could you calculate height of text because when i change font label can't show all text.
V1.11
  • Removed a unusded Variable
  • Add AutomaticCalculateDescriptionTextHeight Property, set it to true and the description text height adapts automatically to the text
But i dont have test it, i used the same code as in my B4X AutoTextSizeLabel
 
Top