IMbeeUI

Installation

Add maven arguments to gradle.properties

m_contextUrl=...
m_user=...
m_password=...

Add maven repository to the application level build.gradle

allprojects {
    repositories {
        jcenter()
        maven {
            url "${m_contextUrl}/libs-release"
            credentials {
                username = "${m_user}"
                password = "${m_password}"
            }
        }
    }
}

Apply the realm-android plugin to the top of the application level build.gradle

apply plugin: 'realm-android'

Add the class path dependency to the project level build.gradle (Module:app)

dependencies {
    compile(group: 'com.imbee.ui', name: 'imbeeuilib', version: '0.3.0', ext: 'aar') {
        transitive = true;
    }
}

Configuration

ChatFragment is the principal UI element which contains a chat list and message sending banner. In onCreate(), you must initialize:

Use IMbeeCore.getRealm() to get a Realm instance, remember to close this instance then!

public class MainActivity extends AppCompatActivity {

    private ChatFragment chatFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        IMbeeUI.initIMbeeUI(this);

        final String CONVERSATION_ID = "...";

        // Once you get the conversation list, you can get the conversation with CONVERSATION_ID
        Realm realm = IMbeeCore.getRealm();
        Conversation conversation = ConversationList.getConversation(realm, CONVERSATION_ID);
        chatFragment = ChatFragment.newInstance(conversation);

        // Register a callback to be invoked when a button is clicked.
        chatFragment.setCallbacks(new ChatFragment.Callbacks() {
            @Override
            public void onButtonClicked(Message message, ButtonContent buttonContent) {

                // It can be "url", "postback" ...
                if (buttonContent.buttonType.equals("url")) { // When it is a url button
                    Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(buttonContent.payload));
                    startActivity(browserIntent);
                }
            }

            @Override
            public void onLinkClicked(String url) {
                Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
                startActivity(browserIntent);
            }
        });

        getSupportFragmentManager()
            .beginTransaction()
            .add(R.id.chat_fragment, chatFragment)
            .commit();
        realm.close();
    }
}

In the activity_main.xml resource, you should add a FrameLayout like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.imbee.testapp.MainActivity">

    <FrameLayout
        android:id="@+id/chat_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

UI Customization

Customize the ChatFragment, changing colors, radius ...

IMbeeUI.initIMbeeUI(this);

IMbeeUI.setPrimaryColor(Color.parseColor("#009ad8"));
IMbeeUI.setRightMessageBackgroundColor(Color.parseColor("#009ad8"));
IMbeeUI.setRightMessageTextColor(Color.parseColor("#ffffff"));
IMbeeUI.setLeftMessageBackgroundColor(Color.parseColor("#e5f4fb"));
IMbeeUI.setLeftMessageTextColor(Color.parseColor("#000000"));
IMbeeUI.setMessageRadius(this, 14);
IMbeeUI.setSendMessageButtonDrawable(...);
IMbeeUI.setSpeechRecognizerButtonDrawable(...);

Icons customization

IMbeeUI.setMessageProfileCustomization(new IMbeeUI.MessageProfileCustomization() {
    @Override
    public View getView(MessagesListAdapter adapter, int position) {
        RelativeLayout relativeLayout;
        Message message = adapter.getItem(position);

        if (!message.isSentByMe())
            relativeLayout = ...;
        else
            relativeLayout = ...;

        return relativeLayout;
    }
});

Connection Change

To receive connection change, you need to register a BroadcastReceiver. First, create a receiver:

BroadcastReceiver broadcastReceiver = new BroadcastReceiver() {
    @Override
    public void onReceive(Context context, Intent intent) {
        if (intent.getAction().equals(IMbeeIntentActions.connectionStatusChanged)) {
            switch (ConnectionStatus.getConnectionStatus()) {
                case ConnectionStatus.CONNECTION_STATUS_CHAT_FUTURE_DONE:
                    // connected
                    break;
                case ConnectionStatus.CONNECTION_STATUS_DISCONNECTED:
                    // disconncted
                    break;
            }
        }
    }
};

Then, to register:

IMbeeUI.getLocalBroadcastManager().registerReceiver(broadcastReceiver, new IntentFilter(IMbeeIntentActions.connectionStatusChanged));

And don't forget to unregister it when you finish

IMbeeUI.getLocalBroadcastManager().unregisterReceiver(broadcastReceiver);