ChatMessageView

DonManfred

Expert
Licensed User
Longtime User
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

Screenshot_20170106-214508.png
 

Attachments

  • ChatMessageViewEx.zip
    35.2 KB · Views: 889
  • ChatMessageViewV1.0.zip
    35.4 KB · Views: 689
  • res.ChatMessageView.zip
    161.5 KB · Views: 944
  • ChatMessageViewV1.01.zip
    35.5 KB · Views: 917
Last edited:

MarcoRome

Expert
Licensed User
Longtime User
Hi Don, a few question.

A) When i click point 1

upload_2017-1-7_18-0-42.png


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

Expert
Licensed User
Longtime User
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:

upload_2017-1-7_18-25-16.png
 

MarcoRome

Expert
Licensed User
Longtime User
About point 1..i think that is necessary that you see wrapper.
 

MarcoRome

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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
 

panagiotisden2

Active Member
Licensed User
Longtime User
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
 
Last edited:

MarcoRome

Expert
Licensed User
Longtime User
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
 

panagiotisden2

Active Member
Licensed User
Longtime User
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 :)
 

Douglas Farias

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

thx
 
Top