AI Agent — automate conversations and workflows. Now available on Free plan
How to Customize Color Themes and Screens in QuickBlox Android UI Kit
Last Update: Sep 17, 2026 
You can customize the QuickBlox Android UI Kit by modifying one of its built-in light or dark themes, creating your own theme with the UiKitTheme interface, and configuring or replacing UI Kit screens using ScreenSettings and ScreenFactory. This lets you adapt the appearance and behavior of the pre-built chat interface to match your Android application’s design.
In this tutorial, you’ll learn how to customize colors and themes, create a custom screen factory, and configure individual UI Kit screens.
Prerequisites
Before you begin, make sure you have:
- A QuickBlox account and application.
- The QuickBlox Android SDK installed and initialized.
- The QuickBlox Android UI Kit installed and initialized.
- An Android project configured to use the QuickBlox Android UI Kit.
If you haven’t completed the initial setup yet, follow How to Add Chat to an Android App with the QuickBlox UI Kit first.
Customize a Built-In Theme
Once the QuickBlox Android UI Kit is installed and initialized, you can start customizing its appearance. The simplest approach is to modify one of the UI Kit’s built-in themes rather than creating a new theme from scratch.
The QuickBlox Android UI Kit includes two preset themes:
LightUIKitThemeDarkUiKitTheme
Both implement the UiKitTheme interface.
You can use either theme as your starting point and override individual colors without creating an entirely new theme.
For example, create the dark theme:
val darkUiKitTheme: UiKitTheme = DarkUiKitTheme()Define the color you want to use:
val whiteColor = "#FFFFFF"Then change the main text color:
darkUiKitTheme.setMainTextColor(whiteColor)Finally, apply the modified theme to the UI Kit:
QuickBloxUiKit.setTheme(darkUiKitTheme)This approach lets you retain the built-in theme while overriding only the attributes you need.
Create a Custom Theme
If you need greater control over the UI Kit’s appearance, create your own theme by implementing the UiKitThemeinterface.
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())
}
}
}
Once you’ve created the custom theme, create an instance:
val customTheme: UiKitTheme = CustomUIKitTheme()
Then apply it to the UI Kit:
QuickBloxUiKit.setTheme(customTheme)Create a Custom Screen Factory
The QuickBlox Android UI Kit provides the ScreenFactory interface for controlling how screens are created.
Its default implementation, DefaultScreenFactory(), creates screens using fragments. If you want to replace a particular UI Kit screen with your own implementation, create a custom implementation of ScreenFactory.
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)
}
}
Next, create an instance of your custom screen factory:
val customScreenFactory: ScreenFactory = CustomScreenFactory()
Then set it in the UI Kit:
QuickBloxUiKit.setScreenFactory(customScreenFactory)ScreenFactory before launching any UI Kit screens or components.Customize an Individual Screen
Each UI Kit screen can accept an implementation of the ScreenSettings interface.
ScreenSettings lets you configure the components and settings used by a particular screen. You can use it to:
- show or hide specific components;
- provide custom components;
- change the theme;
- modify the screen’s appearance and behavior.
The ScreenSettings parameter is optional. If you don’t provide one, the UI Kit uses its default implementation.
The UI Kit uses the Builder pattern to create ScreenSettings objects. This lets you chain configuration methods before passing the completed settings to the screen.
For example, first create a theme:
val darkUiKitTheme: UiKitTheme = DarkUiKitTheme()Then create the settings for the dialogs screen:
val dialogsScreenSettings = DialogsScreenSettings.Builder(context)
.showDialogs(true)
.showHeader(true)
.showSearch(false)
.setTheme(darkUiKitTheme)
.setDialogsComponent(DialogsComponentImpl(context))
.setHeaderComponent(HeaderWithIconComponentImpl(context))
.setSearchComponent(SearchComponentImpl(context))
.build()
Finally, launch the dialogs screen using your custom settings:
DialogsActivity.show(this, dialogsScreenSettings)In this example, DialogsScreenSettings controls which components appear on the dialogs screen, applies the selected theme, and specifies the components used by the screen.
You’ve now learned how to:
- modify a built-in QuickBlox Android UI Kit theme;
- create and apply a custom theme;
- create a custom
ScreenFactory; - configure individual screens using
ScreenSettings.
Next Steps
Next, learn how to customize individual UI Kit components. See our tutorial, How to Configure Components in the QuickBlox Android UI Kit
You may also find these resources useful:
QuickBlox Android UI Kit in GitHub Repository — https://github.com/QuickBlox/android-ui-kit
QuickBlox Android UI Kit Sample Application – https://github.com/QuickBlox/quickblox-android-sdk/tree/master/android-ui-kit-sample
QuickBlox Android SDK and Code Samples in GitHub Repository — https://github.com/QuickBlox/quickblox-android-sdk
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 Developer Discord Community — https://discord.com/invite/3cKRunq8ZZ
QuickBlox Support — https://help.quickblox.com/
Frequently Asked Questions
Can I change the colors in the QuickBlox Android UI Kit?
Yes. You can modify individual colors in the built-in LightUIKitTheme or DarkUiKitTheme, or implement the UiKitTheme interface to create a completely custom theme.
Can I create my own theme for the QuickBlox Android UI Kit?
Yes. Implement the UiKitTheme interface and define the colors and attributes required for your custom theme. Apply it using QuickBloxUiKit.setTheme() before launching UI Kit screens and components.
Can I customize individual screens in the Android UI Kit?
Yes. Use the appropriate ScreenSettings implementation to configure a screen. Depending on the screen, you can show or hide components, provide custom components, change the theme, and modify other screen settings.
Can I replace a QuickBlox UI Kit screen with my own screen?
Yes. You can implement the ScreenFactory interface and provide your own screen implementation. Set the custom factory using QuickBloxUiKit.setScreenFactory() before launching UI Kit screens.
Do I need to build my Android chat UI from scratch to customize it?
No. The QuickBlox Android UI Kit provides pre-built chat screens, themes, and components that you can customize. You can modify the parts you need while continuing to use the UI Kit for the rest of the chat interface.