Chat app style - Extension

Questions about Thunkable
1

SEARCH
How do i add chat bubble style in a list view like whatsapp , I created a chat app please help

2

There are no extensions in Thunkable but you can design a custom data viewer layout for this. Google custom data viewer layout Thunkable.

1 Like
3

Hi, I am guessing you are looking to make a design like this? -

image
image330×612 31.1 KB

I’ve done this similar thing for a recent app of mine, let me show you a rough idea of how I did it -

  • This can be done by designing a custom column layout for DVL. your column would contain two columns inside it, one designed as right-side (sender side) bubble, and other designed as left-side (receiving msg) bubble.
  • when creating the layout, make sure to advance-bind the visibility of both of these bubbles/columns to the layout, as that’s how we’ll be showing the bubble for the sender/receiver dynamically.
  • assuming you have a messages list, from which you know which message in the list was sent by whom, you can create a row in the table linked to the DVL, and set the column assigned to right-bubble & left-bubble to true and false to show & hide the bubbles.

Now for example, if you have 5 messages between person A & B (we’re in POV of person B), where 3 messages are sent by A to B & 2 from B to A, while going through the messages list, the code would create a row in the table, and for the A to B messages, right-side (sender) bubble column’s visibility would be false and left-side bubbles would be visible (as we’re in B’s POV, B has received these 3 messages from A, therefore left-bubble). Similarly for the B-A messages, for the message row right bubble’s vis. = true & left bubble’s vis. = false.

This is how you can dynamically show/hide left/right bubbles as per your list. Apologies for the long post, but I hope this helps… Cheers!

4

Hi @kartik14 ! I am trying to make a messaging app like the one you have described. I am a little confused. May I clarify:

  1. Do you know how to do this with DnD version? There is no DVL button
  2. How can we include the chat bubbles (green and white)? do we insert an image?
  3. Will the size of the bubble dynamically changes if a message is very lengthy vs very short?

I would be very grateful to receive a reply from you!
Thank you!

5

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.