How to configure Components in the QuickBlox Android UI Kit

Creating visually appealing and user-friendly interfaces in Android App development is paramount. In our previous article, ‘How to Customize Color Theme and Screens in QuickBlox Android UI Kit‘ we demonstrated how to tailor the visual aspects of your app. Now, in this article, our focus shifts to another essential dimension—configuring components. The QuickBlox Android UI Kit equips developers with an extensive array of tools and components to simplify the UI design and implementation journey. In the following, we will show you how to configure these components to suit your specific use case.

Сomponents in QuickBlox Android UI Kit

The QuickBlox Android UI Kit provides a diverse set of components to simplify the process of UI design and implementation. With our kit you can create an engaging and user-centric interface, and one that supports your specific use case needs. Each component in the QuickBlox Android UI Kit is a standalone element that can be integrated into an application individually. This not only enhances flexibility in development but also ensures ease of use.

There are several components currently available, each extending the base Component interface

interface Component {
   fun setTheme(theme: UiKitTheme)
   fun getView(): View
}

and providing functions for theme setting and view retrieval:

• DialogsComponent: A component for displaying dialogs.
• HeaderWithIconComponent: A header with an icon, providing a convenient way to highlight key information.
• HeaderWithAvatarComponent: A header with a user avatar, adding a personal touch to the application.
• HeaderWithTextComponent: A header with a text description, perfect for providing additional information.
• DialogInfoComponent: A component for displaying information about a dialog.
• MessagesComponent: A component for displaying messages in a chat.
• DialogNameComponent: A component designed for displaying the name of a dialogue and editing the dialogue’s name, providing a convenient way to customize and showcase dialogue information.
• SearchComponent: A search component designed to enhance user convenience when searching for dialogs and users.
• SendMessageComponent: A component for sending messages in a chat.
• UsersComponent: A component displaying list of users.

These components not only enrich the user interface but also contribute to time savings in development. Their usage allows for easy integration of necessary UI elements and provides the ability to quickly customize them to meet the specific project requirements.

Furthermore, these components not only enhance the aesthetic appeal of the user interface but also play a crucial role in providing essential functionality. This makes them an indispensable part of the development process, ensuring both visual attractiveness and seamless user experience.

Customize components

The QuickBlox Android UI Kit allows users to customize components according to individual requirements so that they can create a truly distinctive app.

Each component in the QuickBlox Android UI Kit comes with a set of parameters that can be modified according to your preferences. These parameters may include callbacks, text, color palette, theme, and other design aspects.

Configuration takes place using functions provided by each component through the interface.

Using a ready-made component implementation

We will explore the customization process of components within the QuickBlox Android UI Kit, focusing on the SearchComponent as a specific example.

// 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)

Creating a custom component

The QuickBlox Android UI Kit provides the SearchComponent interface, which you can extend to create your custom component for handling search scenarios.

// 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
    }
}

How to set a component to the Screen

We described how to set components to the screen in the previous article in the section “How to customize screens”. To incorporate a custom search component into the Dialog Screen, you can follow this example. The provided code demonstrates the creation and customization of a CustomSearchComponent, which is then added to the DialogsScreenSettings.

// 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)) // DialogsComponent
    .setHeaderComponent(HeaderWithIconComponentImpl(context)) // HeaderWithIconComponent
    .setSearchComponent(customSearchComponent) // Custom SearchComponent
    .build()

// Display the DialogsActivity with the specified screen settings
DialogsActivity.show(this, dialogsScreenSettings)

Conclusion

The QuickBlox Android UI Kit not only simplifies UI design and implementation but also empowers developers to create unique and visually appealing interfaces, contributing to a seamless user experience. In our tutorial we highlighted several components available in the QuickBlox Android UI Kit, each extending the base Component interface. These components, such as DialogsComponent, HeaderWithIconComponent, SearchComponent, and others, contribute not only to the enrichment of the user interface but also to time savings in development. Their usage facilitates easy integration of essential UI elements, allowing quick customization to meet specific project requirements.

Download our Android UI Kit and start building today!

Check out our other easy-to-follow tutorials:
How to Customize Color Theme and Screens in QuickBlox Android UI Kit
Getting Started with the QuickBlox Android UI Kit