Android Question Chat Example - BCTextEngine

[Lucas Eduardo]

Hello,
I'm using this example to do my chat: https://www.b4x.com/android/forum/threads/b4x-cross-platform-chat-layout-example.112649/#content

But i did not get how to put an image in the bubble. Is there a way to do this with this example?

Thank you.

 

[Erel]

The images that you see in the video are emojis. You don't need to do anything special to use them.

It is also possible to add other images by modifying the list of "Runs".

 

[Lucas Eduardo]

I did not understude how to put the image in the list of "Runs"

I tryed the code below, but with not success. What type should the image have?

Dim imgRun As B4XBitmap = LoadBitmapResize(File.DirAssets, "imagemArquivo.png", 15dip, 15dip, True)
Dim TextRun As BCTextRun = Engine.CreateRun(Text & CRLF)
TextRun.TextFont = xui.CreateFont(fontRegular,14)
Dim time As BCTextRun = Engine.CreateRun(hora)
time.TextFont = xui.CreateFont(fontRegular,10)
If Right Then time.TextColor = 0xFFF1F1F1 Else time.TextColor = xui.Color_Gray

Return Array(imgRun, TextRun, time)

 

[Erel]

Start with the main example: B4X] BCTextEngine / BBCodeView - Text engine + BBCode parser + Rich Text View

It will probably be easier for you to create a BBCode string and set it with:

'BBCodeView1.ExternalRuns = BuildMessage(Text, User)
'BBCodeView1.ParseAndDraw
BBCodeView1.Text = BuildMessage(Text, User) 'BuildMessage returns String

 

[Lucas Eduardo]

I'm forgetting something, all other tags works, but tag "[img" does not work. Maybe something after i call

BBCodeView1.Text = BuildMessage(Text, Right, timeParsed)

That's my BuildMessage:

Dim msg As String
msg = $"[img FileName="imagemArquivo.png" width=15/] [font=fontRegular size=14]${Text}[/font] [font=fontRegular size=10]${CRLF & hora}[/font]"$
Return msg

The code after i call "BuildMessage" it's equals from original example

Dim ivText As B4XView = CreateImageView
'get the bitmap from BBCodeView1 foreground layer.
Dim bmpText As B4XBitmap = GetBitmap(BBCodeView1.ForegroundImageView)
'the image might be scaled by Engine.mScale. The "correct" dimensions are:
Dim TextWidth As Int = bmpText.Width / Engine.mScale
Dim TextHeight As Int = bmpText.Height / Engine.mScale
'bc is not really used here. Only the utility method.
bc.SetBitmapToImageView(bmpText, ivText)
Dim ivBG As B4XView = CreateImageView
'Draw the bubble.
Dim bmpBG As B4XBitmap = DrawBubble(TextWidth, TextHeight, Right)
bc.SetBitmapToImageView(bmpBG, ivBG)
p.SetLayoutAnimated(0, 0, 0, CLV.sv.ScrollViewContentWidth - 2dip, TextHeight + 3 * Gap)
'2020-01-16 16:54:29
DateTime.DateFormat = "yyyy-MM-dd HH:mm:ss"
If Right Then
        p.AddView(ivBG, p.Width - bmpBG.Width * xui.Scale, Gap, bmpBG.Width * xui.Scale, bmpBG.Height * xui.Scale) 'BALÃO
        p.AddView(ivText, p.Width - Gap - ArrowWidth - TextWidth, 2 * Gap, TextWidth, TextHeight) 'TEXTO
...

 

[William Lancee]

I played around with this and came up with

    'BBCodeView1.ExternalRuns = BuildMessage(Text, User)
    'BBCodeView1.ParseAndDraw

    BBCodeView1.Text = $"[img FileName="myimg.png" width=50/][b]${User}[/b]
    [Alignment=Left]${Text}[/Alignment]
    [TextSize=10][Color=#999999]${DateTime.Time(DateTime.Now)}[/Color][/TextSize]
    "$
   
    Dim bmpText As B4XBitmap = GetBitmap(BBCodeView1.ForegroundImageView)
    'get the bitmap from BBCodeView1 foreground layer for dimensions.
    'the image might be scaled by Engine.mScale. The "correct" dimensions are:
    Dim TextWidth As Int = 50 + bmpText.Width / Engine.mScale
    Dim TextHeight As Int = - 10 + bmpText.Height / Engine.mScale

    'Now get the whole image
    Dim bmpAll As B4XBitmap = BBCodeView1.mBase.Snapshot
    bmpText = bmpAll.Crop(0, 0, TextWidth, TextHeight)

The reason I had to take a snapshot was that the ForegroundImageView did not show the image.
Also I had to remove the border from the BBCodeView1 in designer.

 

[Lucas Eduardo]

Thank you. Working to get the correct dimensions, here it's cropping the time.

 

[William Lancee]

Right, I had to tweek the horizontal and vertical size (I don't know why). You can change the numbers (50 and -10) to dip values or whatever you need.

    Dim TextWidth As Int = 50 + bmpText.Width / Engine.mScale
    Dim TextHeight As Int = - 10 + bmpText.Height / Engine.mScale

 

[Erel]

The reason I had to take a snapshot was that the ForegroundImageView did not show the image.

That's correct. BBCodeView creates an ImageView for the image. You can probably get the ImageView and move it though taking a snapshot will be simpler.