# 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);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.imbee.me/imbee-docs/apps/android-sdk/imbeeui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.