> For the complete documentation index, see [llms.txt](https://docs.imbee.me/imbee-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.imbee.me/imbee-docs/apps/android-sdk/imbeeui.md).

# IMbeeUI

### Installation <a href="#installation" id="installation"></a>

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 <a href="#configuration" id="configuration"></a>

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

{% hint style="info" %}
Use `IMbeeCore.getRealm()` to get a Realm instance, remember to close this instance then!
{% endhint %}

```java
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:

```java
<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 <a href="#ui-customization" id="ui-customization"></a>

Customize the ChatFragment, changing colors, radius ...

```java
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

```java
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 <a href="#connection-change" id="connection-change"></a>

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

```java
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:

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

And don't forget to unregister it when you finish

```java
IMbeeUI.getLocalBroadcastManager().unregisterReceiver(broadcastReceiver);
```