Skip to content

Chat View

Category Requires Version
Layout > Views API 21, Android 5.0 Lollipop 3

Overview

A visible component that displays a scrollable chat.
A chat consists of messages sent by two or more than two users where each message can be either simple text or have rich formatting.

Permissions

Events

Click

Click listener event.

Params
user Image Text
title Text
message Text
timestamp Text
id Number
send As Sender Boolean
image Path Text
with Image Boolean
file Path Text
file Thumbnail Text
with File Boolean

Double Tap Click

Double tap click listener event.

Params
user Image Text
title Text
message Text
timestamp Text
id Number
send As Sender Boolean
image Path Text
with Image Boolean
file Path Text
file Thumbnail Text
with File Boolean

Long Click

Long click listener event.

Params
user Image Text
title Text
message Text
timestamp Text
id Number
send As Sender Boolean
image Path Text
with Image Boolean
file Path Text
file Thumbnail Text
with File Boolean

Swipe

Swipe listener event. The direction value returns '1' for right-to-left swipes, '2' for left-to-right swipes '3' for bottom-to-top swipes and '4' for top-to-bottom swipes

Params
direction Number
user Image Text
title Text
message Text
timestamp Text
id Number
send As Sender Boolean
image Path Text
with Image Boolean
file Path Text
file Thumbnail Text
with File Boolean

User Image Click

Click listener event for the user image.

Params
id Number
user Image Text

Methods

Add Component Message

Add a new simple component message into the chat view. If you do not want a user image or title or message or timestamp, then let the field empty. Make sure that the component is VISIBLE on the screen when you try to add it here. It will be then removed automatic from the screen and only visible again in the chat view.

Params
user Image Text
title Text
message Text
timestamp Text
component Component
id Number
add As Sender Boolean

Add Date Timestamp

Add a new simple date timestamp into the chat view. You NEED to write a date, else this block will do nothing. This means the field 'date' can NOT be empty. Timestamp messages are not clickable.

Params
date Text
text Color Number
background Color Number
id Number

Add File Message

Add a new simple file message into the chat view. If you do not want a user image or title or message or timestamp, then let the field empty.

Params
user Image Text
title Text
message Text
file Path Text
file Thumbnail Text
timestamp Text
id Number
add As Sender Boolean

Add Image Message

Add a new simple image message into the chat view. If you do not want a user image or title or message or timestamp, then let the field empty.

Params
user Image Text
title Text
message Text
image Text
timestamp Text
id Number
add As Sender Boolean

Add Message

Add a new simple message into the chat view. If you do not want a user image or title or message or timestamp, then let the field empty.

Params
user Image Text
title Text
message Text
timestamp Text
id Number
add As Sender Boolean

Clear ChatView

Removes all messages and timestamps from the chat view.

Count Date Timestamp

Returns: Number

Returns the number of all date timestamps. Normal messages are not included.

Count Messages

Returns: Number

Returns the number of all messages. 'Date Timestamp' messages are not included.

Get Last Used Id

Returns: Number

Returns the last used id.

Remove Message

Remove a message or timestamp from the chat view.

Params
id Number

Scroll To

Scroll to a specific message in the chat view with the given id.

Params
id Number

Update Message Background Color

Update the background color of a chat view message.

Params
id Number
background Color Number

Update Message Content

Update the message content of a chat view message.

Params
id Number
text Text
text Color Number

Update Timestamp Content

Update the timestamp content of a chat view message.

Params
id Number
text Text
text Color Number

Update Title Content

Update the title content of a chat view message.

Params
id Number
text Text
text Color Number

Update User Image

Update the user image of a chat view message. The image can only be updated if there was before a old image.

Params
id Number
user Image Text

Properties

Automatic Scroll Down

Boolean Default: True ➖ Read Write - Designer Blocks

If set to true the chat view will scroll down when a new message was send.

Background Color

Color Default: #00000000  ➖ Read Write - Designer Blocks

Specifies the component's background color. The background color will not be visible if an Image is being displayed.

Clickable

Boolean Default: False ➖ Read Write - Designer Blocks

Set the component clickable or not clickable.

Double Tap

Available as Advanced Property

Boolean Default: False ➖ Read Write - Designer Blocks

Set the component enabled for double taps or not.

Height

Number ➖ Read Write - Blocks

Specifies the component's vertical height, measured in pixels.

Height Percent

Number ➖ Write - Blocks

Specifies the component's vertical height as a percentageof the height of its parent Component.

Image

Text ➖ Read Write - Designer Blocks

Specifies the path of the component's image. If there is both an Image and a BackgroundColor, only the Image will be visible.

Messages Corner Radius

Available as Advanced Property

Number Default: 5 ➖ Write - Designer

Property for MessagesCornerRadius

Messages Font Size

Available as Advanced Property

Number Default: 14.0 ➖ Write - Designer

Property for MessagesFontSize

Receivers Background Color

Color Default: #CCCCCCFF  ➖ Read Write - Designer Blocks

Specifies the background color for receiver's messages.

Receivers Message Color

Color Default: #000000FF  ➖ Read Write - Designer Blocks

Specifies the color for receivers's messages.

Receivers Title Color

Color Default: #000000FF  ➖ Read Write - Designer Blocks

Specifies the color for receivers's title messages.

Receivers Typeface Message

Number Default: 0 ➖ Write - Designer

Property for ReceiversTypefaceMessage

Receivers Typeface Message Import

Available as Advanced Property

Text ➖ Write - Designer

Property for ReceiversTypefaceMessageImport

Receivers Typeface Title

Number Default: 0 ➖ Write - Designer

Property for ReceiversTypefaceTitle

Receivers Typeface Title Import

Available as Advanced Property

Text ➖ Write - Designer

Property for ReceiversTypefaceTitleImport

Scrollbar

Boolean Default: True ➖ Read Write - Designer Blocks

Whether to display a scrollbar.

Senders Background Color

Color Default: #8BC24AFF  ➖ Read Write - Designer Blocks

Specifies the background color for sender's messages.

Senders Message Color

Color Default: #000000FF  ➖ Read Write - Designer Blocks

Specifies the color for sender's messages.

Senders Title Color

Color Default: #000000FF  ➖ Read Write - Designer Blocks

Specifies the color for sender's title messages.

Senders Typeface Message

Number Default: 0 ➖ Write - Designer

Property for SendersTypefaceMessage

Senders Typeface Message Import

Available as Advanced Property

Text ➖ Write - Designer

Property for SendersTypefaceMessageImport

Senders Typeface Title

Number Default: 0 ➖ Write - Designer

Property for SendersTypefaceTitle

Senders Typeface Title Import

Available as Advanced Property

Text ➖ Write - Designer

Property for SendersTypefaceTitleImport

Swipeable

Available as Advanced Property

Boolean Default: False ➖ Read Write - Designer Blocks

If set to true you can swipe with your fingers through views.

Timestamp Corner Radius

Available as Advanced Property

Number Default: 5 ➖ Write - Designer

Property for TimestampCornerRadius

Timestamp Font Size

Available as Advanced Property

Number Default: 14.0 ➖ Write - Designer

Property for TimestampFontSize

Timestamp Text Color

Color Default: #000000FF  ➖ Read Write - Designer Blocks

Specifies the color for the timestamp.

Title Font Size

Available as Advanced Property

Number Default: 14.0 ➖ Write - Designer

Property for TitleFontSize

Visible

Boolean Default: True ➖ Read Write - Designer Blocks

Returns true iff the component is visible.

Width

Number ➖ Read Write - Blocks

Specifies the component's horizontal width, measured in pixels.

Width Percent

Number ➖ Write - Blocks

Specifies the component's horizontal width as a percentageof the Width of its parent Component.


Last update: November 9, 2022