Android Question How to create a dynamically adapting speech bubble?

[fredo]

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.

Spoiler: code

' -------------------------------------------
' 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?

​

 

[Erel]

You can put this ImageView in an elevated panel. However if you want to do the same thing for the arrow then it is probably better to draw everything yourself.

 

[Brandsum]

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.

 

[Brandsum]

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.

 

[fredo]

At first draw the shadow then draw the actual views.

Thanks for the helpful idea.
Continued here:
https://www.b4x.com/android/forum/t...ct-on-canvas-is-covered-by-label-view.111435/