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.

Examples:

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

 

[LucaMs]

I'm probably the only one who didn't understand what the floating panel(s) is (are?), in the posted gifs

Anyway, anything shared deserves at least a Like

 

[mcqueccu]

At first, i thought its just 1 gif with the small panel floating out of the screen . But looking at it, it's 2 different examples.

 

[LucaMs]

Let me be clear, mine is not a criticism, Alexander; I really would like to understand what the panel is, in the gifs!

 

[Alexander Stolte]

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]

The 1st gif should be used to show application areas where you can use it. In my case, to select a date and time

 

[PABLO2013]

tks

 

[Alexander Stolte]

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

fp.ArrowVisible = True
fp.ArrowProperties.Left = xlbl_ClickMe.Width/2
fp.ArrowProperties.ArrowOrientation = fp.ArrowOrientation_Top

 

[Rubsanpe]

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

** 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

 

[Alexander Stolte]

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

I can't reproduce it, no error comes for me, neither in debug mode, nor in release.

 

[Rubsanpe]

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:

** 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

 

[Alexander Stolte]

Update

• 1.02
  • BugFixes

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

No error came up in the emulator, but on a real device. Thank you.

 

[Rubsanpe]

Many thanks to you for your great work.

Rubén

 

[Daica]

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

 

[Alexander Stolte]

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]

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]

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.

 

[Alexander Stolte]

Events:

• Close

Do you think it is possible to add an event for when the panel is closed?

 

[Sandman]

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]

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.