Change shape of Label

[He_Lene]

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

[ABG]

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

[SteveJG]

Chat app message style

Should we need listview for using chatview?How to use this Chatview

[ChrisWard]

Hi
You can do this (very crude example)

SpeechBubble.aia (9.9 KB)

[Patryk_F]

Here with the extension:

Card View for Cloud Chat App

An example of a simple chat. [blocks - 2021-02-22T225831.166] chat.aia (45.3 KB) [Screenshot_20210222-231140]

[He_Lene]

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

@Card View for Cloud Chat App MIT App Inventor Help

An example of a simple chat. [blocks - 2021-02-22T225831.166] chat.aia

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

@ChrisWard

You can do this (very crude example)
SpeechBubble.aia (9.9 KB)

@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

[TIMAI2]

I did it like this:

Card Style Listview using Dynamic Components Extension

[cardstyle] This demo uses the Dynamic Components extension by Yusuf Cihan, to create a card style listview for AppInventor 2. Dynamic Card Style Listview also see: Horiz and Vert Dynamic Listviews [EDIT] With the latest version of Yusuf's extension, it is now possible to reverse the order of the cards after creating them, so that with a chat type project, you can have the latest post at the top, instead of hidden at the bottom

[He_Lene]

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

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 )

[TIMAI2]

@He_Lene

how do I use the dynamic component in my own project ?

See these examples by @themaayur over on Kodular

5 Different Listviews using Dynamic component Extension | Guide

[ChrisWard]

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.

[He_Lene]

Hi again ...
I am sorry, I don't make it 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)

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 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 !

[ABG]

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.

chat_labels.aia (13.5 KB)

[Patryk_F]

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

[He_Lene]

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

@ChrisWard

according to where the Vertical Scroll is in relation to the Screen

Where & How can I know & use the position of the scrollable layout ? I didn't find the component allowing it
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

[ChrisWard]

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