B4A Library [Class] Baloon labels

Seeing the way SMS are displayed in my device, I thought we should have baloons also.
Here is my way of doing it.
There are two labels in the baloon, each can be styled like a label.
The height of the labels is automatically calculated per the text allocated to it.
The baloon can be rotated to have the tip in each of the four corners.
There are two types of baloons - "SAY" and "THINK" - see example and photo.
If the background is not black - there is a method to adapt the background to the required color.

 

[Smee]

Thanks for this. It looks great

 

[walterf25]

better looking baloon

Hello all, i used this class and i wanted to say thank you for it, i must say it is a very awesome class, i've designed two bubbles in photoshop which i've used instead of the ones the come with this class, feel free to use them, hope you guys like them.

View attachment bubble1.zip

and here is a screenshot of how they look in my app



Cheers,
Walter

 

[derez]

Thank you, beautiful baloons !

 

[melamoud]

background color

Great idea, I do have one question, not sure I understand the need to matchBackground sub ?

isnt it just better to pass Colors.Transparent as the parameter to the balloon background ?

or am I missing something ?

 

[derez]

The background color is the color of the base panel, while the MatchBackground colors the image of the IV. I tried your suggestion and it doesn't work.

 

[atulindore]

I am a beginner.. Currently I am using custom list view to display my Inbox SMS in my application .. How can I use this Baloon label for n number of records .. Can i create array of this baloon label .......Can some one help me with sample code ?

 

[derez]

Can i create array of this baloon label

Yes of course you can.
I suggest to have a list of the SMS (use ContactUtils class http://www.b4x.com/android/forum/th...ad-write-access-to-the-stored-contacts.30824/) and with a loop add baloons of two types - one for your SMS and another for others' SMS, all added to a scrollview using the index of the loop to increase the Y location.

Here is a code fragment from my application:

Sub commom_thread(slist As List)
    Dim q As Int = -4%y
    smssv.Panel.RemoveAllViews
    Dim balo(slist.Size) As Baloon
    For i = slist.Size -1 To 0 Step -1
        Dim sms1 As Sms
        sms1 = slist.get(i)
'        Log(sms1.ThreadId & "  " & sms1.PersonId & " " &  DateTime.time(sms1.Date) & "  " & sms1.Body)
        balo(i).Initialize(Me,Activity)
        Dim H As Int
        If sms1.PersonId = -1 Then
            H = balo(i).appearance(balo(i).THINK, 24,24,Colors.Blue,Colors.Black,"אני" & " " & DateTime.Date(sms1.Date) & "  " & DateTime.time(sms1.Date),sms1.Body,Colors.black, Gravity.left ,80%x)
            smssv.Panel.AddView(balo(i).AsView,5%x,q+2%y,80%x,H)
        Else
            H = balo(i).appearance(balo(i).SAY, 24,24,Colors.Blue,Colors.Black,namelbl.Text & " " & DateTime.Date(sms1.Date) & "  " & DateTime.time(sms1.Date),sms1.Body,Colors.black, Gravity.RIGHT ,80%x)
            smssv.Panel.AddView(balo(i).AsView,15%x,q+2%y,80%x,H)
        End If
        balo(i).Flip(True,False)
        q = q + H
    Next
    tsmspnl.Visible = True
    tsmspnl.BringToFront
    smssv.Panel.Height = q+ 5%y
    smssv.FullScroll(True)
    DoEvents
    smssv.FullScroll(True)
    DoEvents
End Sub

 

[atulindore]

Thanks David for quick help ...

 

[ykucuk]

Hello, how can get balloon_click event ?

 

[derez]

Yes it is possible, since the baloon has labels and you can use their events, however I'm abroad and will not be able to give you details until mid june.

 

[Declan]

I am using this class by derez and have changed the .png files to those of walterf25
However, when run on my device, I get the following:

 

[derez]

Playing with textsizes in the baloon initializing shall probably solve it.

 

[Declan]

Playing with textsizes in the baloon initializing shall probably solve it.

It is not the positioning of the text that is the problem.
It is the displaying of the bottom balloon.

 

[derez]

It is the displaying of the bottom balloon.

please state your exact problem and attach the relevant code.

 

[Declan]

please state your exact problem and attach the relevant code.

It is the appearance of the balloon at the bottom - it is not as per the image ( I am using the balloon images as per walterf25 - Post #3)
Please see my above post.
I have attached my app code

 

[derez]

comment the line

baloon2.MatchBackground(Colors.RGB(160,160,160))

the method which matches the color of the frame to the color of the background does not work well with walterf25's images.

 

[Declan]

Thanks, that worked

 

[kostefar]

Awesome, these balloons!

1. Is there a way to get the size of the balloons adjusted in the width automatically, so that they won´t be larger than the text? If you see the example image, the "test 1" balloon could´ve been much smaller in the width.
2. Also, I´m wondering if there´s a way to not show the balloons till they´re done loading. If you´ve got a couple of screenfulls, you´ll see them scrolling and scrolling till the last message has been reached, and it´d be nice if people don´t have to sit and watch that scrolling show. I´ve tried with activity.visble = false, but that just gives me an error.
3. Lastly, is there a way to get the scrolling more smooth, so that instead of adding a balloon makes everything scroll up for instance 40 pixels at once, things scroll smoothly the way it does when you´re using the finger for scrolling.

 

[derez]

Awesome, these balloons!

1. Is there a way to get the size of the balloons adjusted in the width automatically, so that they won´t be larger than the text? If you see the example image, the "test 1" balloon could´ve been much smaller in the width.
2. Also, I´m wondering if there´s a way to not show the balloons till they´re done loading. If you´ve got a couple of screenfulls, you´ll see them scrolling and scrolling till the last message has been reached, and it´d be nice if people don´t have to sit and watch that scrolling show. I´ve tried with activity.visble = false, but that just gives me an error.
3. Lastly, is there a way to get the scrolling more smooth, so that instead of adding a balloon makes everything scroll up for instance 40 pixels at once, things scroll smoothly the way it does when you´re using the finger for scrolling.

1. The class adjusts the baloon's height to the text height, the width is not adjusted, you can play with the width definition in the class or add adjustment to width measurements,using
Canvas. MeasureStringWidth (Text As String, Typeface As android.graphics.Typeface, TextSize As Float) As Float or other methods which give it.
2. My example does not have a scroll view so I don't know your reference. With a scrollview you can set it to scroll to the bottom in one command.

Edit: I have tried it myself but failed...