How to Configure Components in the QuickBlox Android UI Kit

To configure components in the QuickBlox Android UI Kit, use each component’s available configuration methods to customize its appearance and behavior, including themes, colors, text, callbacks, and other settings. You can customize the UI Kit’s ready-made components or implement a supported component interface to create your own custom version. 

This tutorial uses the SearchComponent to demonstrate both approaches and shows how to add a customized component to a UI Kit screen.

Prerequisites

Before starting, make sure you have:

• An Android project with the QuickBlox Android UI Kit installed and configured
• The QuickBlox Android SDK installed
• A QuickBlox application and valid credentials
• Basic familiarity with Kotlin and Android UI development

If you haven’t installed the UI Kit yet, follow How to Add Chat with the QuickBlox Android UI Kit first. Component customization does not require any additional dependencies beyond the standard UI Kit installation.

What Components Can You Configure in the QuickBlox Android UI Kit?

The QuickBlox Android UI Kit includes a collection of reusable UI components that help developers build chat interfaces without creating every screen from scratch. Each component is a standalone element that can be configured independently, allowing you to customize specific parts of the interface without modifying the entire UI. This approach gives you the flexibility to adapt the UI Kit to your application’s design and user experience requirements.

All configurable components extend the base Component interface:

interface Component {

  fun setTheme(theme: UiKitTheme)

  fun getView(): View

}

The Component interface provides the common functionality shared across configurable UI Kit components. Every supported component implements this interface, allowing you to apply themes consistently and retrieve the component’s view for display within the UI Kit. This remains the foundation of the Android UI Kit’s flexible component architecture.

The current configurable components include:

• DialogsComponent — Displays the list of chat dialogs.
• HeaderWithIconComponent — Displays a header with an icon.
• HeaderWithAvatarComponent — Displays a header with a user avatar.
• HeaderWithTextComponent — Displays a header containing descriptive text.
• DialogInfoComponent — Displays information about a chat dialog.
• MessagesComponent — Displays chat messages.
• DialogNameComponent — Displays and edits a dialog name.
• SearchComponent — Provides dialog and user search functionality.
• SendMessageComponent — Handles message composition and sending.
• UsersComponent — Displays a list of users.

While every component exposes its own configuration methods, they all follow the same general customization pattern. Once you understand how to configure one component, the same approach applies throughout the Android UI Kit.

In the remainder of this tutorial, we’ll use the SearchComponent as a practical example because it demonstrates many of the customization techniques you’ll use with other UI Kit components.

Configure a Ready-Made UI Kit Component

For many applications, you can customize an existing UI Kit component without creating your own implementation.

The following example uses the built-in SearchComponentImpl to demonstrate how to modify the appearance and behavior of a standard component. The same approach can be applied to many other configurable components within the QuickBlox Android UI Kit.

// Creating and configuring the SearchComponent

val searchComponent: SearchComponent = SearchComponentImpl(context)

// Setting the theme according to the dark design

val darkUiKitTheme = DarkUiKitTheme()

searchComponent.setTheme(darkUiKitTheme)

searchComponent.setDividerColor(darkUiKitTheme.getDividerColor())

searchComponent.setSearchTextColor(darkUiKitTheme.getMainElementsColor())

// Setting the search hint

searchComponent.setSearchHint("Text hint")

// Setting search event listeners

searchComponent.setSearchClickListener(object : SearchComponentImpl.SearchEventListener {

  override fun onSearchEvent(text: String) {

    // Handling search event

  }

  override fun onDefaultEvent() {

    // Handling default state event

  }

})

// Setting the search button image

searchComponent.setImageSearchButton(R.drawable.search)

// Setting the minimum character length for search

searchComponent.setMinCharactersLengthForSearch(3)

// Making the search button visible

searchComponent.setVisibleSearchButton(true)

In this example, the component is customized by:

• Applying a dark UI Kit theme.
• Changing the divider and search text colors.
• Setting custom placeholder text.
• Registering callbacks for search events.
• Replacing the default search button icon.
• Specifying the minimum number of characters required before a search begins.
• Controlling the visibility of the search button.

For many customization scenarios, configuring an existing component like this is all that’s required. When you need to introduce new functionality or significantly change how a component behaves, you can instead create your own implementation of the component interface.

Create a Custom UI Kit Component

If the built-in configuration options don’t provide the functionality your application requires, you can create your own implementation of a UI Kit component.

The QuickBlox Android UI Kit exposes interfaces for supported components, allowing you to implement your own behavior while remaining compatible with the rest of the UI Kit. This approach is useful when you need to introduce custom UI logic or extend the default functionality beyond what is available through the ready-made implementation.

The following example demonstrates a custom implementation of the SearchComponent interface.

// CustomSearchComponent: A custom implementation of the SearchComponent interface

class CustomSearchComponent : ConstraintLayout, SearchComponent {

  constructor(context: Context) : super(context) {
    init(context)
  }

  constructor(context: Context, attrs: AttributeSet?) : super(context, attrs) {
    init(context)
  }

  constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
    init(context)
  }

  // Initialization of the custom component

  private fun init(context: Context) {
    // Your custom initialization code here
  }

  // Implementation of the SearchComponent interface methods

  override fun getSearchHint(): String {
    // Your implementation to get the search hint
  }

  override fun setSearchHint(text: String?) {
    // Your implementation to set the search hint
  }

  override fun setSearchHintColor(color: Int) {
    // Your implementation to set the search hint color
  }

  override fun getSearchText(): String {
    // Your implementation to get the search text
  }

  override fun setSearchText(text: String?) {
    // Your implementation to set the search text
  }

  override fun setTextWatcherToEditText(textWatcher: TextWatcher?) {
    // Your implementation to set a text watcher to the EditText
  }

  override fun setSearchTextColor(color: Int) {
    // Your implementation to set the search text color
  }

  override fun setMinCharactersLengthForSearch(number: Int) {
    // Your implementation to set the minimum character length for search
  }

  override fun clearSearchTextAndReinitTextWatcher() {
    // Your implementation to clear the search text and reinitialize the text watcher
  }

  override fun getSearchClickListener(): SearchEventListener? {
    // Your implementation to get the search click listener
  }

  override fun setSearchClickListener(searchEventListener: SearchEventListener?) {
    // Your implementation to set the search click listener
  }

  override fun setVisibleSearchButton(visible: Boolean) {
    // Your implementation to set the visibility of the search button
  }

  override fun setSearchButtonClickableState() {
    // Your implementation to set the search button state as clickable
  }

  override fun setSearchButtonNotClickableState() {
    // Your implementation to set the search button state as not clickable
  }

  override fun setSearchButtonColor(color: Int) {
    // Your implementation to set the search button color
  }

  override fun setImageSearchButton(resource: Int) {
    // Your implementation to set the image on the search button
  }

  override fun setDividerColor(color: Int) {
    // Your implementation to set the color of the divider
  }

  override fun setBackground(color: Int) {
    // Your implementation to set the background color of the component
  }

  override fun setTheme(theme: UiKitTheme) {
    // Your implementation to set the theme for the component
  }

  override fun getView(): View {
    // Your implementation to get the view of the component
  }
}

This example illustrates the structure required to create your own SearchComponent implementation. The constructors initialize the component, while the interface methods allow you to control every aspect of its appearance and behavior.

Depending on your application’s requirements, you can implement only the functionality that differs from the default component while preserving the overall integration with the QuickBlox Android UI Kit.

Note: The example above demonstrates the complete interface that a custom SearchComponent implementation must support. Your own implementation should provide the business logic appropriate for your application’s search experience.

// Create a custom search component

val customSearchComponent: SearchComponent = CustomSearchComponent(context)

// Prepare the dark theme for the UI Kit

val darkUiKitTheme: UiKitTheme = DarkUiKitTheme()

// Customize the custom search component

customSearchComponent.setTheme(darkUiKitTheme)

customSearchComponent.setDividerColor(darkUiKitTheme.getDividerColor())

customSearchComponent.setSearchTextColor(darkUiKitTheme.getMainElementsColor())

customSearchComponent.setSearchHint("Text hint")

customSearchComponent.setImageSearchButton(R.drawable.search)

customSearchComponent.setMinCharactersLengthForSearch(3)

customSearchComponent.setVisibleSearchButton(true)

// Create the DialogsScreenSettings with customized components

val dialogsScreenSettings = DialogsScreenSettings.Builder(context)
.showDialogs(true)
.showHeader(true)
.showSearch(true)
.setTheme(darkUiKitTheme)
.setDialogsComponent(DialogsComponentImpl(context))
.setHeaderComponent(HeaderWithIconComponentImpl(context))
.setSearchComponent(customSearchComponent)
.build()

// Display the DialogsActivity with the specified screen settings

DialogsActivity.show(this, dialogsScreenSettings)
 

In this example, the custom search component replaces the default search experience on the Dialogs screen while the remaining UI Kit components continue using their standard implementations.

This pattern lets you customize only the parts of the interface that require specialized behavior, while continuing to benefit from the pre-built functionality provided by the rest of the Android UI Kit. It also makes it easy to combine ready-made and custom components within the same screen.

Next Steps

Now that you’ve learned how to configure components in the QuickBlox Android UI Kit, continue exploring these related tutorials and resources:

• QuickBlox Android SDK Documentation — https://docs.quickblox.com/sdks/android-quick-start
• QuickBlox Android UI Kit Documentation — https://docs.quickblox.com/ui-kits/android-uikit-overview
• QuickBlox Android SDK  and code samples on GitHub — https://github.com/QuickBlox/quickblox-android-sdk
• QuickBlox Android UI Kit GitHub Repository — https://github.com/QuickBlox/android-ui-kit
• QuickBlox Developer Discord Community — https://discord.com/invite/3cKRunq8ZZ
• QuickBlox Support — https://help.quickblox.com/