How to Customize Color Theme and Screens in QuickBlox Android UI Kit

Creating visually appealing and user-friendly interfaces is an essential aspect of developing successful Android applications. The QuickBlox Android UI Kit offers developers a comprehensive set of tools and components that streamline the process of UI design and implementation. In this article, we will explore the customization options provided by QuickBlox Android UI Kit and focus specifically on customizing the theme and screens.

Part 1: Getting Started

To begin customizing the theme and screens in your Android application, it is crucial to first initialize the QuickBlox Android SDK and UI Kit. Proper initialization ensures that you have access to the necessary resources and functionalities provided by the QuickBlox UI Kit.

If you’re unfamiliar with the initialization process, don’t worry! You can find detailed instructions and a step-by-step guide on how to set up the QuickBlox Android SDK and UI Kit by following this guide – Getting Started with the QuickBlox Android UI Kit.

You will of course also require a developer’s QuickBlox account. If you don’t already have one, you can easily register for an account today and get started.

Part 2: Setting a Custom Theme

Now we’re ready to cover some of the basic steps for setting a custom theme.

The QuickBlox Android UiKit comes with two preset themes: light (LightUIKitTheme) and dark (DarkUiKitTheme). Both themes implement the UiKitTheme interface, which allows you to use them to customize the appearance of interface elements.

The default themes in the QuickBlox Android UI Kit already define primary colors corresponding to light and dark themes. However, you can also change the specific colors in the preset themes to tailor them to your needs.

val darkUiKitTheme: UiKitTheme = DarkUiKitTheme()

val whiteColor = "#FFFFFF"
darkUiKitTheme.setMainTextColor(whiteColor)

QuickBloxUiKit.setTheme(darkUiKitTheme)

In the example, we set the white color for the main text in the DarkUiKitTheme and set this theme to UiKit. So you can use the default pre-installed themes in the QuickBlox Android UI Kit and change only the colors you need by overriding the appropriate attributes.

But if you want to create a completely custom theme, you must also implement the UiKitTheme interface. By doing so, you will be able to define and customize all colors and attributes to suit your needs.

class CustomUIKitTheme : UiKitTheme {
   private var mainBackgroundColor: String = "#FFFFFF"
   private var statusBarColor: String = "#E4E6E8"
   private var mainElementsColor: String = "#3978FC"
   private var secondaryBackgroundColor: String = "#E7EFFF"
   private var mainTextColor: String = "#0B121B"
   private var disabledElementsColor: String = "#BCC1C5"
   private var secondaryTextColor: String = "#636D78"
   private var secondaryElementsColor: String = "#202F3E"
   private var dividerColor: String = "#E7EFFF"
   private var incomingMessageColor: String = "#E4E6E8"
   private var outgoingMessageColor: String = "#E7EFFF"
   private var inputBackgroundColor: String = "#E4E6E8"
   private var tertiaryElementsColor: String = "#636D78"
   private var errorColor: String = "#FF766E"

   override fun getMainBackgroundColor(): Int {
       return parseColorToIntFrom(mainBackgroundColor)
   }

   override fun setMainBackgroundColor(colorString: String) {
       mainBackgroundColor = colorString
   }

   override fun getStatusBarColor(): Int {
       return parseColorToIntFrom(statusBarColor)
   }

   override fun setStatusBarColor(colorString: String) {
       statusBarColor = colorString
   }

   override fun getMainElementsColor(): Int {
       return parseColorToIntFrom(mainElementsColor)
   }

   override fun setMainElementsColor(colorString: String) {
       mainElementsColor = colorString
   }

   override fun getSecondaryBackgroundColor(): Int {
       return parseColorToIntFrom(secondaryBackgroundColor)
   }

   override fun setSecondaryBackgroundColor(colorString: String) {
       secondaryBackgroundColor = colorString
   }

   override fun setDisabledElementsColor(colorString: String) {
       disabledElementsColor = colorString
   }

   override fun getDisabledElementsColor(): Int {
       return parseColorToIntFrom(disabledElementsColor)
   }

   override fun getMainTextColor(): Int {
       return parseColorToIntFrom(mainTextColor)
   }

   override fun setMainTextColor(colorString: String) {
       mainTextColor = colorString
   }

   override fun setSecondaryTextColor(colorString: String) {
       secondaryTextColor = colorString
   }

   override fun getSecondaryTextColor(): Int {
       return parseColorToIntFrom(secondaryTextColor)
   }

   override fun setSecondaryElementsColor(colorString: String) {
       secondaryElementsColor = colorString
   }

   override fun getIncomingMessageColor(): Int {
       return parseColorToIntFrom(incomingMessageColor)
   }

   override fun setIncomingMessageColor(colorString: String) {
       incomingMessageColor = colorString
   }

   override fun getOutgoingMessageColor(): Int {
       return parseColorToIntFrom(outgoingMessageColor)
   }

   override fun setOutgoingMessageColor(colorString: String) {
       outgoingMessageColor = colorString
   }

   override fun getDividerColor(): Int {
       return parseColorToIntFrom(dividerColor)
   }

   override fun setDividerColor(colorString: String) {
       dividerColor = colorString
   }

   override fun getInputBackgroundColor(): Int {
       return parseColorToIntFrom(inputBackgroundColor)
   }

   override fun setInputBackgroundColor(colorString: String) {
       inputBackgroundColor = colorString
   }

   override fun getTertiaryElementsColor(): Int {
       return parseColorToIntFrom(tertiaryElementsColor)
   }

   override fun setTertiaryElementsColor(colorString: String) {
       tertiaryElementsColor = colorString
   }

   override fun getSecondaryElementsColor(): Int {
       return parseColorToIntFrom(secondaryElementsColor)
   }

   override fun getErrorColor(): Int {
       return parseColorToIntFrom(errorColor)
   }

   override fun setErrorColor(colorString: String) {
       errorColor = colorString
   }

   override fun parseColorToIntFrom(colorString: String): Int {
       try {
           return Color.parseColor(colorString)
       } catch (exception: IllegalArgumentException) {
           throw ParseColorException(exception.message.toString())
       } catch (exception: NumberFormatException) {
           throw ParseColorException(exception.message.toString())
       }
   }
}

After which you need to add your custom theme to UiKit:

val customTheme: UiKitTheme = CustomUIKitTheme()

QuickBloxUiKit.setTheme(customTheme)

Important Note: Modified themes need to be set before launching UI Kit screens and components.

Part 3: Creating a Custom Screen

Customizing screens is an integral part of creating a unique and engaging user experience in Android applications. The QuickBlox Android UI Kit provides a powerful set of tools and components for you to design and implement custom screens that align with your specific requirements. In this section of the article, we will explore the process of creating a custom screen in the Android UI Kit, focusing on leveraging existing components to achieve a unique and personalized interface.

How to create a custom screen factory

The QuickBlox Android UI Kit provides an interface called ScreenFactory, which allows you to customize the creation of screens in your Android application. The default implementation of this interface is DefaultScreenFactory(), which creates screens using Fragments. However, if you need to replace a specific screen with your screen, you can create your own implementation of the ScreenFactory interface. This custom implementation will be responsible for creating the desired screens according to your requirements. This allows you to tailor the screen creation process to suit your application’s specific needs.

open class CustomScreenFactory : ScreenFactory {
   override fun createDialogs(screenSettings: DialogsScreenSettings?): Fragment {
       return DialogsFragment.newInstance(screenSettings)
   }

   override fun createDialogName(dialogEntity: DialogEntity?, screenSettings: DialogNameScreenSettings?): Fragment {
       return DialogNameFragment.newInstance(dialogEntity, screenSettings)
   }

   override fun createUsers(dialogEntity: DialogEntity?, screenSettings: UsersScreenSettings?): Fragment {
       return UsersFragment.newInstance(dialogEntity, screenSettings)
   }

   override fun createPrivateChat(dialogId: String?, screenSettings: PrivateChatScreenSettings?): Fragment {
       return PrivateChatFragment.newInstance(dialogId, screenSettings)
   }

   override fun createGroupChat(dialogId: String?, screenSettings: GroupChatScreenSettings?): Fragment {
       return GroupChatFragment.newInstance(dialogId, screenSettings)
   }

   override fun createGroupChatInfo(dialogId: String?, screenSettings: GroupChatInfoScreenSettings?): Fragment {
       return GroupChatInfoFragment.newInstance(dialogId, screenSettings)
   }

   override fun createPrivateChatInfo(dialogId: String?, screenSettings: PrivateChatInfoScreenSettings?): Fragment {
       return PrivateChatInfoFragment.newInstance(dialogId, screenSettings)
   }

   override fun createMembers(dialogId: String?, screenSettings: MembersScreenSettings?): Fragment {
       return MembersFragment.newInstance(dialogId, screenSettings)
   }

   override fun createAddMembers(dialogId: String?, screenSettings: AddMembersScreenSettings?): Fragment {
       return AddMembersFragment.newInstance(dialogId, screenSettings)
   }
}

After which you need to set custom factory in UI Kit:

val customScreenFactory: ScreenFactory = CustomScreenFactory()

QuickBloxUiKit.setScreenFactory(customScreenFactory)

Important Note: Modified ScreenSetting needs to be set before launching UI Kit screens and components.

How to customize screens

In the Android UI Kit, each screen accepts an instance of a specific implementation of the ScreenSettings interface as a constructor parameter. This ScreenSettings object is responsible for configuring the components and settings of the screen. It’s important to note that the ScreenSettings parameter is optional, and if not provided, the default implementation will be used.

The ScreenSettings interface allows you to define the properties and behavior of the screen components. It provides methods to show or hide specific components and allows you to set custom components for a particular screen. This gives you the flexibility to customize the appearance and functionality of each screen according to your specific requirements.

To create a ScreenSettings object, the QuickBlox UI Kit utilizes the Builder pattern. This pattern allows you to conveniently set the desired properties and configurations for the screen. You can chain multiple methods calls to set various settings, such as showing or hiding specific components, setting custom components, or modifying any other relevant screen attributes.

By using the Builder pattern, you can create a ScreenSettings object with the desired configurations before passing it to the screen’s constructor. This approach simplifies the process of customizing and fine-tuning the screen’s appearance and behavior.

val darkUiKitTheme: UiKitTheme = DarkUiKitTheme()

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

DialogsActivity.show(this, dialogsScreenSettings)

The example above shows how to add ScreenSettings with your own setting to the dialogs screen.

Conclusion

This article focused on customizing themes and screens in Quickblox Android UI Kit. We explored how developers can create their own themes by implementing the UiKitTheme interface and customizing colors to achieve a desired visual style.

Additionally, we discussed the process of creating custom screens using the ScreenFactory interface. By implementing a custom ScreenFactory, developers can have control over the creation and configuration of screens, including the ability to hide or show components and define custom components.

In the next part of the article, we will delve into the various components available in Quickblox Android UI Kit and how they can be customized. We will explore different examples and techniques to modify the appearance and behavior of components to meet specific design requirements. By understanding these customization options, developers will have the knowledge and tools to create unique and visually appealing user interfaces for their Android applications.