Android Tutorial Firebase Realtimedatabase user is typing feature

Alexander Stolte

Well-Known Member
Licensed User
Hello,

A nice feature is to display whether a user is typing or not.
istyping.PNG

Most apps have a bubble added or by WhatsApp is a simple "wrtiting.." on top.

This is the result of this Tutorial:
resultoftyping.PNG


For the Tutorial how to create a room and create messages in there click here. You can use it here.

and how to do that, I explain now. :)

We need the Realtimedatabase lib. here.

in this Tutorial i use the AuthEX lib for anonymous login.

Now we are ready to start.

B4X:
Sub Process_Globals
  'it is better to add this in a Service
Public auth As FirebaseAuthEx
Public realtime As FirebaseDatabase

End Sub

Sub Globals

Dim typingref As DatabaseReference

Dim tmr_iswrtiting As Timer

Dim istyping2 As Boolean

Dim EditText1 As EditText

Dim Button_Send As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)

    Activity.LoadLayout("frm_main")

    'this is better in a service!
    auth.Initialize("auth")
    realtime.Initialize("Realtime")
    realtime.PersistenceEnabled = True

    auth.signInAnonymously

    tmr_iswrtiting.Initialize("tmr_iswrtiting", 5000) 'we need a timer to set the value to false if the user not writing after 5 seconds pause

typingref.Initialize("istyping",realtime.getReference2("/rooms/" & "id of the room/" & "typingIndicator"),"typing")
typingref.onDisconnectSetValue(CreateMap(auth.currentuser.uid : False))
typingref.addChildEventListener
typingref.keepSynced(True)

End Sub

'now we need a EditText

Sub EditText1_TextChanged (Old As String, New As String)
tmr_iswrtiting.Enabled = False 'if the user is typing set the timer false


istyping2 = True
typingref.setValue(CreateMap(auth.CurrentUser.Uid:istyping2),"istyping","istyping")

tmr_iswrtiting.Enabled = True 'set timer true, because if the user is not typing
End Sub

Sub tmr_iswrtiting_Tick

      istyping2 = False 'user is not typing

 typingref.setValue(CreateMap(auth.CurrentUser.Uid:istyping2),"istyping","istyping")

    tmr_iswrtiting.Enabled = False 'set timer false
End Sub

'the event if a new user is typing


'the same on ChildCahnged this is Important!

Sub  istyping_onChildChanged(Snapshot As Object, child As String, tag As Object)
    

Dim snap As DataSnapshot = Snapshot
    Dim NewMessage As Map = snap.Value
    
    For i = 0 To NewMessage.Size - 1
     
        If NewMessage.GetKeyAt(i) = auth.CurrentUser.Uid Then 'if the key my uid then not display "writing..."
        
        Else
            If NewMessage.GetValueAt(i) = True Then 'if my partner is writing then
                ToastMessageShow("schreibt...", False) 'here you can set what happent if the partner is writing, for example you can set the bubble.visible = true or how in WhatsApp show the label with the input "wrtiting..." or so.
            Else
                ToastMessageShow("schreibt nicht mehr...", False) 'what happend if the user does not write anymore.
            End If
        End If
    
    Next
    
End Sub

'now if we are send the message
Sub Button_Send_Click


   'then set the value to False "user is not writing"
    istyping2 = False

    typingref.setValue(CreateMap(Starter.auth.CurrentUser.Uid:istyping2),"istyping","istyping")

End Sub

'It can also happen that a user leaves the room faster than the 5 seconds without sending the Mwssage, for this reason we add this

Sub Activity_Create(FirstTime As Boolean)
if istyping2 = true then

    istyping2 = False

    typingref.setValue(CreateMap(auth.CurrentUser.Uid:istyping2),"istyping","istyping")

End If

End Sub
Update: Added "ondisconnectsetvalue"

I hope i can help you with this tutorial, it is a nice feature. For tips or questions I'm open.
 
Last edited:

Rantor777

Member
Licensed User
Great, i was needing something like that, now i just have to create Video, Image, Audio, Animation Interfaces. Thanks, Friend.
 
Top