Android Question B4X - Draggable Bottom Card

[Alberto Iglesias]

Anyone have done this view like facebook draggable bottom card?

if dont, whats the best way to do this for work with B4A and B4i?

thanks in advance

Alberto Iglesias

 

[Alexander Stolte]

It is easy to create it with xui. ?

 

[Erel]

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.

 

[Alberto Iglesias]

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.

Yes I know, but have a lot of apps using this even on iOS, not just for Control Center purposes.

 

[Alberto Iglesias]

i just asking if anyone already have this done.! THANKS!!

 

[Alexander Stolte]

i just asking if anyone already have this done

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

 

[Alberto Iglesias]

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

oh this is great! if you send to me I can create some b4x library for that. thanks

 

[Alexander Stolte]

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

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

Touch Event Code:

#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:

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:

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)

 

[Alberto Iglesias]

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

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

Touch Event Code:

#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:

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:

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)

will work fine for B4A, I will create something to B4i and put all in B4X library!

thanks for now!

 

[Alexander Stolte]

theoretically it will work on B4I too, because i develope in xui.
But I do not know how it behaves what erel addressed

 

[Alexander Stolte]

[B4X] [XUI] AS Draggable Bottom Card
Features

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