Android Question How to create a dynamically adapting speech bubble?

fredo

Well-Known Member
Licensed User
Longtime User
A speech bubble appearing on the screen should be draggable by the user, with the pointer always remaining at the anchor point.

Inspired by Erel's example, the attached testproject was created.
B4X:
' -------------------------------------------
' Main
' -------------------------------------------
#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    Private su As StringUtils
    Private xui As XUI
End Sub

Sub Globals
    Private Label1 As B4XView
    Private Label0 As B4XView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    
    Activity.LoadLayout("Layout1")
    Activity.Color = xui.Color_White
    Label0.SetColorAndBorder(0xff425CFB, 0, 0, Label0.Width / 2)
    
    Label1.Text = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."
    Label1.Width = 200dip
    Label1.Height = su.MeasureMultilineTextHeight(Label1, Label1.Text)
    Label1.SetColorAndBorder(0xff06AF8F, 0, 0, 5dip)
    
    Dim dv1 As draggableview
    dv1.Initialize(Activity, Label1)
    
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub




' -------------------------------------------
' DraggableView class module
' -------------------------------------------
'
' Erel --> https://www.b4x.com/android/forum/threads/classes-are-soon-coming.18395/
'
'***************************
' Usage example
'***************************
'Sub Activity_Create(FirstTime As Boolean)
'   Activity.LoadLayout("1")
'   Dim dv1 As draggableview
'   dv1.Initialize(Activity, Label1)
'End Sub
'***************************


Sub Class_Globals
    Private innerView As B4XView
    Private panel1 As Panel
    Private downx, downy As Int
    Private ACTION_DOWN, ACTION_MOVE, ACTION_UP As Int
End Sub

Sub Initialize(Activity As Activity, v As B4XView)
    innerView = v
    panel1.Initialize("")
    panel1.Color = Colors.Transparent
    Activity.AddView(panel1, v.Left, v.Top, v.Width, v.Height)
    ACTION_DOWN = Activity.ACTION_DOWN
    ACTION_MOVE = Activity.ACTION_MOVE
    ACTION_UP = Activity.ACTION_UP
  
    Dim r As Reflector
    r.Target = panel1
    r.SetOnTouchListener("Panel1_Touch") 'why reflection instead of the regular Panel_Touch event? Good question which deserves a forum thread of its own (not related to classes)...
End Sub

Private Sub Panel1_Touch (o As Object, ACTION As Int, x As Float, y As Float, motion As Object) As Boolean
    If ACTION = ACTION_DOWN Then
        downx = x
        downy = y
    Else
        innerView.Left = innerView.Left + x - downx
        innerView.Top = innerView.Top + y - downy
        panel1.Left = innerView.Left
        panel1.Top = innerView.Top
    End If
    Return True
End Sub


1.) What is the best way to dynamically adjust the triangle between bubble and anchor point for each movement?

2.) What is the best way to create an elevation for the combined view?




 

Attachments

  • DraggableBubble.zip
    10.2 KB · Views: 317

Brandsum

Well-Known Member
Licensed User
Add a full screen transparent panel. Initialize a canvas. On touch up event draw a path starting from top-center of the view to the anchor point and then to the bottom-center of the view and fill it with color.
 
Upvote 0

Brandsum

Well-Known Member
Licensed User
Also draw a rounded rectangle with the dimensions of the dragable label. And for the shadow you can run a loop which will draw previous views again with semi transparent black color which will fade to transparent at the end of the loop.

At first draw the shadow then draw the actual views.
 
Upvote 0
Cookies are required to use this site. You must accept them to continue using the site. Learn more…