B4A Class [B4X] [XUI] AS Onboarding

Alexander Stolte · Mar 3, 2019

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.

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

www.b4x.com

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.

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

Alexander Stolte · Mar 17, 2019

Gunther said:
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 · Mar 17, 2019

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

Alexander Stolte · Mar 17, 2019

Gunther said:
Please re-check V1.6: The B4J example is displaying only an empty small window

I have upload the wrong example project, sorry

Gunther said:
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

Gunther · Mar 17, 2019

Alexander Stolte said:
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 · Mar 17, 2019

Gunther said:
giving back the AS ViewSizes:

You dont need this, Because i have. .BaseView as a property.

Gunther said:
and changing the two lines in the GenImageViews-Sub:

But the same result you have with .BackgroundImage = Loadbitmapresize...

Or not?

Alexander Stolte · Mar 17, 2019

Gunther said:
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 · Mar 17, 2019

Gunther said:
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

Alexander Stolte · Mar 18, 2019

-V1.8

Add Partingline + Visible + Color + BorderWidth Property
Add Indicator Active and Inactive Color Property
BugFixes
Add b4xlib

Johan Hormaza · May 1, 2019

Good Job!

fredo · Oct 10, 2019

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:

Any ideas what I can do?

Alexander Stolte · Oct 10, 2019

Without code, idk.

fredo · Oct 10, 2019

Alexander Stolte said:
Without code, idk.

Oops, sorry. I thought it was in your lib:

Alexander Stolte · Oct 13, 2019

-V1.9

Fix Crash on Crashlytics "width and height must be > 0"

ykucuk · Nov 5, 2019

is it possible change text color and smooth swipe ?

Alexander Stolte · Nov 5, 2019

ykucuk said:
change text color

Example:

B4X:

Dim tmp_btn as B4xview = asonboarding.getBackButton
tmp_btn.TextColor = xui.Color_Black

ykucuk said:
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 · Nov 5, 2019

Alexander Stolte said:
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 ?

Alexander Stolte · Nov 5, 2019

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

V1.10
- Add getHeaderLabel
- Add getDescriptionLabel

ykucuk · Nov 5, 2019

Alexander Stolte said:
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 · Nov 6, 2019

ykucuk said:
is it possible change indicator active / passive color by code

B4X:

IndicatorActiveColor
IndicatorInactiveColor

ykucuk said:
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

Alexander Stolte · Apr 26, 2020

GMan said:
is swiping possible, too ?

It's now possible on the AS Sliding Onboarding

It's a complete reworked view based on the ASViewPager

B4A Class [B4X] [XUI] AS Onboarding

Attachments

Expert

Active Member

Expert

Active Member

Expert

Expert

Expert

Expert

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency