ChatMessageView

DonManfred · Jan 6, 2017

This is a wrap for this Github project.

ChatMessageView
Author: DonManfred (wrapper)
Version: 1
ChatView
Events:

onSendClicked (v As View)

Fields:

ba As anywheresoftware.b4a.BA

Methods:

hideKeyboard As void
Hide software keyboard
DesignerCreateView (base As anywheresoftware.b4a.objects.PanelWrapper, lw As anywheresoftware.b4a.objects.LabelWrapper, props As anywheresoftware.b4a.objects.collections.Map) As void
IsInitialized As boolean
Initialize (ba As anywheresoftware.b4a.BA, EventName As java.lang.String) As void
BringToFront As void
SetLayout (arg0 As int, arg1 As int, arg2 As int, arg3 As int) As void
SendToBack As void
SetVisibleAnimated (arg0 As int, arg1 As boolean) As void
receive (message As jp.bassaer.chatmessageview.models.Message) As void
RemoveView As void
Invalidate3 (arg0 As int, arg1 As int, arg2 As int, arg3 As int) As void
Invalidate2 (arg0 As android.graphics.Rect) As void
SetColorAnimated (arg0 As int, arg1 As int, arg2 As int) As void
SetBackgroundImage (arg0 As android.graphics.Bitmap) As void
Invalidate As void
send (message As jp.bassaer.chatmessageview.models.Message) As void
SetLayoutAnimated (arg0 As int, arg1 As int, arg2 As int, arg3 As int, arg4 As int) As void
RequestFocus As boolean

Properties:

Left As int
Parent As java.lang.Object [read only]
InputText As java.lang.String
DateSeparatorColor As int [write only]
InputTextHint As java.lang.String [write only]
LeftMessageTextColor As int [write only]
Visible As boolean
Padding As int[]
SendButtonColor As int [write only]
Height As int
Width As int
RightBubbleColor As int [write only]
Background As android.graphics.drawable.Drawable
UsernameTextColor As int [write only]
Color As int [write only]
Enabled As boolean
SendTimeTextColor As int [write only]
SendIcon As int [write only]
AutoScroll As boolean [write only]
Auto Scroll when message received.
LeftBubbleColor As int [write only]
Top As int
RightMessageTextColor As int [write only]
Tag As java.lang.Object
BackgroundColor As int [write only]

MessageBuilder
Methods:

setMessageText (messageText As java.lang.String) As de.donmanfred.MessageBuilderWrapper
setRightMessage (isRight As boolean) As de.donmanfred.MessageBuilderWrapper
IsInitialized As boolean
Initialize (ba As anywheresoftware.b4a.BA, EventName As java.lang.String) As void
setUserIcon (icon As android.graphics.Bitmap) As de.donmanfred.MessageBuilderWrapper
setCreatedAt (calendar As java.util.Calendar) As de.donmanfred.MessageBuilderWrapper
setDateCell (isDateCell As boolean) As de.donmanfred.MessageBuilderWrapper
setUserName (userName As java.lang.String) As de.donmanfred.MessageBuilderWrapper
build As jp.bassaer.chatmessageview.models.Message

MessageView
Fields:

ba As anywheresoftware.b4a.BA

Methods:

DesignerCreateView (base As anywheresoftware.b4a.objects.PanelWrapper, lw As anywheresoftware.b4a.objects.LabelWrapper, props As anywheresoftware.b4a.objects.collections.Map) As void
IsInitialized As boolean
Initialize (ba As anywheresoftware.b4a.BA, EventName As java.lang.String, messages As java.util.ArrayList) As void
BringToFront As void
SetLayout (arg0 As int, arg1 As int, arg2 As int, arg3 As int) As void
SendToBack As void
init2 As void
Initialize list
SetVisibleAnimated (arg0 As int, arg1 As boolean) As void
init (messages As anywheresoftware.b4a.objects.collections.List) As void
RemoveView As void
Invalidate3 (arg0 As int, arg1 As int, arg2 As int, arg3 As int) As void
Invalidate2 (arg0 As android.graphics.Rect) As void
SetColorAnimated (arg0 As int, arg1 As int, arg2 As int) As void
SetBackgroundImage (arg0 As android.graphics.Bitmap) As void
scrollToEnd As void
Invalidate As void
SetLayoutAnimated (arg0 As int, arg1 As int, arg2 As int, arg3 As int, arg4 As int) As void
RequestFocus As boolean

Properties:

RightBubbleColor As int [write only]
Left As int
Message As jp.bassaer.chatmessageview.models.Message [write only]
Background As android.graphics.drawable.Drawable
UsernameTextColor As int [write only]
Parent As java.lang.Object [read only]
Color As int [write only]
Enabled As boolean
SendTimeTextColor As int [write only]
LeftBubbleColor As int [write only]
LeftMessageTextColor As int [write only]
Top As int
Visible As boolean
RightMessageTextColor As int [write only]
Padding As int[]
Height As int
Tag As java.lang.Object
Width As int
DateSeparatorTextColor As int [write only]

Message
Methods:

isDateCell As boolean
initDate As void
isRightMessage As boolean
IsInitialized As boolean
Initialize (ba As anywheresoftware.b4a.BA, EventName As java.lang.String) As void

Properties:

RightMessage As boolean [write only]
TimeText As java.lang.String
UserName As java.lang.String
UserIcon As android.graphics.Bitmap
CreatedAt As java.util.Calendar
MessageText As java.lang.String
DateCell As boolean [write only]
CompareCalendar As java.util.Calendar [read only]
Return Calendar to compare the day <br>
Reset hour, min, sec, milli sec.<br>
DateSeparateText As java.lang.String

B4X:

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.

    Private chat As ChatView
    'Private msgview As MessageView
    Private builder As MessageBuilder
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("Layout1")
 
    Dim bmp As Bitmap
    bmp.Initialize(File.DirAssets,"DonManfred.png")
 
 
 
    Dim messages As List
    messages.Initialize

    Dim msg As Message
    builder.Initialize("")
    msg = builder.setUserIcon(bmp).setMessageText("Hallo B4X-World! :-)").setRightMessage(False).setUserName("DonManfred").build
    messages.Add(msg)
    chat.send(msg)

    Dim msg As Message
    builder.Initialize("")
    msg = builder.setMessageText("Hallo Manfred!").setRightMessage(True).setUserName("Someone").build

    messages.Add(msg)
 
    'msgview.init(messages)
    'msgview.Message = msg
 
    chat.send(msg)
 
    chat.AutoScroll = True
    chat.BackgroundColor = Colors.LightGray
    chat.DateSeparatorColor = Colors.Blue
    chat.InputTextHint = "This is the hint"
    chat.BackgroundColor = Colors.DarkGray
    chat.LeftBubbleColor = Colors.ARGB(255,128,64,64)
    chat.RightBubbleColor = Colors.ARGB(255,64,128,128)
    chat.LeftMessageTextColor = Colors.Red
    chat.RightMessageTextColor = Colors.Magenta
End Sub

MarcoRome · Jan 6, 2017

Really great job dear Don.

panagiotisden2 · Jan 7, 2017

Wow you are the best!
Just in time I needed this
Thanks a lot Manfred

DonManfred · Jan 7, 2017

panagiotisden2 said:
Just in time I needed this

Feel free to donate a big amount of $ then

MarcoRome · Jan 7, 2017

Hi Don, a few question.

A) When i click point 1

i have this result in Log Window:

** Activity (main) Pause, UserClosed = false **
** Service (starter) Create **
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
lib: NOTFOUND 'chat_onsendclicked
lib: NOTFOUND 'chat_onsendclicked
lib: NOTFOUND 'chat_onsendclicked

also if i have this code

B4X:

Sub chat_onSendClicked(v As View)
    Log("TEST")
End Sub

where i wrong ??

B. Is possible change property as colour text for point 2 ?

Thank you

MarcoRome · Jan 7, 2017

Ok the second point you can solve it by working on resources

1. Folder: res.ChatMessageView\values\colors.xml you can add this line:

<color name="blueGrayBlack">#000000</color>

2. Folder: res.ChatMessageView\layout\chat_view.xml you have:

B4X:

 <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="@dimen/icon_normal"
        android:background="@color/blueGray50"
        >

change last line with:

B4X:

 <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="@dimen/icon_normal"
        android:background="@color/blueGrayBlack"
        >

3. in you code B4A add this line:

B4X:

chat.SendButtonColor = Colors.White

and you will be this effect:

MarcoRome · Jan 7, 2017

About point 1..i think that is necessary that you see wrapper.

DonManfred · Jan 7, 2017

for now. ADD a second sub

B4X:

Sub chat_onSendClick(v As View)
    Log("TEST")
End Sub

the lib is searching for this name but it is raising the other...

MarcoRome · Jan 7, 2017

DonManfred said:
for now. ADD a second sub

B4X:

Sub chat_onSendClick(v As View) Log("TEST") End Sub

the lib is searching for this name but it is raising the other...

With this code:

B4X:

Sub chat_onSendClicked(v As View)
    Log("TEST")
End Sub

Sub chat_onSendClick(v As View)
    Log("TEST")
End Sub

I have this error:

** Service (starter) Create **
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
lib:Raising.. chat_onsendclicked()
java.lang.Exception: Sub chat_onsendclicked signature does not match expected signature.

MarcoRome · Jan 7, 2017

And with this code:

B4X:

Sub chat_onSendClick(v As View)
    Log("TEST")
End Sub

i have this error:

** Service (starter) Create **
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
lib:Raising.. chat_onsendclicked()
java.lang.Exception: Sub chat_onsendclicked was not found.

Ok. Dont worry.... you need time.
Thank you

DonManfred · Jan 7, 2017

ok, i´ll update the lib soon.
change the sub to

B4X:

Sub chat_onSendClicked(text As String)
    Log($"chatv_onSendClicked(${text})"$)
End Sub

for the next version....

DonManfred · Jan 7, 2017

V1.01 updated in post #1

panagiotisden2 · Jan 7, 2017

Some issues:
1) The text bubble resize itself when I open the keyboard and glitches. Also it stays resized after I close the keyboard.

2) Messages.clear does not really clear the messages. Should I call something along with this?

3) how can I move the bubbles more to the edge of the screen? Because its a bit too centered and the text have small width and big height

4) how can i change the edittext text color? cant find anything in the xml files

MarcoRome · Jan 8, 2017

DonManfred said:
V1.01 updated in post #1

Hi dear Don. Now work

Great Work

DonManfred · Jan 8, 2017

You forgot to change the user!

MarcoRome · Jan 8, 2017

panagiotisden2 said:
Some issues:
1) The text bubble resize itself when I open the keyboard and glitches. Also it stays resized after I close the keyboard.

2) Messages.clear does not really clear the messages. Should I call something along with this?

3) how can I move the bubbles more to the edge of the screen? Because its a bit too centered and the text have small width and big height

4) how can i change the edittext text color? cant find anything in the xml files

Point 1 can yuo send example ?
Point 2 Message.clear "clear" only object list and no chat. if you want delete all you can use this code:

B4X:

chat.RemoveView
Activity.LoadLayout("Layout1")

Point 3 I dont see this property / method :

B4X:

//Set UI options
    mChatView.setRightBubbleColor(ContextCompat.getColor(this, R.color.deepOrange500));
    mChatView.setLeftBubbleColor(Color.WHITE);
    mChatView.setBackgroundColor(ContextCompat.getColor(this, R.color.blueGray700));
    mChatView.setSendButtonColor(ContextCompat.getColor(this, R.color.cyan500));
    mChatView.setSendIcon(R.drawable.ic_action_send);
    mChatView.setRightMessageTextColor(Color.WHITE);
    mChatView.setLeftMessageTextColor(Color.BLACK);
    mChatView.setUsernameTextColor(Color.WHITE);
    mChatView.setSendTimeTextColor(Color.WHITE);
    mChatView.setDateSeparatorColor(Color.WHITE);
    mChatView.setInputTextHint("new message...");

but if you want you can change size char.
dimens.xml

<dimen name="font_normal">20sp</dimen>

Point 4

B4X:

chat.LeftMessageTextColor
chat.RightMessageTextColor

MarcoRome · Jan 8, 2017

DonManfred said:
You forgot to change the user!

Of course i talk often with myself

panagiotisden2 · Jan 8, 2017

MarcoRome said:

Point 1 can yuo send example ?
Point 2 Message.clear "clear" only object list and no chat. if you want delete all you can use this code:

B4X:

chat.RemoveView
Activity.LoadLayout("Layout1")

Point 3 I dont see this property / method :

B4X:

//Set UI options
    mChatView.setRightBubbleColor(ContextCompat.getColor(this, R.color.deepOrange500));
    mChatView.setLeftBubbleColor(Color.WHITE);
    mChatView.setBackgroundColor(ContextCompat.getColor(this, R.color.blueGray700));
    mChatView.setSendButtonColor(ContextCompat.getColor(this, R.color.cyan500));
    mChatView.setSendIcon(R.drawable.ic_action_send);
    mChatView.setRightMessageTextColor(Color.WHITE);
    mChatView.setLeftMessageTextColor(Color.BLACK);
    mChatView.setUsernameTextColor(Color.WHITE);
    mChatView.setSendTimeTextColor(Color.WHITE);
    mChatView.setDateSeparatorColor(Color.WHITE);
    mChatView.setInputTextHint("new message...");

but if you want you can change size char.
dimens.xml

Point 4

B4X:

chat.LeftMessageTextColor
chat.RightMessageTextColor

1)I'm gonna send an example in a while. Is a pic OK?(the github project has an update maybe this can solve it)
2) thanks I'm gonna remove the view and recreate it then.
3)OK I'll mess a bit with the xmls then see what I can change
4) no, I mean the font color of the edittext, I have changed the textbox to white and the default font color is White too so I can't see it

Thanks Marco
,appreciate your help

MarcoRome · Jan 8, 2017

panagiotisden2 said:
1)I'm gonna send an example in a while. Is a pic OK?(the github project has an update maybe this can solve it)

I think that dear Don already use the last project. But about this question only he can answer

Douglas Farias · Jan 8, 2017

@DonManfred
good morning.
its possible send a audio, video and image?
if no, its possible u add this to the lib?

thx

ChatMessageView

Expert

Attachments

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Expert

Expert

Expert

Active Member

Expert

Expert