B4A Library [B4X] AS FloatingPanel

This is a simple panel that can be attached anywhere and opens with an animation.
More usecases and updates to come ;)

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

ezgif.com-gif-maker (7).gif
ezgif.com-gif-maker (6).gif

Examples:
B4X:
Dim fp As AS_FloatingPanel
fp.Initialize(Me,"fp",Root)
fp.PreSize(200dip,200dip)
fp.Panel.LoadLayout("frm_Content")

'Open the panel
fp.Show(0,0,200dip,200dip)
'or attached on a view
Dim Top As Float = xlbl_ClickMe.Top + xlbl_ClickMe.Height + 10dip
fp.Show(xlbl_ClickMe.Left,Top,200dip,200dip)
ASFloatingPanel
Author: Alexander Stolte
Version: 1.01

  • ASFloatingPanel_ArrowProperties
    • Fields:
      • ArrowOrientation As String
      • Color As Int
      • Height As Float
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • Left As Float
      • Top As Float
      • Width As Float
    • Functions:
      • Initialize
        Initializes the fields to their default value.
  • AS_FloatingPanel
    • Events:
      • Close
    • Fields:
      • BackgroundColor As Int
    • Functions:
      • Class_Globals As String
      • Close
      • CreateASFloatingPanel_ArrowProperties (ArrowOrientation As String, Color As Int, Width As Float, Height As Float, Left As Float, Top As Float) As ASFloatingPanel_ArrowProperties
      • getArrowOrientation_Bottom As String
        The Arrow is on the bottom of the panel
      • getArrowOrientation_Left As String
        The Arrow is on the lft of the panel
      • getArrowOrientation_Right As String
        The Arrow is on the right of the panel
      • getArrowOrientation_Top As String
        The Arrow is on the top of the panel
      • getArrowProperties As ASFloatingPanel_ArrowProperties
      • getArrowVisible As Boolean
      • getOpenOrientation_BottomTop As String
        Opens the panel from bottom to top
      • getOpenOrientation_LeftBottom As String
        Opens the panel from left to bottom
      • getOpenOrientation_LeftRight As String
        Opens the panel from left to right
      • getOpenOrientation_LeftTop As String
        Opens the panel from left to top
      • getOpenOrientation_None As String
        Opens the panel without slide, but with fade
      • getOpenOrientation_RightBottom As String
        Opens the panel from right to bottom
      • getOpenOrientation_RightLeft As String
        Opens the panel from right to left
      • getOpenOrientation_RightTop As String
        Opens the panel from right to top
      • getOpenOrientation_TopBottom As String
        Opens the panel from top to bottom
      • getPanel As B4XView
      • Initialize (Callback As Object, EventName As String, Parent As B4XView) As String
        Initializes the object. You can add parameters to this method if needed.
      • IsInitialized As Boolean
        Tests whether the object has been initialized.
      • PreSize (Width As Float, Height As Float) As String
      • setArrowProperties (Properties As ASFloatingPanel_ArrowProperties) As String
      • setArrowVisible (Visible As Boolean) As String
      • setDuration (Duration As Long) As String
        Default: 150
      • setOpenOrientation (Orientation As String) As String
      • Show (Left As Float, Top As Float, Width As Float, Height As Float)
    • Properties:
      • ArrowOrientation_Bottom As String [read only]
        The Arrow is on the bottom of the panel
      • ArrowOrientation_Left As String [read only]
        The Arrow is on the lft of the panel
      • ArrowOrientation_Right As String [read only]
        The Arrow is on the right of the panel
      • ArrowOrientation_Top As String [read only]
        The Arrow is on the top of the panel
      • ArrowProperties As ASFloatingPanel_ArrowProperties
      • ArrowVisible As Boolean
      • Duration
        Default: 150
      • OpenOrientation
      • OpenOrientation_BottomTop As String [read only]
        Opens the panel from bottom to top
      • OpenOrientation_LeftBottom As String [read only]
        Opens the panel from left to bottom
      • OpenOrientation_LeftRight As String [read only]
        Opens the panel from left to right
      • OpenOrientation_LeftTop As String [read only]
        Opens the panel from left to top
      • OpenOrientation_None As String [read only]
        Opens the panel without slide, but with fade
      • OpenOrientation_RightBottom As String [read only]
        Opens the panel from right to bottom
      • OpenOrientation_RightLeft As String [read only]
        Opens the panel from right to left
      • OpenOrientation_RightTop As String [read only]
        Opens the panel from right to top
      • OpenOrientation_TopBottom As String [read only]
        Opens the panel from top to bottom
      • Panel As B4XView [read only]
Changelog
  • 1.00
    • Release
  • 1.01 (read more)
    • Add New OpenOrientations
      • OpenOrientation_None
        • Opens the panel without slide, but with fade
      • OpenOrientation_LeftTop
        • Opens the panel from left to top
      • OpenOrientation_RightTop
        • Opens the panel from right to top
      • OpenOrientation_LeftRight
        • Opens the panel from left to right
      • OpenOrientation_RightLeft
        • Opens the panel from right to left
      • OpenOrientation_TopBottom
        • Opens the panel from top to bottom
      • OpenOrientation_BottomTop
        • Opens the panel from bottom to top
    • Add Arrow
    • Add Type ASFloatingPanel_ArrowProperties
  • 1.02
    • BugFixes
  • 1.03
    • BugFixes
    • Add get and set CloseOnTap
      • Default: True
  • 1.04
    • BugFix
  • 1.05
    • Add get and set CornerRadius
      • Default: 10dip
  • 1.06
    • B4J BugFix
  • 1.07
    • BugFix - The function "Close" works now with CloseOnTap = False
  • 1.08
    • B4I Improvements - the entire screen is now used for the background shadow
      • When the navigation bar was hidden, there was an area at the top that did not go dark when the menu was opened
      • The height of the area is now determined and the gap closed
      • B4XPages is now required in B4I
Have Fun :)
 

Attachments

  • AS FloatingPanel Example.zip
    13.4 KB · Views: 94
  • AS_FloatingPanel.b4xlib
    3 KB · Views: 21
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
Let me be clear, mine is not a criticism, Alexander; I really would like to understand what the panel is, in the gifs!
Well the panel is the whole thing, in the 1st gif you first see a calendar that I loaded into the panel and then I loaded a wheel onto the panel. In the 2nd gif you see only the panel, without layout, only a label on it.

It is just a panel which opens animated and serves as a dialog.
 

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.01
    • Add New OpenOrientations
      • OpenOrientation_None
        • Opens the panel without slide, but with fade
      • OpenOrientation_LeftTop
        • Opens the panel from left to top
      • OpenOrientation_RightTop
        • Opens the panel from right to top
      • OpenOrientation_LeftRight
        • Opens the panel from left to right
      • OpenOrientation_RightLeft
        • Opens the panel from right to left
      • OpenOrientation_TopBottom
        • Opens the panel from top to bottom
      • OpenOrientation_BottomTop
        • Opens the panel from bottom to top
    • Add Arrow
    • Add Type ASFloatingPanel_ArrowProperties
Arrow
B4X:
fp.ArrowVisible = True
fp.ArrowProperties.Left = xlbl_ClickMe.Width/2
fp.ArrowProperties.ArrowOrientation = fp.ArrowOrientation_Top
 

Rubsanpe

Active Member
Licensed User
Hi, I was testing the example and if I click on the panel with the Text "Test" the error I show occurs.


B4X:
** Activity (main) Create, isFirst = true **
Call B4XPages.GetManager.LogEvents = True to enable logging B4XPages events.
** Activity (main) Resume **
Error occurred on line: 167 (AS_FloatingPanel)
java.lang.IllegalArgumentException: Cannot set 'scaleX' to Float.NaN
    at android.view.View.sanitizeFloatPropertyValue(View.java:17742)
    at android.view.View.sanitizeFloatPropertyValue(View.java:17716)
    at android.view.View.setScaleX(View.java:17081)
    at android.animation.PropertyValuesHolder.nCallFloatMethod(Native Method)
    at android.animation.PropertyValuesHolder.access$400(PropertyValuesHolder.java:38)
    at android.animation.PropertyValuesHolder$FloatPropertyValuesHolder.setAnimatedValue(PropertyValuesHolder.java:1387)
    at android.animation.ObjectAnimator.animateValue(ObjectAnimator.java:990)
    at android.animation.ValueAnimator.setCurrentFraction(ValueAnimator.java:692)
    at android.animation.ValueAnimator.setCurrentPlayTime(ValueAnimator.java:655)
    at android.animation.ValueAnimator.start(ValueAnimator.java:1087)
    at android.animation.ValueAnimator.start(ValueAnimator.java:1106)
    at android.animation.ObjectAnimator.start(ObjectAnimator.java:852)
    at android.animation.ValueAnimator.startWithoutPulsing(ValueAnimator.java:1099)
    at android.animation.AnimatorSet.handleAnimationEvents(AnimatorSet.java:1149)
    at android.animation.AnimatorSet.startAnimation(AnimatorSet.java:1234)
    at android.animation.AnimatorSet.start(AnimatorSet.java:729)
    at android.animation.AnimatorSet.start(AnimatorSet.java:684)
    at anywheresoftware.b4a.objects.B4XViewWrapper.SetLayoutAnimated(B4XViewWrapper.java:180)
    at b4a.example.as_floatingpanel$ResumableSub_Close.resume(as_floatingpanel.java:724)
    at b4a.example.as_floatingpanel._close(as_floatingpanel.java:635)
    at b4a.example.as_floatingpanel._xpnl_background_click(as_floatingpanel.java:1061)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:732)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:351)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:255)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:146)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:193)
    at anywheresoftware.b4a.objects.ViewWrapper$1.onClick(ViewWrapper.java:80)
    at android.view.View.performClick(View.java:7441)
    at android.view.View.performClickInternal(View.java:7418)
    at android.view.View.access$3700(View.java:835)
    at android.view.View$PerformClick.run(View.java:28676)
    at android.os.Handler.handleCallback(Handler.java:938)
    at android.os.Handler.dispatchMessage(Handler.java:99)

Rubén
 

Rubsanpe

Active Member
Licensed User
Hello I have tried to:
1) Reinstall the B4A SDK.
2) Use SDK 30 and 31 for testing.
3) Using JDK 11 and JDK 19

In all cases an error occurs when clicking on the "Test" panel and the application closes. Give some more clues:

B4X:
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
Call B4XPages.GetManager.LogEvents = True to enable logging B4XPages events.
** Activity (main) Resume **
as_floatingpanel$ResumableSub_Closeresume (java line: 155)
java.lang.IllegalArgumentException: Cannot set 'scaleX' to Float.NaN
    at android.view.View.sanitizeFloatPropertyValue(View.java:17742)
    at android.view.View.sanitizeFloatPropertyValue(View.java:17716)
    at android.view.View.setScaleX(View.java:17081)
    at android.animation.PropertyValuesHolder.nCallFloatMethod(Native Method)
    at android.animation.PropertyValuesHolder.access$400(PropertyValuesHolder.java:38)
    at android.animation.PropertyValuesHolder$FloatPropertyValuesHolder.setAnimatedValue(PropertyValuesHolder.java:1387)
    at android.animation.ObjectAnimator.animateValue(ObjectAnimator.java:990)
    at android.animation.ValueAnimator.setCurrentFraction(ValueAnimator.java:692)
    at android.animation.ValueAnimator.setCurrentPlayTime(ValueAnimator.java:655)
    at android.animation.ValueAnimator.start(ValueAnimator.java:1087)
    at android.animation.ValueAnimator.start(ValueAnimator.java:1106)
    at android.animation.ObjectAnimator.start(ObjectAnimator.java:852)
    at android.animation.ValueAnimator.startWithoutPulsing(ValueAnimator.java:1099)
    at android.animation.AnimatorSet.handleAnimationEvents(AnimatorSet.java:1149)
    at android.animation.AnimatorSet.startAnimation(AnimatorSet.java:1234)
    at android.animation.AnimatorSet.start(AnimatorSet.java:729)
    at android.animation.AnimatorSet.start(AnimatorSet.java:684)
    at anywheresoftware.b4a.objects.B4XViewWrapper.SetLayoutAnimated(B4XViewWrapper.java:180)
    at b4a.example.as_floatingpanel$ResumableSub_Close.resume(as_floatingpanel.java:155)
    at b4a.example.as_floatingpanel._close(as_floatingpanel.java:97)
    at b4a.example.as_floatingpanel._xpnl_background_click(as_floatingpanel.java:717)
    at java.lang.reflect.Method.invoke(Native Method)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:213)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:193)
    at anywheresoftware.b4a.objects.ViewWrapper$1.onClick(ViewWrapper.java:80)
    at android.view.View.performClick(View.java:7441)
    at android.view.View.performClickInternal(View.java:7418)
    at android.view.View.access$3700(View.java:835)
    at android.view.View$PerformClick.run(View.java:28676)
    at android.os.Handler.handleCallback(Handler.java:938)
    at android.os.Handler.dispatchMessage(Handler.java:99)
    at android.os.Looper.loopOnce(Looper.java:201)
    at android.os.Looper.loop(Looper.java:288)

Rubén
 

Daica

Active Member
Licensed User
Hi Alex,
Awesome library!

The panel closes when you tap on the content or outside of it. Is it possible to add a property/setting to make the panel stay open?
Maybe AS_FloatingPanel.CloseManually = True?

Also side request, would it be possible to add more effects to the animation?
Maybe like a bounce effect like SweetAlert 2? (https://sweetalert2.github.io/)

EDIT:
How do you calculate the center so that the floating panel is exactly centered on the screen?

BUG:
OpenOrientation Top_Bottom and Bottom_top crash when closing
 
Last edited:

Alexander Stolte

Expert
Licensed User
Longtime User
Update
  • 1.03
    • BugFixes
    • Add get and set CloseOnTap
      • Default: True
Also side request, would it be possible to add more effects to the animation?
Maybe like a bounce effect like SweetAlert 2? (https://sweetalert2.github.io/)
Unfortunately not. No more animations will be added from my side. All important and useful animations are in. Furthermore, I have never managed a good "bounce" effect.
 

Daica

Active Member
Licensed User
Update
  • 1.03
    • BugFixes
    • Add get and set CloseOnTap
      • Default: True

Unfortunately not. No more animations will be added from my side. All important and useful animations are in. Furthermore, I have never managed a good "bounce" effect.

Thank you for the update. Yeah I have never seen a nice "bounce" or "spring" effect in B4A yet
 

Daica

Active Member
Licensed User
Hello Alex,
Do you think it is possible to add an event for when the panel is closed?

Sometimes the user opens the panel but they do not make any changes. It would be nice to have a Panel_closed event so that we can check for any actions that was done.
 

Sandman

Expert
Licensed User
Longtime User
Hi Alexander, I think you have a small cosmetic bug in the show sub. The Sleep(m_Duration) should probably come after the drawing of the arrow, not before. (Increase the duration to a high value to see how strange it looks.)
 

Alexander Stolte

Expert
Licensed User
Longtime User
Hi Alexander, I think you have a small cosmetic bug in the show sub. The Sleep(m_Duration) should probably come after the drawing of the arrow, not before. (Increase the duration to a high value to see how strange it looks.)
But it also looks strange if you remove the sleep. Then the arrow is already at the position, although the panel is still positioning.
 
Top