Android Question B4X - Draggable Bottom Card

Alberto Iglesias

Well-Known Member
Licensed User
Longtime User
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?

smallDemo.gif


thanks in advance

Alberto Iglesias
 

Erel

B4X founder
Staff member
Licensed User
Longtime User
Upvote 0

Alberto Iglesias

Well-Known Member
Licensed User
Longtime User
Upvote 0

Alexander Stolte

Expert
Licensed User
Longtime User
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
1581947889188.png
 
Upvote 0

Alberto Iglesias

Well-Known Member
Licensed User
Longtime User
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
 
Upvote 0

Alexander Stolte

Expert
Licensed User
Longtime User
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)
 
Upvote 0

Alberto Iglesias

Well-Known Member
Licensed User
Longtime User
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)

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

thanks for now!
 
Upvote 0
Top