Android Question B4X - Draggable Bottom Card

Erel said:

It is very similar to B4XDrawer: https://www.b4x.com/android/forum/threads/b4x-b4xdrawer-sliding-drawer.97828/#content
You just need to modify the logic a bit to make it scroll from the bottom instead of the side.

Note that in iOS this gesture is already used by the OS.

Click to expand...

Alberto Iglesias said:

i just asking if anyone already have this done

Click to expand...

Alexander Stolte said:

I have it done on a app, but I have not yet created a view for it, I can catch up tonight, shouldn't take up so much time.
On the image above the view open if i click on a marker on the map with a animation.
You can slide the header up and down and it close or slide up automatically if you hold up the finger on a special position
View attachment 88784

Click to expand...

Alexander Stolte said:

On B4A the Touch Listener is the Reflector lib.
ini. it so:

Reflector ini.:

    Private r As Reflector
        r.Target = xpnl_worldmap_content
        r.SetOnTouchListener("xpnl_worldmap_content_Touch2")

Touch Event Code:

Touch Event B4X:

#IF B4A
Private Sub xpnl_worldmap_content_Touch2 (o As Object, ACTION As Int, x As Float, y As Float, motion As Object) As Boolean
#ELSE
Private Sub xpnl_worldmap_content_Touch(Action As Int, X As Float, Y As Float) As Boolean
#END IF
   
    If ACTION = xpnl_worldmap_content.TOUCH_ACTION_DOWN Then

        downy  = y
   
    Else if ACTION = xpnl_worldmap_content.TOUCH_ACTION_MOVE Then
   
        If (xpnl_worldmap_content.Top + y - downy) > (Activity.Height - xpnl_worldmap_content.Height) Then
   
        xpnl_worldmap_content.Top = xpnl_worldmap_content.Top + y - downy
   
    End If

    Else if ACTION = xpnl_worldmap_content.TOUCH_ACTION_UP Then
   
   
        If xpnl_worldmap_content.Top < (Activity.Height - xpnl_worldmap_content.Height/2) Then'unter der oberen Hälfte
           
            xpnl_worldmap_content.SetLayoutAnimated(250,0,Activity.Height - xpnl_worldmap_content.Height,xpnl_worldmap_content.Width,xpnl_worldmap_content.Height)
           
            Else'einrollen
            xpnl_worldmap_content.SetLayoutAnimated(700,0,Activity.Height + xpnl_worldmap_content.Height,xpnl_worldmap_content.Width,xpnl_worldmap_content.Height)
       
            xpnl_worldmap_content.SetVisibleAnimated(500,False)
            End If
   
    End If
   
    Return True
   
End Sub

This is the code i use if the user click on the map this close the menu:

Close Bottom Menu:

xpnl_worldmap_content.SetLayoutAnimated(700,0,Activity.Height + xpnl_worldmap_content.Height,xpnl_worldmap_content.Width,xpnl_worldmap_content.Height)
       
        xpnl_worldmap_content.SetVisibleAnimated(500,False)

And with this code i open the menu, the menu is under the activity in my app:

Open bottom menu:

xpnl_worldmap_content.Visible = True
        xpnl_worldmap_content.SetLayoutAnimated(250,0,Activity.Height - xpnl_worldmap_content.Height,xpnl_worldmap_content.Width,xpnl_worldmap_content.Height)

Click to expand...

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