Change shape of Label

Hello,
My project is the following : the app gives the user some informations ; infos are given piece by piece, as if user was chatting with someone (visually it looks like a whatsapp conversation) ... but I don't know how to change the shape of the labels I'll write my texts in (so that it looks rounded, or even kind of bubble).
And of course, as the "conversation" will progress, labels will go up and disappear, but can be seen again by scrolling (as we do in real-chat-applications).

Who's got an idea for me ?
thx :wave:

This sample might help ...
https://groups.google.com/g/mitappinventortest/c/WEat3QJXUX4/m/-r3mNVSIAwAJ

Hi
You can do this (very crude example)

SpeechBubble.aia (9.9 KB)

1 Like

Here with the extension:

Hello everyone, thank you for your answers !

it seems that most examples rely on dynamic components ; my question of the day is : how do I import them in my project ?
I'll surely have to come back for help using it :sob:

Unfortunately it doesn't work on my companion when I simply load it (without having done any modifications), but thanks :slight_smile:

@ChrisWard in french we have an expression saying more or less "I wonder if it's bacon or pork " (je me demande si c'est du lard ou du cochon) ... thanks for having let me puzzled :joy:

I did it like this:

@TIMAI2
it is visually really nice, and I would enjoy making an app looking so good :wink:

I understand that the "specialty" of this demo is the dynamic component ... but ... how do I use the dynamic component in my own project ?? (sorry to be a bit slow :upside_down_face:)

See these examples by @themaayur over on Kodular

1 Like

You don't actually have to use dynamic components, just have an array of components and a Procedure that temporarily stores all the text in a Blocks List. The content of speech bubbles can be swapped-out according to where the Vertical Scroll is in relation to the Screen (Screen full of Speech Bubbles). This is how it is done in the real world.

Hi again ...
I am sorry, I don't make it :sob: I am obviously missing something (either that thing is so obvious for you that you don't tell me to do it / either I still have much to learn) :beginner:

I thought to another option, less elegant, but more understandable for me ... maybe it's partially what's @ChrisWard is telling me (???)

Design :


Blocks :

How it should look like (made artificially) :

It works almost perfectly :innocent: but at the moment, it looks like this :


which is logical, but I don't know how to change the targetted label each time (without doing it manually ... I am a bit lazy)

I am not sure if this apparently simple solution might be viable for giving the look of a chat.

thanks for your help !

AI2's generic Label blocks don't cover text alignment.

However, you can cheat by doubling up pairs of left and right aligned Labels, with a Canvas scroll bar.

Capture chat_labels.aia (13.5 KB) Designer

We can also place each label in a horizontal arrangement. Arrangements are aligned in blocks.

Hi, I am coming back to you after having changed my ideas with other issues in AI2 :wink:
What do you mean with ...

Where & How can I know & use the position of the scrollable layout ? I didn't find the component allowing it :sob:
I understand the concept, but I can't make it become true ...

EDIT : do I always need to make a "false scrolling" using a ball ? can't I know this value with the scroll option of the vertical scroll component ?

Thanks @ChrisWards if you don't mind taking a little time to explain it to me :slight_smile:

Hi He_Lene

The principle is to have the Screen scrolling (rather than a Vertical Scroll Arrangement).

A fixed number of TextBoxes, say 50. Box height is automatic, dependent on the text it contains. Each Text is saved in TinyDb, along with the TextBox Height required to contain it.

When a TextBox has Focus, we can calculate where it is in relation to the Screen
By adding the Heights of the Boxes above it. We then know if one or more of the top Boxes is off-screen. The off-screen Boxes content can be overwritten by the content of boxes below. For example, if 3 Boxes are off screen, the content of Box 4 can overwrite Box 1, content of Box 5 overwrite Box 2 and so on.

The heights of the Boxes below the Box with focus can also be added for similar attrition.

The text 'shifting' only becomes necessary when Box 49 out of the 50 is filled with Text.

...so that's the idea :thinking: