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.
 

Attachments

  • baloons.png
    baloons.png
    27.1 KB · Views: 1,828
  • baloons.zip
    10.8 KB · Views: 901
Last edited:

walterf25

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

SMS Baloons.png

Cheers,
Walter
 

melamoud

Active Member
Licensed User
Longtime User
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

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

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

Expert
Licensed User
Longtime User
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:
B4X:
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

140915094326.png
 
Last edited:

derez

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

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

Baloons.png
 

derez

Expert
Licensed User
Longtime User
Playing with textsizes in the baloon initializing shall probably solve it.
 

Declan

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

Attachments

  • Balloons.zip
    32.1 KB · Views: 210

derez

Expert
Licensed User
Longtime User
comment the line
B4X:
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.
 

kostefar

Active Member
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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...:(
 
Last edited:
Top