Android Chat UI Library — 0.1.1

Over the past couple of months, I’ve been SLOWLY building a customizable messaging UI library for Android inspired by JSQMessagesViewController.

There are increasing use cases for having a chat user interface within your application and in a lot of situations, messaging may or may not be the crux of your app. This library helps to reduce the amount of stress a developer needs to go through to make this user interface happen.

Thanks to the contribution of Efeturi Money, Segun Famisa, Onyekachi and others, we’ve finally been able to release version 0.1.1 of android-chat-ui.

There’s still a lot of work to be done, like multimedia messages, but I feel very strongly that this version is a step in the right direction.

I’m going to highlight a couple of the features of the library, but you can get more information about the “hows” by reading the documentation.

Features

1. Customization

You can make the ChatView look how you’d like it to by changing colours, sizes and elevations of the bubbles, the send button and the background using the following XML attributes.

chatview:backgroundColor=""
chatview:inputBackgroundColor=""
chatview:inputUseEditorAction="" // true or false
chatview:inputTextAppearance=""
chatview:inputTextSize=""
chatview:inputTextColor=""
chatview:inputHintColor=""
chatview:sendBtnIcon="" 
chatview:sendBtnIconTint=""
chatview:sendBtnBackgroundTint=""

chatview:bubbleBackgroundRcv="" // color
chatview:bubbleBackgroundSend="" //color
chatview:bubbleElevation="" // "flat" or "elevated"

2. Sending and Receiving Messages

Or at least appear to. Your application still needs to do the heavy lifting of actually sending messages over the internet. When that’s done, however, it’s pretty simple thing to update the UI using the code below.

chatView.setOnSentMessageListener(new ChatView.OnSentMessageListener(){
    @Override
    public boolean sendMessage(ChatMessage chatMessage){
        // perform actual message sending 
        return true;
    }
});

You can use the chatView.addMessage(ChatMessage message) to add a "received" message to the UI. This obviously should be done after whatever mechanisms you have in place have actually received a message.

You can use this method or chatView.addMessages(ArrayList<ChatMessage> messages) to add messages to the UI.

The side the chat bubble will appear on is determined by the Type of the ChatMessage.

3. Typing Listeners

You can detect different states of the user’s typing activity by using TypingListener.

chatView.setTypingListener(new ChatView.TypingListener(){
    @Override
    public void userStartedTyping(){
        // will be called when the user starts typing
    }
    @Override
    public void userStoppedTyping(){
        // will be called when the user stops typing
    }
});

That’s it! For now.

So check it out, use it, break it, submit issues and PRs.