B4A Library [B4X] [XUI] AS Draggable Bottom Card

This is my 2k'th post on this Forum and i want to share a nice library with you i made some months ago.
It was not easy to create this library, it took many hours of testing and programming to make the user experience as good as possible.

If you want to support me, then you can do this here or with a coffee. Thanks

This lib. is only for B4I and B4A.
B4J is not tested and i currently dont want to support it
B4J is now supported

Features

• cross-platform compatible
• easy to use
• use your own header and body layout
• 2 states - half expanded and full expanded
• Events
• and more...

Some design inspiration:

ASDraggableBottomCard
Author: Alexander Stolte
Version: 1.05

• ASDraggableBottomCard
  • Events:
    • Close
    • Closed
    • Open
    • Opened
    • VisibleBodyHeightChanged (height As Double)
  • Fields:
    • g_hide_duration As Int
    • g_show_duration As Int
  • Functions:
    • Base_Resize (Width As Double, Height As Double) As String
    • BodyPanel As B4XView
      gets the body panel - Load your body layout
    • Class_Globals As String
    • Create (Parent As B4XView, first_height As Float, second_height As Float, header_height As Float, width As Float, orientation As Int) As String
      Base type must be Object
    • ExpandFull As String
      expand the view full - second height + header height
    • ExpandHalf As String
      expand the view in half mode - first height + header height
    • getCardBase As B4XView
      gets the card base - the main panel that hold the body- and header-panel
    • getDarkPanelAlpha As Int
    • getFirstHeight As Float
    • getHeaderHeight As Float
      gets the header height
    • getIsDraggable As Boolean
    • getIsOpen As Boolean
      Returns True if the view is expanded/open
    • getIsOpenFull As Boolean
      Returns True if the view is full expanded
    • getIsOpenHalf As Boolean
      Returns True if the view is half expanded
    • getSecondHeight As Float
    • HeaderPanel As B4XView
      gets the header panel - Load your header layout
    • Hide (ignore_event As Boolean)
      hides/close the view
    • Initialize (Callback As Object, EventName As String) As String
    • IsInitialized As Boolean
      Tests whether the object has been initialized.
    • Orientation_LEFT As Int
    • Orientation_MIDDLE As Int
    • Orientation_RIGHT As Int
    • setCornerRadius_Header (radius As Float) As String
      sets the corner radius of the header
    • setDarkPanelAlpha (alpha As Int) As String
    • setFirstHeight (height As Float) As String
      sets or gets the first height - body height
      The Event VisibleBodyHeightChanged is triggered if the menu is currently open at the first height
    • setIsDraggable (draggable As Boolean) As String
      set it to false to disable touch gestures on header panel
    • setSecondHeight (height As Float) As String
      sets or gets the second height - body height
      The Event VisibleBodyHeightChanged is triggered if the menu is currently open at the second height
    • Show (ignore_event As Boolean) As String
  • Properties:
    • CardBase As B4XView [read only]
      gets the card base - the main panel that hold the body- and header-panel
    • CornerRadius_Header
      sets the corner radius of the header
    • DarkPanelAlpha As Int
    • FirstHeight As Float
      sets or gets the first height - body height
      The Event VisibleBodyHeightChanged is triggered if the menu is currently open at the first height
    • HeaderHeight As Float [read only]
      gets the header height
    • IsDraggable As Boolean
      set it to false to disable touch gestures on header panel
    • IsOpen As Boolean [read only]
      Returns True if the view is expanded/open
    • IsOpenFull As Boolean [read only]
      Returns True if the view is full expanded
    • IsOpenHalf As Boolean [read only]
      Returns True if the view is half expanded
    • SecondHeight As Float
      sets or gets the second height - body height
      The Event VisibleBodyHeightChanged is triggered if the menu is currently open at the second height

Changelog

• 1.00
  • Release
• 1.01
  • Various bug fixes and improvements
  • The menu no longer closes when the last swipe went up, so it is now possible for the user to cancel a full close
• 1.02
  • Add CornerRadius_Header - sets the CornerRadius of the header
    • dont use asdbc_main.HeaderPanel.Height if your set the corner radius, the returning height is not the display height
    • use HeaderHeight instead
  • Add HeaderHeight - gets the displayed header height
  • Supports now B4J
• 1.03
  • Add set FirstHeight - sets the FirstHeight - The Event VisibleBodyHeightChanged is triggered if the menu is currently open at the first height
  • Add set SecondHeight - sets the SecondHeight - The Event VisibleBodyHeightChanged is triggered if the menu is currently open at the second height
  • Important BugFixes!
• 1.04
  • BugFix on Drag with finger - much more better experience now!
• 1.05
  • Add get IsOpenHalf - Returns True if the view is half expanded
  • Add get IsOpenFull - Returns True if the view is full expanded
  • Add IsDraggable - set it to false to disable touch gestures on header
  • Add some property descriptions
• 1.06
  • B4I and B4J - Body can now be dragged too
• 1.07
  • BugFixes
  • Significant handling improvements when working with 2 heights
• 1.08
  • Add get DarkPanel
  • Add DarkPanelClickable - If false then does the menu not close when you click on the dark area
    • Default: True
• 1.09
  • Add UserCanClose - If False then the user can expand the menu, but not close
• 1.10
  • BugFixes
  • Add set and get BodyDrag - Call it before "Create"
    • If True then you can drag the body too
    • Not working if a list is in the body

Have Fun

 

[itgirl]

Amazing one , thanks

 

[Johan Hormaza]

Can you do something like this?

 

[Alexander Stolte]

Can you do something like this?

No, that is too specific and would make too much work...

 

[eelias]

Great Library!

Is is possible to have two panels, like some android tablet versions have, a tab on the right other on the left ?

This way I can have 2 context of stuff in each panel.

Thanks !

 

[Alexander Stolte]

Is is possible to have two panels, like some android tablet versions have, a tab on the right other on the left ?

This way I can have 2 context of stuff in each panel.

no idea what you mean. If you have further questions please create a new thread.

 

[sadeq.hitex]

Can you do something like this?

you can make that with transformation

 

[Alexander Stolte]

is B4X??

No!
Please only comment if it has something to do with my library! To keep this thread clean.

 

[b4x-de]

This class works great on Android. Thank you Alexander!

Currently I’m struggling with it B4i. I added a reference to GestureRecognizer found here. Now it compiles without any error. But the menu does not show up at all. Probably I’m doing some wrong when initializing the card like this:

Private Sub Application_Start (Nav As NavigationController)
    NavControl = Nav
    MainPage.Initialize("MainPage")
    MainPage.RootPanel.LoadLayout("frm_main")
    NavControl.ShowPage(MainPage)
    
    asdbc_main.Initialize(Me,"asdbc_main")
    asdbc_main.Create(MainPage.RootPanel,MainPage.RootPanel.Height/2,MainPage.RootPanel.Height - 60dip,50dip,MainPage.RootPanel.Width - 20dip,asdbc_main.Orientation_MIDDLE)
    asdbc_main.HeaderPanel.LoadLayout("frm_header")
    asdbc_main.BodyPanel.LoadLayout("frm_body")
    
End Sub

I provided a simple B4i Example that can be used to test this issue. Any help is appreciated!

Thanks, Thomas

 

[Alexander Stolte]

Private Sub Application_Start (Nav As NavigationController)

on this sub you need this:

#If B4I
Wait For B4XPage_Resize (Width As Int, Height As Int)
#End If

before you do something visual.

 

[Rubsanpe]

Hi. When i only include the class file and compile the app it say:

B4A Versión: 10.2
Java Versión: 8
Parseando código. (0.68s)
Building folders structure. (0.63s)
Compilando código. (1.20s)
Compilado códigos de diseños. (0.06s)
Organizando librerías. (0.04s)
(AndroidX SDK)
Generando el fichero R. (1.72s)
Compilando el código del motor de depuración. (5.71s)
Compilando el código Java generado. Error
El nombre del archivo o la extensión es demasiado largo

"The archive name or the extension is a lot of large"

However in your example it works ok.

If i remove the class file from the project and compile again then compilation is ok.

EDIT: I just passed from Java 8 to java 11 (as recommended in the B4A installation) and I no longer have that error when compiling the app.

EDIT2: Again, even with Java 11, the class name or its extension is too long. The issue is only when i compile it in Debug mode. It works in Release mode. If i compile it in Release mode and then i compile again in Debug mode then it doesn't give me the error...

Rubén

 

[Alexander Stolte]

Update
1.01

• Various bug fixes and improvements
• The menu no longer closes when the last swipe went up, so it is now possible for the user to cancel a full close

 

[Alexander Stolte]

Update
1.02

• Add CornerRadius_Header - sets the CornerRadius of the header
  • dont use asdbc_main.HeaderPanel.Height if your set the corner radius, the returning height is not the display height
  • use HeaderHeight instead
• Add HeaderHeight - gets the displayed header height
• Supports now B4J
• New B4XPages Example

You can now make the header corner rounded, without doing it with tricks in the designer

B4J is now supported

 

[Johan Hormaza]

I see that in iOS it does not work. Panel is not displayed

 

[Alexander Stolte]

yeah, i forgot that we need in B4I this before we add the menu: Wait For B4XPage_Resize (Width As Int, Height As Int)
I updated the example project.
And do not forget, to uncheck "HandleResizeEvent" and remove the AutoScale in the designer on B4I, B4J and B4A.

 

[Alexander Stolte]

Update
1.03

• Add set FirstHeight - sets the FirstHeight - The Event VisibleBodyHeightChanged is triggered if the menu is currently open at the first height
• Add set SecondHeight - sets the SecondHeight - The Event VisibleBodyHeightChanged is triggered if the menu is currently open at the second height
• Important BugFixes!

 

[Alexander Stolte]

Update
1.04

• BugFix on Drag with finger - much more better experience now!

 

[Daica]

Feature suggestion:

• A way to check if "IsOpen" is opened full or open half-way only. Yes, I can create global variable to manage and check this but it would be nice if the library offers it
• An option to disable the dragging ( ASDraggableBottomCard .Dragable = False) something like that?
• Maybe an event for ExpandHalf and ExpandFull? Might not be needed if there is a way to check if its current ExpandHalf or Exp[andFull

Works really nice right now

 

[Alexander Stolte]

Update
1.05

• Add get IsOpenHalf - Returns True if the view is half expanded
• Add get IsOpenFull - Returns True if the view is full expanded
• Add IsDraggable - set it to false to disable touch gestures on header
• Add some property descriptions

 

[Daica]

Love your work Alexander!
Going to send you some coffee money