Fully Customizable ChatView Using Dynamic Components

Hello everyone,

Today I am sharing a custom chat design which I made using Dynamic Components Extension by @yusufcihan

There are lot of things which you can customize. You can use this template in your chatting apps or an app that has a chat system in it. The design is fully made from scratch by using arrangements and spaces.

Here’s how it looks:


Block Image:

blocks (38)


Download


Liked my work?
You can donate me any amount if you wish to with PayPal.
Click here to donate.

Thank you.

24 Likes

Great work!

2 Likes

Nice Guide.

3 Likes

Amazing :heart_eyes:
Good Job :+1:

It is a legendary meme you know if you are a regular user of Quora :smile:

3 Likes

Amazing work @Aditya_Singh

1 Like

Great Guide :v: :heart_eyes:

I passed away :rofl::rofl::rofl:. This one was epic

5 Likes

Hello @Aditya_Singh, I rewrite your procedure with Schema, check this out:

{
    "name": "Fully Customizable ChatView",
    "metadata-version": 1,
    "author": "Aditya_Singh (rewritten by WaterMelonIce)",
    "platforms": [
        "Kodular"
    ],
    "keys": [
        "id",
        "message",
        "msgTextColor",
        "msgFontSize",
        "msgTypefaceImport",
        "timestamp",
        "timestampTextColor",
        "timestampFontSize",
        "timestampTypefaceImport",
        "containerRadius",
        "cardViewBgColor",
        "cardViewWidthPercent",
        "AlignHorizontal"
    ],
    "components": [
        {
            "id":"SpaceView1_{id}",
            "type":"SpaceView",
            "properties":{
                "HeightPercent":1,
                "Width":-2
            }
        },
        {
            "id":"HorizontalArrangement1_{id}",
            "type":"HorizontalArrangement",
            "properties":{
                "AlignHorizontal":"{AlignHorizontal}",
                "AlignVertical":2,
                "Width":-2
            },
            "components": [
                {
                    "id":"CardView1_{id}",
                    "type":"MakeroidCardView",
                    "properties":{
                        "FullClickable":true,
                        "AlignHorizontal":3,
                        "AlignVertical":1,
                        "BackgroundColor":"{cardViewBgColor}",
                        "CornerRadius":"{containerRadius}",
                        "WidthPercent":"{cardViewWidthPercent}"
                    },
                    "components": [
                        {
                            "id":"HorizontalArrangement2_{id}",
                            "type":"HorizontalArrangement",
                            "properties":{
                                "Width":-2,
                                "AlignHorizontal":1,
                                "AlignVertical":2
                            },
                            "components": [
                                {
                                    "id":"msgLabel_{id}",
                                    "type":"Label",
                                    "properties":{
                                        "Text":"{message}",
                                        "TextColor":"{msgTextColor}",
                                        "FontSize":"{msgFontSize}",
                                        "FontTypefaceImport":"{msgTypefaceImport}"
                                    }
                                }
                            ]
                        },
                        {
                            "id":"SpaceView2_{id}",
                            "type":"SpaceView",
                            "properties":{
                                "HeightPercent":1,
                                "Width":-2
                            }
                        },
                        {
                            "id":"HorizontalArrangement3_{id}",
                            "type":"HorizontalArrangement",
                            "properties":{
                                "Width":-2,
                                "AlignHorizontal":2,
                                "AlignVertical":2
                            },
                            "components": [
                                {
                                    "id":"timestampLabel_{id}",
                                    "type":"Label",
                                    "properties":{
                                        "Text":"{timestamp}",
                                        "TextColor":"{timestampTextColor}",
                                        "FontSize":"{timestampFontSize}",
                                        "FontTypefaceImport":"{timestampTypefaceImport}"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

CustomChatView (Schema rewritten).aia (76.8 KB)
I added the scroll handler by ColinTree, which can scroll to bottom automatically.
Btw, the the procedure is quite different, because you can’t do if then else in Schema, I changed the inputs a bit.

4 Likes

This is nice :+1:t2:
It will save a lot of blocks.

One Suggestion, use scroll handler and when user got or send msg use go to bottom.

Because when we send msg the message is not seen it hides bellow keybord.

Suppose you are continuously chatting and each time you have to scroll manually to reach at end to see the message . Isn’t it annoying.

1 Like

Nice guide, 2nd screenshot made me laugh :joy:

1 Like

I added to my rewritten Schema aia, that will scroll to bottom every time a message sent. Just like whatsapp

3 Likes

Should I update my post with both the AIA files?

1 Like

Ofc you can, it is your guide!

1 Like

Second Screenshot can make your day. :hugs:

5 Likes

amazing!!!

1 Like

What do we do to convert this to group chat?

[image]

1 Like

Simply use the white colored container for other participants in the group and give them a title for example their phone number or name, etc.

It depends on what type of group chat you want. You can customize the UI like how you need.

It may be better with an addition of sender’s name on the top of each message.

Sender’s name on each message is mostly shown when more than two people are involved in the chat.

ChatView App with Airtable

Features :

  • Your own message show right side in chat
  • You can see sender email id with message ( you can change it with name with firebase authentication)

Screenshot


Download Demo Apk

chatview.apk (5.5 MB)

2 Likes