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
B4J is now supported
Features
ASDraggableBottomCard
Author: Alexander Stolte
Version: 1.05
Changelog
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
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...
![](data:image/svg+xml;charset=utf-8,<svg height="542px" width="1080px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="2058px" width="1080px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="497px" width="256px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="2280px" width="1080px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="1661px" width="1080px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="414px" width="307px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="642px" width="320px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="1280px" width="720px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="632px" width="602px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
![](data:image/svg+xml;charset=utf-8,<svg height="1324px" width="1284px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
[B4X] AS DraggableBottomCard - Drag Indicator - Confirm Button
https://www.b4x.com/android/forum/threads/b4x-xui-as-draggable-bottom-card.121219/ 'DragIndicator Dim xpnl_DragIndicator As B4XView = xui.CreatePanel("") BottomCard.HeaderPanel.AddView(xpnl_DragIndicator,Root.Width/2 - 70dip/2,HeaderHeight/2 - 6dip/2,70dip,6dip)...
[B4X] [XUI] AS BottomPhoneNumberFlagPicker
A bottom phone number prefix, flag emoji, country code picker. You need: AS_DraggableBottomCard AS_WheelPicker V3.21+ 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...
[B4X] [XUI] AS BottomEmojiPicker
A bottom emoji picker. You need: AS_DraggableBottomCard 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. :) Emoji Datasource from...
[B4X] [XUI] AS BottomActionMenu
This view combines 2 views and makes it quick and easy to let the user make an action. You need: AS_DraggableBottomCard 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...
[B4X] [XUI] AS BottomDatePicker
This view combines 2 views and makes it quick and easy to let the user select a date. You need: AS_DatePicker AS_DraggableBottomCard 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...
[B4X] [XUI] AS BottomActionSheet
This view makes it quick and easy to let the user make an action. You need: AS_DraggableBottomCard 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...
[B4X] [XUI] AS BottomColorChooser
This view makes it quick and easy to let the user choose a color. Inspired by the colorchooser from the AS_Settings. You need: AS_DraggableBottomCard 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...
[B4X] [XUI] AS BottomSelectionList
This view makes it easy to quickly provide a good looking single or multiple selection list, based on the AS_SelectionList, built into a ready to use bottom menu. You need: AS_DraggableBottomCard V1.14+ AS_SelectionList V1.05+ I spend a lot of time in creating views, like this and to create a...
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
- CardBase As B4XView [read only]
- Events:
- 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
- Add CornerRadius_Header - sets the CornerRadius of the header
- 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
- 1.11
- Add BodyDragPanel
- 1.12
- B4I only remove GestureRecognizer
- 1.13
- BugFix
- 1.14
- B4J BugFix
- 1.15
- 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
- B4I Improvements - the entire screen is now used for the background shadow
- 1.16
- BugFix
- 1.17
- BugFixes and Improvements
ChangeThe menu now has the DarkPanel as parent and no longer the root page- You don't notice it in use
- This allows you to add custom views to the DarkPanel and these are then above the BodyPanel and do not have to work on the root form
Newget and set BottomOffset - A value to display the menu above the keyboard, for example, if you set the value to the keyboard height- Default: 0
ChangeThe corner radius is now only applied to the top corners
Last edited:
![](data:image/svg+xml;charset=utf-8,<svg height="1585px" width="1320px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)